Paulund

Turn On HTML5 In IE8 or Lower

HTML5

HTML5 is becoming more and more popular, with this has some issues. If you want to support some of the older browsers which are still being used such as IE8 and lower then using HTML5 you are going to have some trouble.

Internet Explorer 8 And Lower

The problem with IE8 and lower browsers is that they were created years ago before any of the new HTML5 tags were invented so it can’t support them. Microsoft will not release updates for these browsers because they have created IE9 so they want people to upgrade to this.

If people don’t upgrade then they are stuck with an out of date browser which can’t support these new HTML tags.

The browsers won’t know anything about these new tags of article, section, hav, header, footer so it can’t support them. If you are using these tags you are most likely be styling the tag itself or you would have to add a class to the tag, which takes away the point of using HTML5.

As the browser doesn’t know about these tags then it can’t style them so you will find that in IE8 or lower your websites will be without many styles.

Correct Way To use HTML5 For IE

To get IE to know about these tags you need to add some Javascript to create the elements, which is done by using the following snippet.

<script>
  document.createElement('header');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('footer');
</script>

But this is not a good way of working as you will have to remember to include this at the top of every page of your website and then if you want to add a new HTML5 element you have to go back to every page to add this in.

What you need is a Javascript file to include which will create these elements.

Remy Sharp has created a Javascript file which he hosts at google code that will do this for you.

Copy the following at the top of your pages and it will include this code file on your website if the visitor is using an IE browser lower than version 9.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Rockstar Wordpress Designer

Writen By Paul

Paulund is a website dedicated to writing tutorials and code snippets about Web Development, the main subjects are PHP, Wordpress, jQuery, CSS3 and HTML5.

Website: http://www.paulund.co.uk

Feedback

Anything to add?

  • http://shinytoyrobots.com/ Robin Cannon

    Yeah, the HTML shim code is definitely the best option for this. Makes it quick and easy to implement on any site.

    One additional thing, though; make sure that you use CSS to define the new HTML5 elements as block level, as IE won’t do this automatically. Most reset stylesheets will do this, but it’s something you need to remember if you don’t use one of those.

    • http://www.paulund.co.uk/ Paul

      Yea that’s right most of the new CSS reset scripts will already do this for you. The one I like to use is the HTML5 boilerplate CSS and it seems to do the trick.

  • http://www.logoguru.co.uk/ Logo Design

    This is Good to see the post here, thanks for the tuts, this Coding will be useful to me as a web design learner.

  • http://www.paulund.co.uk/ Paul

    Well that’s an interesting question.

    Personal I don’t think that we still need to support IE6. Microsoft has dropped support for IE6 so I don’t see why we should have to.

    But some big companies still do use IE6 and would still at least want the website to be usable in IE6.

  • http://twitter.com/shashank_1990 Shashank Chinchli

    Hey thanks a lot for the same ! It wasnt working on my browser and I had to struggle a lot for the same.
    This post was of gr8 help.