I was wondering whether there is a way to make html5 code visible in Internet Explorer 7 or less.
For example
I check whether or not the requesting client supports the application/xhtml+xml mime type (it is part of the accepts header sent the request).
If it does not, then I send the client a version of the page using div nodes in place of most html5 semantic nodes.
This (truly) incredible bit of Javascript should fulfill 100% of your HTML5 compatibility needs:
http://www.modernizr.com/
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:
Modernizr also does a whole bunch of other things to do with feature detection.
Try using chromeframe - http://code.google.com/chrome/chromeframe/
By itself though you cannot use most of the cool new features of HTML5 with IE7. It just isn't implemented in the browser plain and simple.