Structure Content Presentation Semantics
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " An XHTML 1.0 Strict standard template <meta http-equiv="content-type" content="text/html;charset=utf-8" /> … Your HTML content here … DOCTYPE XML Namespace Content Type & Character Set
DOCTYPE Provides info for browsers and validators An attempt to deal with code written according to standards versus legacy code from 1990’s Browsers can operate in three modes ( render the page differently): Standards Mode Quirks Mode Almost Standards Mode Excellent article Some browsers will switch to Quirks mode if DOCTYPE not present Great Timeline of Browser: Not valid HTML if you leave DOCTYPE out Different DOCTYPES for each version of HTML and XHTML
Common Doctypes declarations: Strict This is what you should be using. Doesn’t allow HTML tags being used for presentational purposes – Ex. center, font, iframe, strike, u, align bgcolor, noshade, nowrap, text, link, vlink, vspace Transitional Good for legacy code Helpful for people moving from older HTML to web standards Frameset Not recommended Firefox tells you the mode in upper right corner: checkmark for standards and an x for quirks mode.
Things to remember about DOCTYPEs Copy your DOCTYPE from a standardized template because typos or spacing errors could invalidate the DOCTYPE If a browser reads an HTML file without a DOCTYPE it may think this is a very old html file and the browser may use its old rules (Quirks mode) to try to display it. You may waste time fixing the HTML in a document because of a faulty DOCTYPE Use the DOCTYPE to help you validate your page – find typos, syntax errors and deprecated tags For this class use XHTML 1.0 Strict!!!!! As HTML% becomes more popular, all this DOCTYPE stuff looks like it will go away.
xml namespace An attribute of the html tag It is an XML thing. Namespaces help clarify confusion around tags with the same name. The URL is actually a unique identifier – no code is read from the site or interpreted by the browser
head section An XHTML 1.0 Strict standard template <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Head section does not display on rendered document. Why?? Head section at a minimum consists of a title and a meta tag containing content type and charset
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> content=“text/html” - MIME (Multipurpose Internet Mail Extensions) is a standard that describes content being sent. Content can be text, images, audio or application specific The server can send a message in the HTTP header stating the content type Or the document (in web design) can have a attribute in the meta tag stating the type The server overrules the document Remember XHTML 1.1 expected a document of type application/xhtml+xml - never really worked Browser has different “engines” and rules and needs to know how to interpret the bits and bytes Firebug – Net panel shows headers with content types
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> What is this charset stuff?? character-encoding/2 character-encoding/2 html html ASCII – Unicode – UTF8 – More acronym soup For most html documents you create use utf-8 Very good article
Sometimes you may see the following before the DOCTYPE: This is called an xml declaration The W3C stated it is optional. This declaration causes IE6 to jump into quirks mode Most web designers seem to have dropped this declaration.
When HTML was only used by scientists the emphasis was on the structure of a page – no need for the page to look “pretty” Headers(h1), sub-headers(h3), paragraphs(p), lists(ol). However, users and browser manufacturers allowed users to apply certain HTML tags for presentational (look pretty) purposes. HTML House of Horror: hings_that_go_blink_in_the_n.html#26 hings_that_go_blink_in_the_n.html#26 Header tags to make something bold and big even if it wasn’t a header. Blockquote (blockquote) tags to make some text indented even though it wasn’t a quote. Font (font) tags to change the size and color of text. Table (table) tags to make the layout of a page!
Use HTML for structure Try to use a tag that comes close to the role the content plays on the page ( CSS: The Missing Manual, 2 nd edition) In other words write semantic HTML antic_html/ antic_html/ HTML 4.01/XHTML 1.0 list of allowed tags for Strict, Transitional and Frameset Note the deprecated tags – won’t pass validator in Strict mode Use CSS (Cascading Style Sheets) for presentation Apply CSS to the HTML tag
From CSS: The Missing Manual 2 nd edition 1. Use HTML for structure 2. Use CSS for presentation 3. Stop using,,, for layout and body tag attributes like background, bgcolor, text, link, alink, vlink 4. Stop using leftmargin, topmargin, marginwidth, marginheight attributes 5. Don’t overuse the tag Rule of thumb: Stop using attributes assigned to tags to control color, borders, backgrounds, and alignments. List of deprecated tags and attributes:
From CSS: The Missing Manual 2 nd edition 1. Only use one H1 tag per page 2. Use headings to indicate relative importance of text. Ex. All headers of equal importance should share a or tag. Use the next level down for lesser important text. Try not to skip levels. 3. Use for paragraphs of text 4. Use for list of related items 5. Use for steps or order of importance
6. For glossary of terms use,, 7. For quotes use either or 8. Be specific if you can: for book title, newspaper article, website for contact information 9. Avoid using tags to simply add presentation 10. If a tag doesn’t fit the bill look to the and tag 11. Don’t overuse tag 12. Develop good coding habits !!!! like/ like/