Enable HTML5 elements in older IE versions

Sad factIE 6 ->8 versions present an obstacle in HTML5 development as they do not recognize the new elements and in turn these new elements cannot hold children and will not be affected by CSS

Good news: There is a work around that enables older versions of IE to recognise and style the HTML5 elements. Its called HTML5Shiv.

Implementation is very simple:

First check if the IE browser being used is earlier than version 9.
<!--[if lt IE 9]>
<!--[endif]-->

Then load the HTML5Shiv script from the Google Code repository.
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>

As a result you will have the below script which must be placed in the head element (<head></head>) because IE needs to know about the elements before it renders them.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<!--[endif]-->

Now you can start using HTML5 Elements (header, nav, footer, article, section, aside, figure , etc..) and rest assured that your HTML5 website will render neatly in IE 6  , 7 & 8.

Side Notes:

Posted in HTML5, Web Development Tagged with: , , , , , , , ,