Semantic elements and the Shiv!

This is the second entry in the series of demos from the “Using HTML5 Today” talk.

For the definitive discussion on unknown elements and the HTML5 Shiv check out Mark Pilgrim’s Dive Into HTML5 online book at http://diveintohtml5.info/semantics.html#unknown-elements

Semantic tags increase the meaning and maintainability of your markup, help make your page more computer-readable, and can even provide opportunities for libraries that are written to automagically enhance content using standard tags like <nav>, <header>,  or <footer>.

Legacy IE issues

However, new HTML5 tags get mangled in IE browsers prior to version 9.  To see this in action, consider this bit of HTML code which includes the new <article> and <header> elements:

Viewing this page using the IE9 developer tools (F12) we see that the browser correctly models the hierarchy of tags listed above:

But if we switch to IE8 Browser Mode in developer tools things go bad:

Did you know that a closing tag could close itself?? The browser loses the hierarchy & closes all of the new tags.  The new tags become unusable and the page structure falls apart.

Additionally block-level elements lose their block status, appearing as inline. 

The Fix (good)

The block-level issue can be resolved by using CSS styling.  Below we set the article, header, and footer tags as block tags.

article, header, footer {display:block;}

You can avoid the unknown element issue by creating a version of the element in JavaScript before the actual HTML5 tag appears on the page:

   <script>
        document.createElement("article");
        document.createElement("header");
        document.createElement("footer");
    </script>

By default the Modernizr library includes HTML5 Shiv, so you don’t need to include the shiv code separately if you are using Modernizr.