Render unsupported HTML5 tags in Internet Explorers

Old versions of Internet explorer do not support new html5 tags. In HTML5 the <video> tag for example allows you to embed a video on your page directly into your page, without having to resort to flash. HTML5 shims do not make this possible either.

The problem HTML5 is that the older IE browser does not render any unsupported tag. It could be a bug but I am sure the Internet Explorer team does not pay much attention to older IE versions anymore.

Every unsupported tag will simply be ignored and IE will render the rest of the content. The good thing is the way to fix this could be a simple line of code. If you create any of the tags using JavaScript, IE automatically start rendering them. Don't ask me why.

Well here is how it goes:

// to make the browser render the <article> tag, just create it with JavaScript
var article = document.createElement("article");

And voilà! The article tag is now rendered correctly. OK that's not the only tag we need, so we will have to do the same for all HTML5 tags. I found a little trick with Regex that does just that in one simple statement.

// Shim
(function(d) { 
    'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video'.replace(/\b\w+/g,function (a){
        d.createElement(a);});
})(document);

All this does is take a string of space separated html tags, match every word and create a DOM element with each. I place it on top of my main JavaScript file and don't have to think about it again.

If you want to detect the IE browser, read my post on How to detect the IE browser.