CodeinWP CodeinWP

How Does IE9 Handle HTML5’s New Semantic Elements?

Last week I posted a couple of charts that demonstrated how well the new IE9 Beta supports HTML5 features. The first chart listed all the new HTML5 semantic elements (<section>, <nav>, <article>, etc.) and I had originally placed a red “X” next to most of those elements.

Thanks to a comment from Richard Kimber, I later changed the red Xs to yellow checkmarks. It was my assumption that since IE9 does not list those elements as strictly “supported” on its “new features in IE9” pages, then that means we still need to use the HTML5 shiv script. Of course, if I had been paying attention, I would have noticed that the script is included using conditional comments that target every version of IE below IE9.

The reason for this is that while IE9 does not technically include the new semantic elements in its list of supported tags, it does have the ability to allow those elements to be styled. Here’s the explanation on the IE9 Beta Guide for Developers under the heading “HTML Parsing Improvements”:

Previously, Internet Explorer would parse elements it didn’t recognize as “unknown” elements. These elements would be flattened, which kept normal CSS styling rules from applying to them, and was not compliant with the HTML5 draft specification. Internet Explorer 9 Beta changes this behavior, and now parses unrecognized elements as “generic” elements, allowing them to function like normal elements do. This obviates the need for developer workarounds, like calling document.createElement to force Internet Explorer to recognize an element.

So since those elements don’t really have any attributes that belong to them (like the <video> element’s src attribute), then the fact that IE9 doesn’t actually recognize them individually doesn’t really matter much (at least I don’t see a reason why it would matter). For CSS developers, all we care about is that we can style them without any JS hacks, and that they’re recognizable in the DOM.

Conclusion

IE9’s support of HTML5 is actually pretty good. It would be nice to see support for some of the form enhancements, Web Workers, Offline Web Apps, and a few others, but since the semantic elements don’t cause the same problems as previous versions, and since the video and audio tags and many other things are supported, that’s certainly a good start.

5 Responses

  1. GreyCrab says:

    Maybe IE9 could help Microsoft to get less awkward. Designers would say “We hate IE6, but we love IE9”

  2. Phong says:

    I didn’t use IE since I tried Opera (2004), now, everybody discuss IE9 everywhere although it’s being beta, really I also hope to see how it works soon

  3. Exionyte says:

    Fingers crossed that IE9 will be the real deal!

  4. John Clarke says:

    Here is to hoping that IE9 works like any other browsers this time round…

    • I really don’t see why people have had such a problem with CSS for IE. Yes, it’s true that IE has not had any “bonus” stuff like CSS3, but that’s not a standards requirement. And IE6 is the only one that doesn’t support PNGs.

      Personally, I’ve rarely ever had a problem getting sites to work cross-browser in IE7, IE8, and every other browser. The only browser I ever need hacks and workarounds for is IE6.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).