The WHATWG Blog

Please leave your sense of logic at the door, thanks!

Supporting New Elements in IE

by Lachlan Hunt in Browsers, DOM, Elements, Events, Syntax

Internet Explorer poses a small challenge when it comes to making use of the new elements introduced in HTML5. Among others, these include elements like section, article, header and footer. The problem is that due to the way parsing works in IE, these elements are not recognised properly and result in an anomalous DOM representation.

To illustrate, consider this simple document fragment:

<body>
  <section>
    <p>This is an example</p>
  </section>
</body>

Strangely, IE 6, 7 and 8 all fail to parse the section element properly and the resulting DOM looks like this.

Notice how IE actually creates 2 empty elements. One named SECTION and the other named /SECTION. Yes, it really is parsing the end tag as a start tag for an unknown empty element.

There is a handy workaround available to address this problem, which was first revealed in a comment by Sjoerd Visscher. The basic concept is that by using document.createElement(tagName) to create each of the unknown elements, the parser in IE then recognises those elements and parses them in a more reasonable and useful way. e.g. By using the following script:

document.createElement("section");

The resulting DOM for the fragment given above looks like this:

This same technique works for all unknown elements in IE 6, 7 and 8. Note that there is a known bug that prevented this from working in IE 8 beta 2, but this has since been resolved in the latest non-public technical preview.

For convenience, Remy Sharp has written and published a simple script that provides this enhancement for all new elements in the current draft of HTML5, which you can download and use.

This script is not needed for other browsers. Opera 9, Firefox 3 and Safari 3 all parse unknown elements in a more reasonable way by default. Note, however, that Firefox 2 does suffer from some related problems, for which there is unfortunately no known solution; but it is hoped that given the faster upgrade cycle for users of Firefox, relatively speaking compared with IE, Firefox 2 won't pose too much of a problem in the future.

↔

25 Responses to “Supporting New Elements in IE”

  1. Good to hear that they fixed it in the latest IE8 preview, didn’t know that.

    Who knows, the final version might really surprise us and support unknown elements properly without the script. Thus allowing the use of these elements without the JS hack before, say, 2017.

  3. Do those elements then work with stylesheets, etc? Like, if I have a “section” selector in my stylesheet, IE applies that to the element?

  10. […] richtig zu erkennen und ins DOM zu rendern. Der Trick ist altbekannt, wird aber auch nochmal im WhatWG-Blog ausführlich beschrieben. Um den <section> im IE bekannt zu machen, reicht folgende Zeile Javascript: […]

  11. Actually, I believe that IE won’t correctly style elements even with this, and also nested content can get strange. However, you can use a Microsoft Behavior/HTC to have the tag be a true first class citizen of the DOM, CSS styleable, etc. It’s on my plate to write a blog post documenting how to do this.

  13. […] these elements, Internet Explorer (through IE8) and Firefox (2 and lower). Thus, I am using the document.createElement JavaScript hack for IE. Reliance on JavaScript for styling is reason #1 not to try this at […]

  16. Many thanks for this, have spent a couple of hours banging my head on the keyboard.

    Cheers
    Stedders

  19. WHATwg promotes the DOM = you may drop actually inserting the tags for the body element, as the user agents inserts the body element anyhow.

    However, for new elements in Internet Explorer, if the document fails to have the body start tag and if the new element also has been “created” via document.createElement("newElementName");, then, in the DOM, the new element will actually (at least if it is supposed to be [one of] the first element[s] inside the body) be placed inside the head element.

    I created a demonstration in Live DOM viewer

    (Tested in IE 6, IE7 and IE8.)

    It has no effect if you properly use the head element tags – you have to insert the body start tag in order to be safe.

  20. Leif, yep, but this is not unique to the new elements in IE. Try this, for instance,

    <!doctype html>
    <title>test</title>
    <div><form>test</form></div>

    Believe it or not, but IE will actually put the form as child of head, body as child of form, and div as child of body. The body is also sibling of head.

    So, including the <body> tag is good advice if one wants a sane DOM in IE regardless of usage of the new elements.

  22. […] Si vous créez le nouvel élément et n’utilisez pas une balise <body> tag (ce qui est tout à fait valide en HTML 5), IE va insérer les éléments créés dans une balise <head>. Un peu étrange, mais vous pouvez aisément éviter ce problème en utilisant les balises <head> et <body> dans votre code. Leif Halvard explique plus avec quelques démonstrations [en]. […]