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.

HTML5 Test in Microsoft Internet Explorer 7

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.

HTML5 Test in Firefox 3 Beta 1

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.

HTML5 Test in Opera 9.2

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).

HTML5 Test in Camino

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

HTML5 Test in Safari

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

6 replies to A Quick Play With HTML5

  1. It displays as it should in Safari 3 so WebKit seems to be well in there for early support. I think they have some early CSS 3 support too. In fact it even renders properly on my iPhone! Yay Apple ^_^

    Microsoft should just abandon the IE rendering engine, it’s so horribly broken, it would be far more sensible to adopt either WebKit or the Mozilla engine.

  2. Rory: Aye, a friend’s now ensured I’ve now seen it in Camino (looks like Firefox, unsurprisingly) and Safari (looks like Opera: good!). I’ll post screenshots at some point.

    Statto: I used to be firmly in the XHTML2 camp, but I’ve since been swayed to the HTML5 camp. It’s theoretically faster-to-parse and render, it’s backwards-compatible (extremely important on the web) and it provides more valuable features for the way the web is actually going, rather than the way it should be (which is what XHTML better caters towards). If you want XML compliance, you can always do what they’re calling XHTML5 (i.e. HTML5 with XML rules).

    Plus, everybody who matters is backing HTML5, and almost nobody’s backing XHTML2. Beautiful and elegant though it is, we won’t see browser support for it for years and years, whereas browser support for HTML5 is on the horizon already. I know what I’ll be developing for next year.

    Thanks for your comments, guys.

  3. Yo Scatman –

    Sounds like you’ve written off XHTML2, but you are secretly pulling for XHTML 5, while talking up HTML 5. I think we have to keep the “X” in there, man. Isn’t that what powers much of Web 2.0? You have an interesting view, so you might want to join a thread at WebMaster-Talk.com where 100% of those surveyed are against HTML 5 (so far) and for XHTML 2. See:

    My own bottom line? Divide and die. Combine and conquer. Who wants to wrestle with another standard… Microsoft has a hard enough time implementing just one. So I say put the XHTML 2 heads and the HTML 5 heads in one room and let them crunch out ONE standard language. If it turns out to be XHTML 5 — cool. In fact, we could name it “Cool 1.0”.

    Yours, Scott

Leave a Reply

Your email address will not be published. Required fields are marked *