DOM oddities
July-October 2014
This article will cover a few oddities I found by writing bizarre HTML and inspecting the DOM. I'll update it when I find new things:
Head
The HEAD element is hidden by default on all Web pages.
It can contain elements such as META, TITLE, LINK, STYLE, SCRIPT and BASE.
But what happens when you force them to be visible, and editable? Here's the answer: Show !
As you can see, all those elements can behave like regular DIVs. Even the META, LINK and BASE can become containers, even if they are generally used as self-contained elements (without children nor closing tag). Some browsers even allow to edit the TITLE block and update the browser's titlebar accordingly. Also, the LINK element is shown as an Anchor even though it's not really clickable.
Paragraphs
• A paragraph can't contain another paragraph. If you try to do something like <p><p></p></p>, not two but three neighbours <P>s are added in the DOM: the outer one, the inner one, and an empty one caused by the final </p>. Anyway, they won't be nested:
Same thing if you change their display to "inline", they can't be nested at all:
... Unless you write the inner paragraph with JS:
Anchors
Anchors (<A>) behave like paragraphs in the sense that they can't be nested:
But something strange happens when you try to nest an anchor in a paragraph in an anchor:
That's right, a third empty A is added into the DOM! Go figure...
HTML, HEAD and BODY
The HTML, HEAD and BODY tags are optional in the HTML source, but are automatically added in the DOM by the browsers. Did you know they can be removed too?
There's another thing that browsers do automatically: they place some HTML tags in the HEAD and other tags in the BODY, as long as they are in the right order:
But if your HTML source contains HEAD-related elements after BODY-related elements, they'll be in the body (but they'll stay hidden, of course):
To be continued...?