boogdesign posts

Longer posts on standards based web design, portable web development and Linux, intermingled with some stuff on my other nerd interests.

Rob Crowther, London, UK based Blogger, Web Developer, Web Designer and System Administrator - read my Curriculum Vitae

Buy my book!

Book CoverHello! HTML5 and CSS3 available now

Buy my other book!

Book CoverEarly access to HTML5 in Action available now
« Blog software update :: hCard Buttons Across the Web »

Adventures in Web 3.0: Part 1 - HTML 5

18/01/09

06:42:46 pm Permalink Adventures in Web 3.0: Part 1 - HTML 5

Categories: Front End Web Development, Standards, HTML and CSS

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.


Tweet this!
PermalinkPermalink

Comments:

Comment from: randell [Visitor] · http://randell.ph/geeky/
17/04/09 @ 19:03
The new elements not having default styling is tricky! Spent some time wondering why my footer and header no longer displays as desired.