HTML element

An HTML element is a structural component of an HTML document with a defined name, attributes and semantics. Paragraphs, headings and controls are examples. An HTML tag is source syntax that can identify the start or end of an element; the element itself is the object represented in the parsed Document Object Model.^[ref]

In <p>Hello <em>world</em>.</p>, the paragraph contains an emphasis element as well as text. The word world is inside the emphasis element, while Hello and the final period are other text in the paragraph. These parent-child relationships make the structure useful for navigation, editing and matching CSS selectors.

Not every element is written with an explicit start/end pair. For example, the line-break element br is a void element and has no end tag in HTML syntax. Conversely, two source strings can produce equivalent document structure because parsing accounts for omitted tags and other specified rules. Counting written tags is therefore not a reliable substitute for inspecting elements.^[ref]

An HTML element's semantic role and its display are connected through browser behavior but remain different descriptions. A paragraph can wrap across several visual lines, and a CSS property can change its appearance without replacing the paragraph element. Choosing structural elements for their meaning allows the same content to remain intelligible under different styles.

An HTML void element is an HTML element whose HTML syntax permits no contents and no end tag. Examples include br, img and input. An ordinary element that happens to contain no text does not thereby become void.^[ref]

For example, <p>A<br>B</p> contains a paragraph with text A, a line-break element and text B. The br start tag has no matching </br> end tag. An image's source and alternative text likewise use attributes such as src and alt, rather than child text between an image start/end pair.

The optional slash in <br /> does not create the void behavior; br is void because of its element category. The same slash does not make <div /> into a generally self-closing ordinary HTML element. Reading such source requires the HTML parser's rules.^[ref]

Source conformance and general Document Object Model operations must also be distinguished. A program can construct a node tree that violates an element's HTML content restrictions. Such an object does not make nonconforming source or a void element's hypothetical children a valid way to serialize HTML. The DOM element model and the allowed source syntax answer different questions.

An HTML tag is a piece of source syntax that identifies the start or end of an HTML element. A start tag can contain HTML attributes; an end tag identifies a closing point under the parser's rules. The tag is source notation, while the resulting element is an object in the Document Object Model.^[ref]

For example, <p class="note">Hello</p> contains a paragraph start tag, text content and a paragraph end tag. Parsing it produces one paragraph element, not two elements corresponding to the two tags. Its text is represented separately in a DOM text node.

An HTML void element such as br has no end tag in HTML syntax. Some other elements permit tags to be omitted in specified contexts, so counting start/end pairs is not a complete account of the parsed structure. A trailing slash is also governed by HTML's own rules; it does not generally turn an ordinary HTML element into a self-closing XML-style element.^[ref]

Source context matters. Escaping < as < can make a tag-shaped example become displayed text instead of active markup. Programs explaining or transforming documents therefore need to distinguish the source syntax they are reading from the document structure that a parser constructs from it.