« Blog software update
hCard Buttons Across the Web »

Adventures in Web 3.0: Part 1 - HTML 5

Last week I was reading about the Event Apart re-design which uses HTML5. I have remained peripherally aware of HTML 5 (I'm on the mailing list) but mostly I've just been following the ongoing debate about adding RDFa to the spec (which has seemed, at best, like two groups of people talking at cross purposes). With major, albeit web designer focussed, websites starting to use it in production I thought it was probably time I learned a few of the nuts and bolts.

So to get started I had a quick skim through Lachlan Hunt's article 'A Preview of HTML 5' and, yes, nicked his code:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>An HTML 5 Document</title>
  </head>
  <body>
  <header>
    <h1>A Preview of HTML 5</h1>
    <p class="byline">By Lachlan Hunt</p>
  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
  <article id="comment-2">
    <header>
      <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
          by <a href="http://example.com/">Jack O'Niell</a></h4>
      <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time></p>
    </header>
    <p>That's another great article!</p>
  </article>
  <aside>
    <h1>Archives</h1>
    <ul>
      <li><a href="/2007/09/">September 2007</a></li>
      <li><a href="/2007/08/">August 2007</a></li>
      <li><a href="/2007/07/">July 2007</a></li>
    </ul>
  </aside>
  <footer>© 2007 Example Inc.</footer>
</body>
</html>

As you can see it's very similar to HTML 4, but with some unfamiliar elements:

  • DOCTYPE - lacks any kind of URI, it's included purely to trigger standards mode in browers
  • header, nav, article, aside, footer - new block level elements to provide more semantic structure to web pages, mostly they mean what you expect although 'aside' might be better considered as 'sidebar item'
  • time - new inline elements, although only one is shown here, to solve particular problems with, or encode common usage patterns of, current HTML, in this case the Datetime Design Pattern

These unfamiliar elements aren't a problem for Firefox, the above code displays just fine:

Unstyled HTML 5 in Firefox

So with the markup in place I started wondering about how CSS would affect things. The first thing I discovered was that Firefox doesn't have much in the way of default styling for the new elements - so setting background colours doesn't have much effect until I added some default styles:

header {
    display: block;
    width: auto;
}
nav {
    display: block;
    width: auto;
}
article {
    display: block;
    width: auto;
}
aside {
    display: block;
    width: auto;
}
footer {
    display: block;
    width: auto;
}

With these rules in place I was then able to apply a very tasteful colour scheme to my basic layout:

Styled HTML 5 in Firefox

Looks about the same in Google Chrome:

Styled HTML 5 in Google Chrome

And in Opera:

Styled HTML 5 in Opera

Unfortunately it all falls down in Internet Explorer as we're back to seeing the page unstyled. This is because IE doesn't apply CSS styles to elements it doesn't know about. Fortunately, there's a hack (which I discovered on Bruce Lawson's HTML 5 example page) - if you use document.createElement in JScript to create instances of the new elements (no need to even add them in to the DOM), IE 'learns' about them and then applies CSS rules. So I created a JS file and included it in conditional comments:

document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('time');

So now in IE7, looking fairly consistent with the other major browser engines:

Styled HTML 5 in IE7

Also in IE8b2 in 'compatibility mode':

Styled HTML 5 in IE 8

Unfortunately the workaround breaks in IE8 beta 2 in 'standards mode' - though it's been fixed for the next beta.

For extra credit I did a version of my stylesheet which used the CSS table layout rules (thanks Roger), but I think I'll save the advanced CSS, as well as the fun new HTML 5 elements, such as video and datagrid for follow up posts.

Front End Web Development, Standards, HTML and CSS
 Print article This entry was posted by robertc on 18/01/09 at 06:42:46 pm . Follow any responses to this post through RSS 2.0.