Since I’ve started working with HTML5 a bit, I’ve had to adjust my thinking about page structure. HTML 5 page structure differs from HTML 4 or XHTML significantly. (X)HTML document structure should look like this:
Proper document structure in HTML 4 and XHTML. (http://cssglobe.com/post/1213/how-to-use-headings-in-html)
This has changed in HTML5. HTML5 has “outlining elements” that essentially reset the page hierarchy. This is a little tough to get your head around if you’ve spent as many years as I have using the page structure in the figure above. A diagram of an HTML5 document might look like this:
A demonstration of HTML5 "sectioning" elements.
Notice the difference? It’s fairly subtle, but most recognizable in the section element. In (X)HTML, the headings in the article section would be subject to the same hierarchy as the rest of the document so article headings would have to start with h3 or maybe even h4. In HTML5, nav, section, article and aside are “sectioning” elements, so they can have their own hierarchy of headings. Notice that the header HTML5 tag is not a sectioning element, so it’s h1 still rules the page.
Note: No browsers support this outlining algorithm. (I know.) It’s coming, so I think it’s important to get our heads around it now.
Similar Posts:
- HTML5 Document Structure
- Baseline Theme Version 1.1
- Why Use Blueprint and the 960 Grid System in the Baseline Theme?
- Blueprint CSS Tutorial File
- CSS Scaffolding