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. Thank you for your help!
    I fear the problem comes from my computer…

  2. I have tried on another computer, and yes, the problem comes from my IE8 version… :-(

  3. I have re-installed IE8, it works fine now!

  4. [...] happening in this space at the moment. And better browser support combined with all the new ways of fixing support for older browsers (or for providing a graceful degradation of features) that are sprouting up all the time, there are [...]

  5. I’m having an issue where HTML inserted into the page with ajax doesn’t get styled in IE (8). I’ve got a comment form that adds your comment to the bottom of the list when you submit it. The newly inserted comment appears without any of the styles applied. If I look at the source in the built in developer tools, I can see that the newly inserted HTML is not structured as a tree – it sees the opening and closing tags for each HTML 5 element as a separate tag. Is there something extra needed to get it to recognize HTML inserted like that? Maybe some way to call the script again?

  6. Just wondered, why is the HTML 5 enabling script called a shiv ?

  7. Hey, It’s a great post.

    However, I still wondering: Would you use HTML 5 to develop your next website? or would you make use of HTML 4.1?

    It’s looks like CSS2 and CSS3. Is it?

    I mean, I would not use CSS3 to development my next site be cause it has not support in a huge range of browsers.

    Thanks.

  8. [...] Then later, let’s share the results and see what kind of sites actually have visitors with JavaScript disabled. That kind of information makes me more comfortable with things like the HTML5 shiv. [...]

  9. More buggy behavior:
    When you don’t use the optional html,head and body elements, the first element has to be a none-html5-one. Otherwise IE puts all the not-recognized elements in the head.

  10. If you will not FORGET about IE, then you will ALWAYS have problems with your pages, even if “standards” will rise to the Z-HTML-nitro 7 Turbo Cosmos Edition. Problem is with Microsoft Corporation applications: they are hard to use, to understand and to buy (and to have), just like fans of PC and windoz are hard to love.

  11. The ‘eventsource’ element has been removed from the specification, so it is no longer needed in html5shiv.

  12. Very good!! Nice! Thanks. xD

  13. The latter has changed: “eventsource” has move to it’s own spec now: http://dev.w3.org/html5/eventsource/

    br–mabra

  14. Does this mean that I can start using HTML5 in all of my future web design projects? Or will there still be some issues with people being able to see the website correctly if they have older browser versions? Thanks for your help.

  15. I would recommend changing the conditional comment condition to [if IE<9]

  16. A few people over at doctype.com discovered an important caveat:

    Since JavaScript is required to make IE understand and style new elements, and since JS is not executed when printing a document, IE will not apply styles from a print stylesheet to HTML5 elements!

  17. ^^ need an answer for the same question. Anyone?


  18. /*@cc_on
    (function(a){while("undefined" !== document.createElement(a.shift()).tagName );})
    ("abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(","))
    @*/

  19. [...] right in IE, but, well, I don’t actually care all that much, to be honest. (I’m using Remy’s HTML5 shim, [...]

  20. Well, if the problem with printing in IE6 persists then I am not going to use HTML5.

  21. Why have string if you actually want an array? Some kind of optimisation? Anyway here’s my take on the script for readability. JSLint says the for loop should have a condition – presumably we should check for existence of the tags first but it is probably sufficient to handle this in the conditional use of the script in the first place.

    function add_elements()
        // Add HTML 5 specific elements for Internet Explorer
        {
        if(!/*@cc_on!@*/0)
           {return;
            }
        var elements = ["abbr", "article", "aside", "audio", "canvas", "datalist",
                 "details", "figure", "figcaption", "footer", "header", "hgroup",
                 "mark" ,"menu", "meter", "nav", "output", "progress", "section",
                 "summary", "time", "video"];
    
        for (i in elements)
            {
            document.createElement(elements[i]);
            }
        }
    add_elements();
    
  22. I seem to be missing the summary tag there. Its the first element of a detail block.

  23. Hi :)

    Just to say that there are some markups which are not in the html5shiv script : address, datalist, keygen, ruby, rp, rt and source. What about them ?

  24. @pyrsmk – ruby related elements are already in IE, as is address. datalist, keygen and source are elements that you wouldn’t style, i.e. invisibles, like the meta tag.

  25. Hu, ok, I didn’t know that, thanks a lot :)

  26. [...] can use Remy Sharp’s HTML5 shiv. It’s a nice little piece of Javascript, which essentially does exactly what we [...]

  27. To the best of my knowledge you’ll need the following 24 elements:
    ‘abbr article aside audio canvas command datalist details figcaption figure footer header hgroup keygen mark meter nav output progress section source summary time video’

    (as of Wednesday, March 24, 2010)

  28. Thanks Remy. I’ve been using this for a while. However, I thought it might be worth mentioning here that if you use Modernizr, this is now built into the library.
    http://www.modernizr.com/docs/#html5inie

  29. That’s great piece of script, and we developers are having hard time to deal with the bad product of Microsoft ourselves.

  30. May or may not be a dumb question, but more likely than not it is…

    What about older versions of Firefox, like 2, 3, or Opera 9, etc… what are they going to do with a tag?

    Definitely a dumb question, I’m assuming that those browsers naturally just let you style whatever made up elements you want.

  31. Thanks for an excellent script. I’ve tried it with Mads Kjaer’s HTML5/CSS3 example from here
    http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

    A couple of items of feedback:
    1) Is CSS3 “z-index” usable? It seems to be ignored.
    2) CSS3 “section” works well, is it possible to use “aside”?

    Thanks!

  32. [if IE lt 9] ?

    Well I suppose we should wait on that until IE9 final is out. But at some point…

  33. Thanks for this handy script. I should now make my hands dirty with HTML5 and IE

  34. You seem to have a duplicate project under a similar name ?
    Whats the difference between html5shim and html5shiv ?

  35. Mauricio Vargas June 28th, 2010 at 12:59 am

    I’ve tested the HTML5 in IE9 (preview till now) and it worked sooo great, that will be such a relief to us, developers, if IE9 comes out and Microsoft make an effort to “lt IE9″ users change and update, maybe providing some example pages and some free stuff…

  36. Wow, I am currently in the process of compleatly recoding my site in HTML5 and this is going to save my skin a few times I beleive. I am aiming for an almost no image site so it is pure un-adulterated HTML5. Bless its little markup.

  37. If I understand the purpose of this code correctly, it shouldn’t be needed with IE9. IE9 supports the concept of generic elements, which are elements that IE that doesn’t recognise but renders (and applies CSS too) anyway.

    If it does anymore than John Resig describes in the attached post, it may still be necessary for IE9 and above.

    This is an excellent script that has allowed me to start writing semantic mark-up, very grateful.

    Rich

  38. I was wondering if the code is already designed to ignore/’be ignored by’ IE9? If not how would I set it up so that IE9 and above ignores it?

  39. Brandon, you can use a “lt” in the conditional. Instead of

    <!--[if IE]>
        ...
    <[endif]-->
    

    you could do

    <!--[if lt IE9]>
        ...
    <[endif]-->
    

    or even

    <!--[if lte IE8]>
        ...
    <[endif]-->
    
  40. Remy,
    I’ve just started to read your book (my first HTML5 tutorial) and it’s just wonderful. I enjoy its concise but very live language a lot. Don’t you have a dedicated web site for comments, updates, and errata?

    On a page 11 Bruce said, “The way to cajole IE into applying CSS to HTML5 is to use JavaScript. Why? This is an inscrutable secret, and if we told you we’d have to kill you. (Actually, we don’t know.)”

    I think I have some clue – why.
    Two years ago I found an article in a famous among .NET developers blog by Rick Strahl http://goo.gl/a4Cy about a very unfortunate Internet Explorer feature: it automatically creates matching global JavaScript objects for all DOM elements on the page based on their id. This clatters global space and often leads to clashes with user-defined JavaScript objects, which often leads to “Object doesn’t support this property or method” errors being displayed.

    I bet these things are related: for IE to operate normally it needs all the DOM elements on the page to be in a global namespace. Your JavaScript snippet does just that – puts HTML5 ‘header’, ‘nav’, etc. elements into a global namespace!

    I blogged http://goo.gl/ducY about this and another IE issue and tried desperately to notify IE staff… well, they don’t like to be notified at all, they don’t like bug reports.

  41. If an earlier post appears, disregard. I had to add < and > to get crtain words between these to show.

    Although your script supports much more of html5 on IE 7 and 8, it does not seem to support <video> and <audio> on these. I am now using IE9 beta, which supports <video> and <audio> in a fashion and does not require your script, at least for what I have done. The saving grace for media is that html5 will support usual valid media code, and if you use that you do not have to worry about <video> and <audio> support. If you insist on using <video> for example, you can include code within it that with your script will display the video on IE6 and IE7 as well as K-meleon which supports very little htm5. Alas, different browsers are using different house video file types, so you have to have the video in ogg, mov, and an AVC mp4 codec H264 format just to support most browsers that can handle <video> . Then you have to add another conventional video path for perhaps flv/swf for those browsers that will not support <video>. Thus you have to have the same video in 4 formats. And IE 7 and 8 browsers are likely to be around quite a while. You can update to IE9 only if you have a Windows Vista or 7 OS leaving XP owners out of luck. Of course Microsoft has a solution for this problem – just install Windows 7 so you can update to IE9. The top Windows 7 costs over US$300, and other versions cost less, but are not cheap. Many are satisfied with their XP OS. I doubt if many will update to Windows 7 just so they can install IE9 to get better html5 support. See one of my pages at:
    http://www.cwdjr.net/html5/layoutDemoWithIEfix4.html .

    There also are a few html5 bugs in various browsers. Chrome displays a big black box to the left of the video which is avoided by making the background-color of the video division black. Both the AVC and .mov videos become distorted if you use width and height for them that is not the same. Thus you have to use a square that is large enough to support the video frame, and thus have bars to the sides or at the top and bottom of the video. If I write many html5 video pages, I think I only will use conventional media code in them and not <video> for now. Who needs a format war that even now requires 3 formats of the same video, even if you do not include support for browsers that do not support <video> .

  42. @cwdjr – I think you’ve missed the point of the script. The HTML5 enabling script, only enables you to *style* those element. Nothing more – hence why of course the script doesn’t make the audio and video elements work.

  43. Remy Sharp wrote:
    “I think you’ve missed the point of the script. The HTML5 enabling script, only enables you to *style* those element. Nothing more – hence why of course the script doesn’t make the audio and video elements work.”

    I uncompressed the script so that it is easy to read, and indeed there is nothing about making audio and video elements in it work. There once was a browser called Bowser used on the original WebTV set top box that could only understand script if was completely compressed to have no spaces. Many developers likely cursed Bowser (named for a pet rabbit of one of the developers of WebTV) when they got complaints that the script on their page was not working on WebTV.

    Do you see any way, script or otherwise, to force IE 7 and 8 to accept the video and audio elements of html5?

    Also, do you see any way to change your script to a php server side include. In a few cases, only a script will do. However I have been able to purge most of my pages of script and replace it with server side php includes. A few people turn script off, but not many anymore compared with the past.

    On several of my media pages, I offer a selection in several formats. You can handle this with javascript, but you get a huge download of code. The viewer of the page clicks one of several buttons to select the format and/or file type of media that is desired to be seen/heard. This choice is sent back to the server which then writes a page for the one specific selection and downloaded to the browser. The code downloaded then is short and simple.

  44. whats the difference between html5.js and html-els.js? Why use one over the other?

  45. Remy, I noticed a very slight error in the conditional within your code block. It should be:

    
    <--[if lt IE 9]>
    
    

    … with a space between IE and 9. Not having the space caused issues in Internet Explorer 8 (IE 8 Standards Mode) for some reason. Adding the space fixed the issue for me. Who knows, though. IE is so quirky, so what’s new?

  46. @Andy – good catch – cheers.

  47. I like the book Introducing HTML5, it’s helping with a lot of points I wasn’t sure of, and it’s easy to read & understand.
    Well done. Now I can get my hands “dirty” with HTML5 (as much as browser support allows anyway).
    I think Microsoft’s not having IE9 for XP is a cynical move to say the least- “Hey here’s the new browser with HTML5 and CSS3 guys, but guess what? You’ll have to buy Windows Vista/7 to use it.” Rant over.

  48. I got a nice message from Microsoft Connect Team saying that a bug was resolved in IE 9. They said, “This issue was resolved in Internet Explorer 9 Platform Preview Build 3 released on 6/23/2010… The fix prevents the error message. Note, IE still allows the DOM element to exist as a global javascript object.”

    Well, I’m not sure that keeping DOM elements in global JavaScript namespace is a good idea (other browsers don’t do it), but at least they found a workaround. It’s interesting to see how correctly it now supports HTML 5.

  49. Hi, one should use the trunk script I think. But besides *printing* and saving a http-request and denying IE9, this would do it as well?

    
    (function(){if(!/*@cc_on@if(@_jscript_version<9)!@*/0)return;var e="abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
    
  50. Is there a script that will translate webkit for firefox to read/render?