Supporting New Elements in IE
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.
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/
Do those elements then work with stylesheets, etc? Like, if I have a “section” selector in my stylesheet, IE applies that to the element?
Ian Bicking, yes, that’s the idea.
[…] can get IE to support new tags as shown in this example by using […]
[…] can get IE to support new tags as shown in this example by using […]
[…] 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 IE […]
Thanks, I didn’t know that IE8 had fixed this issue, but very glad to hear it.
[…] 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.
[…] The WHATWG Blog Please leave your sense of logic at the door, thanks! « Supporting New Elements in IE […]
[…] 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 […]
Many thanks for this, have spent a couple of hours banging my head on the keyboard.
Cheers
Stedders
[…] 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 […]
[…] have previously talked about how to get Internet Explorer to play ball when using the new HTML5 elements, but today […]
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” 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 thehead
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 thebody
start tag in order to be safe.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.
[…] Internet Explorer gilt dies leider wieder nicht. Wie so oft müssen wir hier wieder tief in die Trickkiste […]
[…] 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]. […]
[…] styles to the new tags or allow them to be used as part of CSS selectors. Luckily there’s a script-based hack that successfully convinces IE to change its mind, allowing pages using HTML5 semantic tags to work […]
Nice idea, but adding something like that script isn’t really the right way. Perhaps the IE9 will bring something new?!
[…] display elements it doesn’t know about due to the way it parses the DOM (more details here). Thankfully, this is easy enough to workaround BUT it requires the user have Javascript enabled. […]