How to use HTML5 in IE 7?

I was wondering whether there is a way to make html5 code visible in Internet Explorer 7 or less.

For example

<div id="container"> 
    <header id="header"> 
        something 
    </header>
</div>

In Internet Explorer 7 the header is not shown at all.

I found a workaround here, a IE HTML5 enabling script, which creates the html5 elements with javascript. But what happens is that the <header> tag looks not at all as it does in other browsers.

So my question is, is it too early to use HTML5 yet or how can I make it cross-browser working?

This (truly) incredible bit of Javascript should fulfill 100% of your HTML5 compatibility needs:

http://www.modernizr.com/

There are 2 important things to consider before using HTML5;

Target audience (with their browser choice)

HTML5 Useful features on your site.

If you are sure that a lot of your users are on IE8 and below, you should avoid using HTML5 almost entirely.

So when you say "is it too early to use HTML5 yet", the answer is it depends on your user base. IE has good support for HTML5 only from version 9 and above..

There is no way by which you can make HTML5 advanced features to work on IE7/8...The html5.js you referred to just makes your CSS to "not ignore" any HTML5 elements and apply styling..It does not do anything further than that..

For all major browser support and score, you can check out html5test.com

Apart from that, you may also check out a very nicely explained tutorial on HTML5 called as DesignMobileWeb available on http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8

Please do remember that if you are going to have a basic site, using HTML5 should be avoided. You should consider HTML5 only if you plan to use Local Storage, Offline Access and HTML5 Forms for mobile devices, etc

IE < 9 doesn't recognize the HTML5 elements and will not generate them. So I use this bit of JS to do the generation:

var e = ("abbr,article,aside,audio,canvas,datalist,details,
figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video,figcaption,summary").split(',');

for (var i = 0; i < e.length; i++){
    document.createElement(e[i]);
}

I use this conditional comment to check whether I need to run the script

<!--[if lt IE 9]>
    <script src="js/html5_createElement_for_IE.js"></script>
<![endif]-->

Of course, you will need to style the tags for IE < 9, but you would need to anyway.

Start with this: http://html5boilerplate.com/. It should solve most of your problems. It works great.

IE versions < 9 will not render elements that they don't recognize, so the new HTML5 elements, header, etc are off the list. Other browsers render unrecognized elements, but without styling.

The way around this is to "show" the new elements to IE by squirting them into the DOM directly using JavaScript. You only have to do this once on each page view.

The two standard ways to do this are: