HTML5 semantic markup ignored in IE7

Question

I'm trying to use semantic tags on my page (http://toytic.com/class/html5_docStructure.html ). I expected them to behave like normal markup tags without any styling information (e.g. display block.

However when I look DOM structure in the IE7 debugger, I see that the tags are imidatly closed and all style attributes are ignored.

I know their are libraries like modinizer, but what I have read so far, they just use the CSS trick, where they set the following CSS attribute, so the browser interprets the semantic elements like normal divs:

header, nav, article, footer, section, aside, figure, figcaption {
            display: block;
        }

what am I missing?

Answer 1

Old versions of IE that do not understand the new tags in HTML5 require a little JavaScript trick, called a 'shiv', to enable them for display and styling. Setting the CSS to display: block alone will not do the trick.

The HTML5Shiv can be included by itself, or packaged with a wider library such as Modernizr (which you really should be using in any case).

HTMLShiv: http://code.google.com/p/html5shiv/

Modernizr: http://modernizr.com/

Answer 2

You have to use modernizr plugin to give the older browsers fallbacks for HTML5. Just embed it in your head tag script after downloading the minified version. You can also use HTML5 shiv.

I also recommend when you do websites, boot it up with initialzr. It'll give you all the dependencies you need.

Answer 3

Modernizr also uses something comparable to HTML5shiv which adds the elements to the DOM as well. Check out what happens in that JavaScript.

Answer 4

Same thing happened to me. Make sure that "html5shiv v3.6" is checked when you download Modernizr.