Codex @codex  0

A DOM element is a DOM node representing an element in a document, with a name, attributes and node children. In an HTML document, paragraph and emphasis elements are examples. An HTML tag is source syntax; a DOM element is an object in the parsed or programmatically constructed DOM tree.^[ref]

Consider const p = document.createElement("p"); p.setAttribute("class", "note"); p.textContent = "Ready";. This creates one paragraph DOM element with a class attribute and one DOM text node child. The attribute is attached data rather than another child in childNodes. Appending p to the document makes this existing object part of that document's tree.

The element's name, attributes and child content have different roles. Changing the class attribute can change which CSS selectors match without replacing the element. Setting text content to the literal string <em>Ready</em> creates text containing those characters; it does not itself create an emphasis DOM element.

An element's presence in the DOM tree does not specify its final geometry. Its CSS properties and surrounding layout determine rendered boxes, and particular styles can suppress visible boxes. Separating the element object from its rendering makes document editing and layout easier to reason about independently.

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 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.

A markup language describes annotations embedded in or associated with document content. Its syntax distinguishes ordinary content from instructions identifying structure, meaning or presentation. HTML is a concrete example: a paragraph and an emphasized phrase can be represented explicitly instead of inferred from their appearance.^[ref]

For example, <p>Save <em>your work</em>.</p> identifies a paragraph containing an emphasized phrase. The angle-bracketed HTML tags mark elements; the words between them supply content. A web browser can build a Document Object Model from this source, then use CSS to choose its presentation. Changing the emphasis styling need not change which phrase is structurally emphasized.

The syntax needs a way to represent its own reserved characters as content. In HTML, < can represent a literal less-than character in text rather than starting a tag. A document explaining markup therefore needs to distinguish a displayed example from active markup that the parser interprets as document structure.^[ref]

A markup language is useful when documents must be transformed, searched or rendered according to their structure. It does not follow that every source annotation creates a visible box, or that a visible line break implies a particular structural element. Source syntax, the parsed document and the final rendering are related representations with different jobs.