I’ve reworked joeblade.com to use new HTML5 elements in favour of generic divs: header, article, aside, footer and time.
The structure I’m using is more or less as follows:
<header>
<aside>
<article>
<header>
<time>
<footer>
You can view the source code for the full story. The first <header> is there to contain the masthead, and that’s all it does for now. The <aside> is for ancillary information about the main article and its category: related posts, tags and other posts from the same category. The <article> is obviously the main bit of content on the page.
The second <header>, within the <article>, contains the post headline and the byline. The byline contains the <time> element for the publication date, amongst other things.
The <footer> just contains what you would expect; footer stuff. In my case, it contains a bunch of links to category indecies and a few other pages.
The <time> element
My publication date is marked up like this:
<time datetime="2010-05-30">30 May, 2010</time>
The text of the element is in a human readable form; the datetime attribute provides a machine-readable form (though what I’m using is probably still readable by most humans). If I was using multiple <time> elements then I could remove ambiguity as to the function of this first one by including a boolean pubdate attribute, to indicate that this is a reference to a publishing date rather than, for instance, an event.
The <nav> element
You’ll notice I’ve not used a <nav> element for any of the links in my footer — I ummed and ahhed about this for a while but decided against it on the grounds that the <nav> element is meant for the site’s major navigation, and my site doesn’t really have major navigation. It isn’t a site you really navigate — you’re generally just reading an article. So, this is more of a philosophical omission rather than a technical one.
HTML5 enabling script
Modern browsers will allow you to style unrecognised elements but to support versions of IE older than version 9 I’m using Remy Sharp’s HTML5 enabling script.
Benefits
What I’ve done for joeblade is all pretty basic, but it did help me to think more about the actual structure of my site and what things meant. When everything’s a <div> you just end up throwing stuff together, but HTML5 makes you think a bit more, and I spent more time reorganising my page than I did introducing new elements.
It’s unclear what benefit there is at this stage; I assume that search engines will start paying more attention to HTML5 markup than <div>–heavy markup in the same way they tend to favour standards-based sites over old table-based layouts. At the moment though, converting my sites to HTML5 was useful as a thought exercise, and it’s refreshing to not have to use the same tag for every element on the page.
Further reading
Designing a blog with HTML5 by Bruce Lawson
Tweet
