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:
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:
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,
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.
- HTML5 Document Structure
- Using Impress.js
- Baseline Theme Version 1.1
- Why Use Blueprint and the 960 Grid System in the Baseline Theme?
- Blueprint CSS Tutorial File
This post was written by admin