I was reading a discussion on a forum last week about HTML5, and thought I’d have a quick mess around with it to see what happened with various browsers. I created a test page using the new tags provided by HTML5 (<header>, <footer> etc.).
This page doesn’t display correctly in any browser that I tested (FF3, IE6/7/8, Chrome2, Safari 4, Opera 9.63 or even Opera 10 beta2), although FF, Chrome, Safari and Opera all display the <aside> element correctly for some reason.
I then applied display:block to the css for all the new elements and tried again here.
Slightly to my surprise the page looks fine in FF, Opera , Chrome and Safari. Slightly less surprisingly, it fails horribly in IE6 and IE7. The biggest surprise for me was that it looks just as bad in IE8. I suspect, on reflection, that the browsers that worked did so because of their treatment of unrecognised html elements, rather than their support for the new HTML5 elements.
Here’s what it looks like in IE8 on the left (pretty much the same as in IE7 and IE6) and here’s how it should look in Opera 9 on the right. I have to say I expected it to be OK in IE8, given that’s the pretty much the newest browser I tested with. So much for HTML5 support in IE8…
Conclusion: being able to use even the simpler features of HTML5 looks a long way off…
Tags: browsers