New HTML5 elements and IE8

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.

HTML5_IE8HTML5_Opera

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:

2 responses to “New HTML5 elements and IE8”

  1. Richard says:

    I have been using an HTML5 shiv for a couple of years using conditional comment for IE & based on
    “http://html5shiv.googlecode.com/svn/trunk/html5.js”
    and it has allowed me to code with all HTML5 features. HTML5 makes web dev for me simpler and more feature packed. I convert many sites like this with an old XHTML doctype to HTML5 & that brings them into the modern web dev era! I suggest you give it a try now! I’m sure you too will enjoy & benefit from the HTML5 standard which imho has many benefits 🙂

  2. Simon says:

    HTML5 isn’t a standard at the moment, and I’m not happy relying on javascript to make IE display properly – the absence of the js has a disastrous effect on display, as this page shows. That’s why I stick to XHTML strict at the moment.

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.