A Quick Play With HTML5

I’ve been playing with HTML 5 a little this morning. It’s really quite fabulous: a lot of smart design decisions have been made and it looks like – given a good few years to get things up to scratch even after the specification has been finalised – it’ll really provide a lot of useful tools to help the web developers of tomorrow reach their goals more easily and in a more structured way.

I knocked up a quick test page to see how the code comes together, and, in particular, to play with the new sectioning elements that can be used to state what parts of the page have what purpose and what their relationship is to the rest of the document. So far, so good. Then I tried to style them.

Internet Explorer 7 didn’t really stand a chance, I suppose. Microsoft don’t have any plans to support either HTML 5 or XHTML 2 – an alternative language for the future web – and that probably won’t change until they think they’re losing browser market share over it. That’ll happen, perhaps, but much slower than they lost market share to Firefox over issues of speed and security: the media make a far bigger deal of computer security these days than they ever will about standards-compliance, because standards-compliance doesn’t sell newspapers.

So yeah; IE7 got all the content, at least, thanks to the fact that HTML 5 is backwards-compatible (in a way that XHTML 2 simply isn’t), and the page is just about understandable. But it wouldn’t allow CSS styles to be applied to any of the "new" tags it didn’t understand, so the page is quite a bit more simplistic that it should have been.

I’d expected more from the latest beta version of Mozilla Firefox – Mozilla are, along with Apple, perhaps the biggest supporters of HTML 5 as the future of the web. Unfortunately, I was mistaken.

Perhaps the majority of the HTML 5 support will come in a later release of Firefox – although it’d be nice it they supported at least the core, well-understood features in the final release of Firefox 3. Yeah, yeah, I know they’ve started to implement support for things like <canvas> and stuff, but it’s hard to get excited about things that, while cool, I’m just not likely to use.

Firefox understood that there was something to do with floating something in the <aside> element, but didn’t do a very good job of actually floating it, instead just drawing a box where it might have put it if it understood it better. This is actually just slightly worse behavior than IE, which failed to understand but didn’t half-heartedly try to interpret what it didn’t "get." Nonetheless, Firefox still rendered a readable, understandable page – good old backwards-compatibility, there.

Opera, as I’d have expected, excelled here. Opera’s support for emerging standards has always been impressive, and this was no exception, as it rendered the page almost exactly as I would have expected. It genuinely seems to understand the new sectioning elements provided by HTML 5 (although a later experiment has shown that this is possibly just because it will happily interpret CSS directives for unrecognised elements: however, this is a good future-proofing strategy for any browser – had Mozilla taken this approach, the majority of the page would have looked perfect in Firefox, too).

In short, we’re a long way from being able to use HTML 5 in any real way, and all the exciting things it’s bringing will have to wait for now. But I expect we’ll be seeing better and better compliance with the standard as the standard becomes more finalised next year and the geeks at the major browser manufacturers compete to have the coolest features first. My prediction? Lead by Opera, Safari, and Firefox (as well as Konquerer, which I gather is also likely to support HTML 5 early), we’ll start seeing usable snippets of some of the fun things the future of the web will bring us as early as next year, and Microsoft will – eventually – give in and implement them in Internet Explorer too.

In the meantime, it’s been fun to read through the current working draft specification for what I think is likely to be the more popular language of the next generation of the web. But that’s perhaps just because I’m the kind of person who enjoys reading specifications for fun.

Update: Two more browser snapshots (thanks Katie).

Camino, as you might expect, looks pretty much identical to Firefox.

Safari fares well, rendering the page in the same way as Opera did, seemingly understanding all of the elements perfectly.