HTML containment

This page tries to exhaustively combine tags for all pairings of HTML elements to answer the following questions about how HTML browsers parse tag soup:

Which elements can appear directly in the body of an HTML document?

Which elements can nest directly in which other elements?
Which elements can contain text content, comments, entities?
Which elements can be introduced between the body and an element to allow it to nest properly?
Which elements are implied by which tags? (TODO)
Which open tags close which other elements?
Which close tags close which elements?
Which open tags close which elements?

A JSON dump of the results is available at the end once running is done.

A few query parameters affect the behavior of this page:

?rerun — ¡VERY SLOW! Rerun experiments on the browser intead of using the canned results from Chrome.
?rerun&shortlist — Rerun experiments on the browser instead of using the canned results from Chrome, but with a short list of elements instead of the full 128+ HTML elements which speeds debugging.
? — Quick browsing of canned results from Chrome.

Nests in body

Does a tag <X> directly inside <body>…</body> parse to an element named X directly inside the document body?

Containment

For each element, what elements can contain it?

E.g., canAppearIn['x'].indexOf('y') >= 0 when <x><y></y></x> parses to an element x that contains an element y when embedded in an element that can contain <x>.

Can Contain

Can Appear In

Containment stack

Text and comment content

Tests which elements can contain a non-whitespace text node and which can contain comments or other non-text elements as a result of parsing.

textContentModel['x'].text is true when <x>text</x> parses to an X element containing a text node.

textContentModel['x'].comments is true when <x></x> parses to an X element containing a comment node.

textContentModel['x'].xml is true when <x>&;</x> parses to an X element contains text nodes that normalize to &&.

textContentModel['x'].raw is true when <x><br></x> parses to an X element containing a text node.

textContentModel['x'].entities is true when <x>&;</x> parses to an X element containing a text node &.

Tag Closers

Explicit closers

Are there any close tags besides the tag name itself that close the tag?

Open tags close which elements

Which open tags close the element when embedded between it and content it could otherwise contain?

Which C close T in <T><C>X</C></T> leading to X being a sibling of the element T instead of its child as it would be if parsed as <T>X</T>.

Close tags close which elements

Which C close T in <C><T></C>X</T> leading to X being a sibling of the element T instead of its child as it would be if parsed as <T>X</T>.

JSON Dump

working