Yes, You Can Use HTML 5 Today!

Here’s how IE 8 displays our example at the moment:

We’d like IE to recognise that these elements exist. At the top of the page, we need to add the following JavaScript, which is simply a series of document.createElement statements:

<!--[if IE]>  
<script>  
 document.createElement("header");  
 document.createElement("footer");  
 document.createElement("nav");  
 document.createElement("article");  
 document.createElement("section");  
</script>  
<![endif]-->

I’ve surrounded it with a conditional comment, so the other browsers can ignore the IE-only code. Now, lo and behold, your page styles in IE—if you’re using IE, you can see the fixed example here.

Of course, this workaround only helps if your IE-using visitors have JavaScript turned on, but for a fully-fledged HTML 5 application, the whole site would be unlikely to work if you have JavaScript turned off.

Let’s have a more detailed look at what each of these structural tags are for, and meet some new ones.

header and footer

header is our new element for headers, oddly enough. The natural place to use this element is for the main banner at the top of your web site, but a page can certainly contain more than one header. You’ll notice that we have multiple articles in our rudimentary blog post; each of these can have another header that contains the heading, byline, and date for that article.

The same goes for footer, too. There’s a footer at the bottom of the whole page, but there’s also a footer at the bottom of each article, listing the category that the article is in and how many comments it has. So each individual article is marked up as follows:

<article>  
 <header>  
   <h1>Header for article 2</h1>  
   <p>Posted 14 June 2009</p>  
 </header>  
 <p>article 2</p>  
 <footer>Posted in the "trains" category  
 by Thomas T. Tang-Kenjin</footer>  
</article>

This is perfectly valid HTML 5: on the topic of footers, the spec says “the footer element represents a footer for the section it applies to,” and also: “Footers don’t necessarily have to appear at the end of a section, though they usually do.” Check out the source of our example and validate it. The additional headers and footers can be very easily styled with simple descendent selectors—article header and article footer. Our third example shows a blog with two entries, each with its own header and footer elements.

There’s a newly proposed element for grouping headings and subheadings together—hgroup—that looks like this:

<header>  
 <hgroup>  
   <h1>HTML 5</h1>  
   <h2>The mark-up language for fun and profit</h2>  
 </hgroup>  
</header>

It seems unlikely to me that the hgroup element will make it through various revisions of the spec, and I struggle to find a real use case for it in this example.

nav

nav is used to indicate navigation areas. There can be more than one nav element in a page, just as there can be primary and secondary nav on a web page, and it’s unnecessary to put every group of links into nav elements. As the spec says:

I think that’s ambiguously written; what I think it should say is that “only sections that consist of blocks whose primary purpose is navigation around the site are appropriate,” so that lists of links to sponsors or advertisers could be distinguished from a site’s navigation.

You can, if you wish, include primary navigation in the header element, but this is optional. Just like now, navigation is usually marked up as an unordered list of links or, in the case of breadcrumb trails, an ordered list.