HTML5 tag-support for Internet Explorer 6, 7 and 8
HTML5 has many new structural tags (for example header, nav, article, section, aside, footer and nav) that are very useful for semantically annotating your markup. These tags should really be used to replace all your old div-tags whenever possible. Lachlan Hunt over at A List Apart has written a pretty good preview article about these new tags.
The only problem is that older browser, especially IE 6-8, won't recognize these tags and will just display them like inline elementes instead of block elements. The consequence is that your layout will suffer.
A simple solution to solve this is to use a HTML5 enabling Javascript to create the new HTML5 elements when the page loads.
The script:
(function(){
if(!/*@cc_on!@*/0)return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(',');
for(var i=0;i<e.length;i++){
document.createElement(e[i])
}
})()
Then simply drop this script in the <head> section of your page using a conditional expression, like this:
<head>
<!--[if lt IE 9]>
<script src="/assets/javascript/html5forIE.js" type="text/javascript"/>
<![endif]-->
</head>
This will enable the new HTML5-tags for IE 6-8 and do nothing for all other browsers. Simple!
Resources
- HTML5 enabling script, Remy Sharps b:log
- A Preview of HTML5, Lachlan Hunt, A List apart