Geeks With Blogs

Steve Albers

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

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:


The Fix (better)

Rather than adding your own JS you can take advantage of a standard JS library such as Remy Sharp’s HTML5 Shiv at

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

Posted on Friday, March 16, 2012 1:26 AM HTML5 | Back to top

Comments on this post: Using HTML5 Today part 2–Fixing Semantic tags with a Shiv

# re: Using HTML5 Today part 2–Fixing Semantic tags with a Shiv
Requesting Gravatar...
I am aware about those techniques that are talking about how to get professional in separating the HTML body but your solutions seems quite fast and a lot more easier that the one that I used to know. Nice to have your advices available.
Left by Marcus on Aug 05, 2015 2:17 PM

Your comment:
 (will show your gravatar)

Copyright © Steve Albers | Powered by: