A Long Digression into How Browsers Handle Unknown Elements
Every browser has a master list of HTML elements that it supports. For example, Mozilla Firefoxâs list is stored in nsElementTable.cpp. Elements not in this list are treated as âunknown elements.â There are two fundamental questions regarding unknown elements:
- How should the element be styled?
By default,
<p>
has spacing on the top and bottom,<blockquote>
is indented with a left margin, and<h1>
is displayed in a larger font.- What should the elementâs DOM look like?
Mozillaâs nsElementTable.cpp includes information about what kinds of other elements each element can contain. If you include markup like
<p><p>
, the second paragraph element implicitly closes the first one, so the elements end up as siblings, not parent and child. But if you write<p><span>
, thespan
does not close the paragraph, because Firefox knows that<p>
is a block element that can contain the inline element<span>
. So the<span>
ends up as a child of the<p>
in the DOM.
Different browsers answer these questions in different ways. (Shocking, I know.) Of the major browsers, Microsoft Internet Explorerâs answer to both questions is the most problematic.
The first question should be relatively simple to answer: donât give any special styling to unknown elements. Just let them inherit whatever CSS properties are in effect wherever they appear on the page, and let the page author specify all styling with CSS. Unfortunately, Internet Explorer (prior ...
Get HTML5: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.