Six kinds of element, and the trees they become

Left: the markup as typed. Right: the nodes the parser built from it.

Void: <br> and <br/>

A void element has no content and no end tag. The slash is allowed and ignored: both breaks become the same element. A stray </br> is even turned into a third one.

Not void: <div/>

On an element that is not void, the slash means nothing. The div stays open, and the paragraph after it ends up inside it.

Raw text: script and style

Everything up to the matching end tag is one text node. The < is not a tag, and &amp; is not decoded.

Escapable raw text: textarea and title

Tags are text here too, but character references are decoded: &amp; becomes &.

The template element

The markup is parsed into elements, but they go into a separate document fragment, template.content. The template itself has no children, nothing renders, and the image is not fetched.

Foreign: SVG and MathML

Inside svg the slash does close an element, so the two shapes are siblings. The parser also restores the case SVG needs: viewbox becomes viewBox.

Normal elements, unknown elements and comments

Normal elements hold text, other elements and comments. An unknown name is kept as an HTMLUnknownElement; a name with a hyphen is a possible custom element, an HTMLElement. Comments are nodes in the tree.

Your own markup