HTML5 enabling script

Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as <article>, is to use the HTML5 shiv, I’ve quickly put together a mini script that enables all the new elements.

Usage & Download

Download html5shiv.js and must be inserted in the head element (this is because IE needs to know about the element before it comes to render them – so it can’t sit in the footer of the page, i.e. below the elements in question).

I’ve updated this post to link to Alexander Farkas’s version of the shiv – it’s the very latest and my simple one line script. The one I originally released was (I thought) beautifully small, but didn’t support print styles nor dynamic injection of HTML5 elements. Good thing there are smarter folk than I!

146 Responses to “HTML5 enabling script”

  1. @Phil D – Firefox and WebKit both render new/unknown element and allow you style them out of the box – hence why you don’t need it.

  2. Thanks for great stuff :)

  3. Great share, HTML5 is a thing that i learn until my head blow up in these weeks. Arrgh it’s really complicated and hard to understand.

  4. Hello Remy, great examples and work you showing the community. I wonder if you could show us an implemented example of chat on the the phonegap project for android that has been inspired on your os phonegap project.

  5. when I try to run the html5.js file it gives me an error message document is undefined..

  6. @Karen
    Be sure to call the html5.js script AFTER you call the initial jquery.js script. :D

  7. I wanted to ask if there’s a pretty printed version if anybody wants to extend this JavaScript file with new functionality (e.g. placeholders)?

    Greetings,
    Chris

  8. I’m already using the ie7-js javascript to get IE to render CSS properly. So my IE HTTP requests look like this:

    <!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    <![endif]-->

    Is it possible for these scripts to conflict with each other?
    Does it matter which order I call the scripts?

    Thanks
    Mike

  9. Also, is it OK to wrap all 3 script calls inside of only 1 set of IE conditional tags. Or should each script call get it’s own set of IE conditional tags?

    Thanks
    Mike

  10. Be sure to call the html5.js script AFTER you call the initial jquery.js script.

  11. I include html5.js and it allows me to use header, nav, and footer (that’s what I’m after). But whatever I do, IE7 and IE8 don’t recognize the css-shorthand “background”, I have to use “background-color”, “background-image”, background-repeat”, and so on.
    Any ideas what causes this strange behaviour? The workaround is obvious, but it still bothers me.
    Christoph

  12. Great script! How about also including a link to an un-minified version of the script for people who want to read the actual code to learn how this script works?

  13. Hi!
    Firstly, congrats for the script!

    Could you add “sidebar” at list of tags created by the script?
    What you think about put the code in github?

    Cheers

  14. @Brad – this is what it boils down to: http://html5shim.googlecode.com/svn/trunk/html5-els.js – which is simply:

    document.createElement('article'); // etc

    @Raul – “sidebar” isn’t an HTML5 element, so I’m afraid not. Also, hosting on git – there’s no point for the repo, because it doesn’t change, and as for pulling it off git, their hosting is quite slow for hotlinking, whereas Google code is quick for hosting static files. Hope that helps.

  15. @Raul – You could use ‘aside’, which is an HTML5 element.

  16. Thanks for this Remy. I got your book for Christmas! How my 1 year old knew that would be a great gift for me I’ll never know. I am going to begin creating my first html5 website today.

  17. Hey remy,

    i’m using your knowhow for logn time know, was hoping know if you know how we can use column-count on IE can’t find anything!

    Thanks,
    Andelhofs

  18. @Ben, @Raul, ‘aside’ is not the same thing as a sidebar. Think of ‘aside’ as like the big bold printed statements in magazine articles. They appear with the related text. ‘section’ would be an appropriate element for a sidebar.

  19. Hi remy, I have a question about the shiv tecnique.

    What does document.createElement(”); do when it is read without a conditional tag by a html5 capable browser like firefox?
    Does it create another instance of the element in the dom causing some bugs or errors?

  20. A thousand thanks mate, that just got me out of a right bind! Great script and very good of you to help us all out.

  21. I’ve recently started learning HTML5 and this will certainly help, thanks for this =)

  22. @Christoph2

    If you’re still struggling with this problem:

    IE7 and IE8 both recognize shorthand syntax. Most likely you have other rules that are overriding the rules you are trying to specify. If you don’t have it already, install Firebug (for Firefox) or (if you’re using IE8) open up the Developer Tools in IE. Look for the CSS tab and look at what styles are being applied to the elements in question. Most likely, there is a rule stacked onto the element that is essentially wiping out the previous rule.

  23. Hot-linking the script (vs. using a relative path) will not cause an extra HTTP request but rather an extra TCP socket connection. http://stackoverflow.com/questions/5158444/performance-absolute-vs-relative-urls

  24. Great script, I’ve recently blogged about how to use this along with innerShiv and jQuery for ajaxing in HTML 5 content. http://tomcoote.co.uk/javascript/ajax-html5-in-ie/

  25. I did use the html5.js in recent projects and it works just fine. Thank you for that one Remy.

    @Mike and @Christoph earlier have asked the 2 questions I also would need an answer for.

    Is it okay to use the following in the header – together?

    meta http-equiv=”X-UA-Compatible” content=”IE7″
    meta http-equiv=”X-UA-Compatible” content=”chrome=1″

    and this:
    https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

    and (like @Mike) I use:
    if lt IE 9
    http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js
    http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js
    http://html5shim.googlecode.com/svn/trunk/html5.js

    plus:
    http://universal-ie6-css.googlecode.com/files/ie6.0.3.css

    Also, just like @Christoph my IE requires all background properties written separately, I can’t use any shorthand for backgrounds. I know, it is no great problem, it’s very annoying though.

    Any ideas?

    Thanks, Ruana

  26. Fantastic resource. Thank you. Any chance of adding some of the new html5 tags that are currently missing in the shiv (enabling script), such as ‘dialog’ for example?

  27. just a comment on the background properties…I find that if the shorthand is not in the correct order, or missing a property, it will fail. If I write out background: #fff url() no-repeat center center; it will work even though I have no image, but if I leave out a property or have them in a different order it will all get ignored.

  28. My problem is when I try to render with ajax a page with html 5. I cant user innerShiv (not recognize JavaScript).

  29. So let me get this straight, will this script enable the Canvas element for IE 7/8 ?? And what about WebGL… I know this isn’t supported in any IE version so I doubt this would make it work. Or does it?

    Looking forward to doing some stuff with HTML 5 now that IE 9 is finally released, this would be GREAT if this allowed users with older IE versions access to the app.

  30. And someone knows a way to hack css3 capability on IE?

  31. @Michael Mackus – nope, you got it wrong. This script does not enable elements like Canvas. It only allows you to style the elements.

  32. I want to jump in and start using this code but I am not sure what’s better this script or Modernizr created by Paul Irish

  33. Modernizr includes this script (which by the way was created by Faruk, Paul joined forces a little after it was released).

  34. Is there a non-minified version of your nice lil’ script somewhere, please?

    I’d love to see a commented source code in your SVN repository, and it would be helpful to follow the changes. A “diff” on a minified code doesn’t help much. ;-)

    Thanks!

  35. [...] Modern Browsers except internet explorer either handle basic HTML5 elements or allows them to be styled with css or treat as div tags and still allows them to be styles with css. But in internet explorer doesn’t recognize basic HTML5 elements even doesn’t treat them like div tags and doesn’t apply styles.  This is the major problem to implement   HTML5 in internet explorer. So we are still using HTML4 only because a substantial percentage of the web audience still uses the internet explorer. I finally find a solution to implement HTML5 in internet explorer. First of all I would like to thank John Resig (Jquery creator) and Remy sharp’s [...]

  36. Thats cool. I just came to know about this from the LESS Framework

  37. Hi Remy,

    Thanks for the shiv, I’m working through your and Bruce’s book to update my site and it’s all very helpful.

    Like a few people here I was a bit confused by how to mark up sidebars and whether to use <aside> or <section>. It seems I’m not alone in this and that the spec has been changed to reflect this (see http://html5doctor.com/aside-revisited/) – so you’re right, we should be using <aside> for sidebars. For the time being I’m using <aside id=”sidebar”> which I know complicates things a bit but it helps me with the transition! One day I’ll let go of the id safety blanket and just use the new elements :)

    Thanks again.

    Rachel.

  38. [...] 2009: Remy Sharp creates the first distributable script for enabling HTML5 element use in [...]

  39. Many thanks for this simple code! Fixed a problem I have been having working with HTML5 and the masses that use IE6, 7, and 8!

  40. Just noticed taobao is using this script (http://a.tbcdn.cn/p/fp/2011a/html5.js) on basically all of their pages.

  41. Hi, I didn’t go through the script code deeply, so i’ll ask you here. By creating a new element in DOM how it handles standard attributes? Are they inherited somehow? The other point is that this script is designed for old versions of IE, but what about other browsers? Are the old versions of other browsers OK with this new elements without any script (just by changing the DOCTYPE)?

  42. Thanks for putting this together, I built a small Drupal 7 module just to add the code: http://drupal.org/project/remysharp_html5shim

  43. This is great, but will it enable one to use placeholders for input elements as well?

  44. When will HTML5 be fully supported by major browsers?…

    Added to Jeremy’s excellent tips, if you want to use HTML5 right away, you should check out Modernizr (http://www.modernizr.com/). It allows for the implementation of HTML5 tags in non-HTML5-ready browsers and detects lots of the functionality for bo…

  45. Just a word of warning… be careful if copy-and-pasting this (or any) minified source. I just spent 10 minutes debugging what turned out to be OSX trying to be helpful.
    It turns out the cause was “[…] function(c){ […]” became “[…] function© { […]“. Oops :o

  46. Thank you for hosting your latest version on Google code project. I just spent much of the morning tracking down a WordPress HTML5 bug that was caused by an older version of your script that is included in the WordPress Toolbox theme.

    Loading the version from here or from Google fixed the problem and I have reported it on the WordPress forums. Hopefully they will change their theme to use the Google hosted version.

    Thanks/peter