Using HTML5 Shiv to Enable HTML 5 in Old Versions of Internet Explorer

Using JavaScript to Help Older Versions of IE Support HTML 5 Tags

Businessman using desktop PC at desk in office
Maskot/Maskot/Getty Images

HTML is not the "new kid in the block" anymore. Many web designers and developers have been using this latest iteration of HTML for many years. Still, there are some web professionals who have stayed away from HTML5, often because they had to support legacy versions of Internet Explorer and they were concerned that any HTML5 pages they created would not be supported in those older browsers. Thankfully, there is a script that you can use to bring HTML support to older versions of IE (this would be versions lower than IE9), allowing you to build webpages more inline with today technologies and use some of the new tags in HTML 5.

Introducing the HTML Shiv

Jonathan Neal created a simple script that tells Internet Explorer 8 and below (and Firefox 2 for that matter) to treat HTML 5 tags as real tags. This allows you to style them like you would any other HTML element and use them in your documents.

How to Use the HTML Shiv

To use this script, simply add the following three lines to your HTML5 document in the <head> above your style sheet.

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->

Note that this is a newer location for this HTML Shiv script. Previously, this code was hosted at Google, and many sites still link to that file erroneously, unaware that there is no longer even a file there to be downloaded. This is because, in many cases, the use of the HTML5 Shiv is no longer necessary. More on that shortly...

Back to this code for a moment, you can see that this uses an IE conditional comment to target versions of IE below 9 (that is what "lt IE 9 means").

Those browsers would download this script and the HTML5 elements would be understood by those browsers, even though they were created logo before HTML5 existed.

Alternatively, if you don’t want to point to this script at an offsite location, you can download the script file (right click the link and select "Save Link As" from the menu) and upload it to your server alongside the rest of your site's resources (images, fonts, etc.).

The downside to doing it this way is that you will not be able to take advantage of any changes to are made to this script over time.

Once you’ve added those lines of code to your page, you can style the HTML 5 tags like you would for any other modern, HTML5 compliant browsers.

Do You Still Need the HTML5 Shiv?

This is a worthwhile question to ask. When HTML5 was first released, the browser landscape was very different than it is todat. Support for IE8 and below was still an important thing for many sites, but with the "end of life" announcement that Microsoft made in April 2016 for all versions of IE below 11, many people have now upgraded their browsers and these antiqued versions may no longer be a concern for you. Review your website's analytics to see exactly what browsers people are using to visit a site. If no one, or very few people, are using IE8 and below, then you can rest assured that you can use HTML5 elements with no problems and no need to support legacy browsers.

In some cases, however, legacy IE browsers will be a concern. This often happens at organizations that use a specific piece of software that was developed long ago and which only works on an old version of IE.

In these instances, that company's IT department may enforce usage of these old browsers, which means your work for that company must also support outdated IE instances. This is when you would want to turn to the HTML5 shiv so that you can use current web design methods and elements, but still get the full browser support that you need.

Edited by Jeremy Girard