Tony Thomas


HTML5 Document Structure

April 17, 2011 11:42 am Published by Comments Off

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:

html headings diagram

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:

HTML5 Document Structure

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:


Categorised in: , ,

This post was written by admin

Comments are closed here.