The year of HTML 51

Let’s kick this year off with a prediction: by the end of 2009, you will be writing HTML 5.

In the past two months the fifth incarnation of the hypertext markup language has gained considerable momentum. While we are still far from widespread knowledge – just think about those “web design with Dreamweaver” crash courses – I presume that those of us adhering to web standards will have at least heard of the basics by now. If you haven’t, get started with my introduction to HTML 5.

Flick the switch

To break the ice and lead the way, I have converted this site to HTML 5. It took me about 35 minutes including validation and browser testing, and involves just a few small tweaks. The process:

1. Ditch the crufty first 4 lines of code, and replace them with the ubersimple HTML 5 doctype and character set.
2. Swap some semantically meaningless div elements with the new nav, header, footer, article, section and aside elements.
3. Update your CSS selectors to match these replacements, and make sure they’re block level elements.
4. Add a bit of Javascript so Internet Explorer can catch up:

   <script>
     document.createElement('header');
     document.createElement('footer');
     document.createElement('section');
     document.createElement('aside');
     document.createElement('nav');
     document.createElement('article');
   </script>

The above script will force IE to accept the new elements as DOM nodes so that matching CSS rules will be correctly applied. Credit to Sjoerd Visscher for first mentioning this tip. This will only work when Javascript is available of course, so maybe you’ll want to be cautious on using these new elements.

So, now you see that a very basic conversion to HTML 5 isn’t such a big deal. I’d like to encourage you all to flick the switch, and get familiar with it. More and more parts of the spec will be supported in the future, and you’ll want to have a head start.

Get acquainted

Several other interesting blog posts and messages on HTML 5 have emerged lately, and they’re worth your attention. Here’s a quick overview.

• Some big names in the Web Standards world have recently made the switch to HTML 5, and published their thoughts and experiences along the way: An Event Apart by Jeffrey Zeldman and Eric Meyer, and UX London by the lads from Clearleft.
• Opera’s Bruce Lawson has made a great test case to see whether it’s possible to use the new HTML 5 structural elements now.
• Steve Smith from Ordered List has started a series of articles on HTML 5. So far he wrote about getting started with HTML 5 and structural tags in HTML5.
• Cameron Moll is familiarizing with HTML 5, and in the process he shares a list of 12 useful HTML 5 resources.
• The official W3C validator now features experimental built-in support for HTML 5. This is great news, and I really hope HTML Tidy – on which a lot of validation browser plugins are based – will be updated soon as well.

So are we on the right track?

Perhaps the most interesting post on HTML 5 so far this year is John Alsopp’s piece on semantics in HTML 5. In short, John questions both the backward and forward compatibility of inventing new elements. If every new version of HTML is going to introduce a whole bunch of new elements, where will it end, and how are older browsers going to cope? He claims it would be better to introduce some sort of extensibility mechanism, for example by leveraging a couple of new attributes.

There’s some really valid points in his essay, but a) one could of course question the true backward and forward compatibility of his attribute solution and b) I fear his critique is coming too late. HTML 5 is here to stay, whether you like it or not. Let’s hope the transition is smooth and we can learn a lot from it, so HTML 6 will be even better.