Search code examples
htmlinternet-explorer-7internet-explorer-6semantic-markup

HTML5 semantic markup ignored in IE7

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.

HTML tag markup in IE7

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?

Solution

  • 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/