Elements, Tags & Nesting

You met tags, elements, and attributes briefly back in What Is HTML?. Now let's build a complete, precise vocabulary — tag vs element vs node — along with the family-tree language (parent, child, sibling) you'll use constantly when discussing structure.

Tag vs element vs node

Term	Definition
Tag	The markup itself, in angle brackets — an opening tag like `<p>` or a closing tag like `</p>`
Element	The complete unit: opening tag + content + closing tag (or a single self-closing tag for void elements)
Node	The DOM's term for any single item in the parsed tree — elements are one kind of node, but text and comments are nodes too

In casual conversation people often say "tag" when they mean "element" — "the paragraph tag" instead of "the paragraph element." It's a minor imprecision that's fine in everyday speech, but worth knowing the distinction for reading specifications and documentation precisely.

Parent, child, and sibling relationships

HTML

<ul>
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<code><ul></code> is the parent of both <code><li></code> elements.
Each <code><li></code> is a child of <code><ul></code>.
The two <code><li></code> elements are siblings of each other — they share the same parent.
<code><ul></code> is also called an ancestor of the text inside each <code><li></code>, and that text is a descendant of <code><ul></code>.

This vocabulary maps directly to CSS

Selectors like ul > li (direct child) or ul li (any descendant) are literally asking "find elements with this parent/child or ancestor/descendant relationship." Learning the family tree terms now pays off the moment you start writing CSS.

Empty elements

Some elements are allowed to have no content at all, even though they're not void elements — for example, an empty <div></div> used as a placeholder a script will fill in later:

HTML

<div id="app"></div>
<script src="/app.js"></script>

This is different from void elements (like <img> or <br>), which structurally cannot have content or a closing tag at all — that distinction gets its own dedicated page later in this series.

A quick preview: block vs inline content models

Not every element can nest inside every other element. HTML elements broadly follow content models that describe what they're allowed to contain:

Category (preview)	Typical examples	Behavior
Block-level	<code><div></code>, <code><p></code>, <code><h1></code>, <code><ul></code>	Starts on a new line, takes up the full available width by default
Inline-level	<code><span></code>, <code><a></code>, <code><strong></code>, <code><em></code>	Flows within a line of text, only as wide as its content

This distinction affects what can validly nest inside what — for instance, a block-level <p> should not contain another block-level element like <div>. The dedicated Block vs Inline page later in this series covers this in full, including how CSS's display property can override these defaults.

Nesting rules from the previous page still apply

Remember: whatever nests inside an element must close before that element closes. Content models add a second layer on top of that — not just "must close in order," but "is even allowed to be there in the first place."

With elements, tags, and nesting vocabulary settled, next we look at the other half of every tag: attributes — the name="value" pairs that configure an element's behavior and meaning.