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.
BODY
SECTION
P
#text: This is an example
/SECTION
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:
BODY
section
P
#text: This is an example
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.
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.
[...] Wunder dass man sowas nicht stylen kann. Dieses Problem lässt sich aber reparieren! Es ist sogar recht einfach, man muss das neue Element nur mit einer Zeile Javascript beim IE [...]
[...] Supporting new elements in Internet Explorer - Geen verrassing, maar Internet Explorer ondersteunt bijzonder weinig van HTML5, toch blijk je IE wel zover te kunnen krijgen dat je de nieuwe HTML element kunt gebruiken. [...]
[...] 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: [...]
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.
[...] 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 [...]
[...] Pieters first posted on how to support new elements in IE. “However, if the user has scripting disabled, the layout would probably fall apart [...]
[...] Pieters first posted on how to support new elements in IE. “However, if the user has scripting disabled, the layout would probably fall apart [...]
[...] There’s one gotcha about styling HTML 5 pages in IE: it doesn’t work. You can force it to quite easily with a JavaScript hack document.createElement(’element name’). (Lachlan Hunt gets to the bottom of why IE needs this.) [...]
[...] Sharp’s HTML5 enabling script allows web authors to use HTML 5 elements that Internet Explorer doesn’t know about and still have them show up properly in the [...]
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.
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.
January 7th, 2009 at 17:18
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.
January 8th, 2009 at 00:32
Firefox 2 seems to be able to style HTML5 elements just fine when being served XHTML. That’s what we at Shepherd Interactive have done with our own site and client sites like http://rebathoregon.com/ and http://theccaa.net/
January 8th, 2009 at 02:31
Do those elements then work with stylesheets, etc? Like, if I have a “section” selector in my stylesheet, IE applies that to the element?
January 8th, 2009 at 11:33
Ian Bicking, yes, that’s the idea.
January 8th, 2009 at 12:39
[...] can get IE to support new tags as shown in this example by using [...]
January 8th, 2009 at 14:15
[...] can get IE to support new tags as shown in this example by using [...]
January 8th, 2009 at 14:35
[...] Wunder dass man sowas nicht stylen kann. Dieses Problem lässt sich aber reparieren! Es ist sogar recht einfach, man muss das neue Element nur mit einer Zeile Javascript beim IE [...]
January 9th, 2009 at 14:11
[...] Supporting New Elements in IE [...]
January 9th, 2009 at 16:11
Thanks, I didn’t know that IE8 had fixed this issue, but very glad to hear it.
January 12th, 2009 at 04:05
[...] Supporting new elements in Internet Explorer - Geen verrassing, maar Internet Explorer ondersteunt bijzonder weinig van HTML5, toch blijk je IE wel zover te kunnen krijgen dat je de nieuwe HTML element kunt gebruiken. [...]
January 14th, 2009 at 08:53
[...] 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: [...]
January 16th, 2009 at 23:33
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.
January 17th, 2009 at 13:58
[...] The WHATWG Blog Please leave your sense of logic at the door, thanks! « Supporting New Elements in IE [...]
January 19th, 2009 at 03:52
[...] 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 [...]
January 19th, 2009 at 11:32
[...] Pieters first posted on how to support new elements in IE. “However, if the user has scripting disabled, the layout would probably fall apart [...]
January 19th, 2009 at 14:07
[...] Pieters first posted on how to support new elements in IE. “However, if the user has scripting disabled, the layout would probably fall apart [...]
January 30th, 2009 at 03:37
[...] There’s one gotcha about styling HTML 5 pages in IE: it doesn’t work. You can force it to quite easily with a JavaScript hack document.createElement(’element name’). (Lachlan Hunt gets to the bottom of why IE needs this.) [...]
January 30th, 2009 at 14:04
Many thanks for this, have spent a couple of hours banging my head on the keyboard.
Cheers
Stedders
February 10th, 2009 at 23:02
[...] Sharp’s HTML5 enabling script allows web authors to use HTML 5 elements that Internet Explorer doesn’t know about and still have them show up properly in the [...]
March 18th, 2009 at 21:56
[...] have previously talked about how to get Internet Explorer to play ball when using the new HTML5 elements, but today [...]
June 10th, 2009 at 14:04
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
bodystart tag and if the new element also has been “created” viadocument.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 theheadelement.I created a demonstration in Live DOM viewer
(Tested in IE 6, IE7 and IE8.)
It has no effect if you properly use the
headelement tags - you have to insert thebodystart tag in order to be safe.June 12th, 2009 at 10:27
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.
June 26th, 2009 at 10:48
[...] Internet Explorer gilt dies leider wieder nicht. Wie so oft müssen wir hier wieder tief in die Trickkiste [...]