HTML content categories

Published: 30 December 2025 | Author: Russ Weakley

Have you ever heard of elements referred to as ‘block-level’ elements or ‘inline’ elements?

This was an old way of classifying HTML elements. This language was not incorrect. It described CSS display behaviour, not HTML meaning. It led to confusion because display does not mean the same as a content model.

With HTML5 and the ongoing Living Standard, elements are defined in broad semantic groups called content categories.

Content categories group elements by semantics and where they are permitted to appear. They are independent of block and inline display.

For authors, content categories provide a clearer, rules-based mental model than relying only on “block vs inline” when deciding which elements to use and how to nest them.

Some explanations in this article are teaching simplifications. Always refer to the Living Standard for exact definitions and constraints.

These categories are important because they help us understand:

1. The contexts in which each element can be used.
2. What content can be used as children or descendants of each element.

There are ten content categories:

• Metadata
• Flow
• Sectioning
• Heading
• Phrasing
• Embedded
• Interactive
• Palpable content
• Script-supporting content
• Transparent content models

No single category takes priority over another. Categories describe membership, not hierarchy. The element’s content model always defines the actual rules.

Some elements fall into zero categories

Elements may fall into zero, one, or multiple categories. Categories are descriptive, not prescriptive. They do not replace element definitions.

For example, the following elements do not fall in any category:

<html>, <head>, <body>, <li>, <dt>, <dd>, <figcaption>, <source>, <track>, <caption>, <colgroup>, <col>, <tbody>, <thead>, <tfoot>, <tr>, <td>, <th>, <optgroup>, <option>, <legend>, <summary>

These elements still have rules. They are simply not classified by these categories. Their allowed content and context are defined separately in their element definitions.

Some elements fall into multiple categories

Many elements fall in multiple categories. For example, the <a> element falls into five categories:

1. Flow content
2. Phrasing content
3. Interactive content (if there is an href attribute present)
4. Palpable content (if there is at least one node in its contents that is palpable content)
5. Transparent content

Let’s take a quick look at some of these categories.

Flow content

Many elements used in the body of documents and applications are categorised as flow content. This includes most of the familiar structural and textual elements that are not metadata or script-supporting elements.

Flow content describes the structural role of an element in the document. It defines where the element can appear and what it may contain, independent of how browsers choose to render it by default.

<div>  <-- Flow -->
  <div>  <-- Flow -->
    <p></p>  <-- Flow -->
    <span></span>  <-- Phrasing -->
  </div>
</div>

Phrasing content

Any elements that mark up text within paragraphs are categorised as phrasing content.

Phrasing content elements generally may only contain other phrasing content. Flow elements such as <div> are not permitted as children in normal cases.

<span>  <-- Phrasing -->
  <div></div>  <-- Flow -->
</span>

Heading content

Heading content includes elements such as <h1> to <h6>. These elements represent headings for sections of content.

In the Living Standard, heading elements have a content model of phrasing content. This means that only phrasing elements can appear inside a heading. Flow elements such as <div> or <section> are not permitted as children.

<h1>
  <em>Valid phrasing content</em>
</h1>

<h1>
  <span>Also valid phrasing</span>
</h1>

<h1>
  <div>Invalid flow content</div>
</h1>

From an accessibility perspective, heading elements are critical. Screen reader users often navigate by heading level to move quickly through a page. Using real heading elements (rather than just large, bold text) and keeping their structure clean helps assistive technologies present a clear outline of the page.

Interactive content

Any elements that are specifically intended for user interaction are categorised as interactive content.

<a> (if the "href" attribute is present)
<audio> (if the "controls" attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the "usemap" attribute is present)
<input> (if the "type" attribute is not "hidden")
<label>
<select>
<textarea>
<video> (if the "controls" attribute is present)

In practice, interactive content is associated with:

• focusability (keyboard access)
• user input or activation
• expectation of events such as click, tap or key press

Button and link descendants

For the <a> and <button> elements, the content model is phrasing content, with additional restrictions:

• No interactive content descendants.
• No descendant with the tabindex attribute.

Links cannot contain links, buttons or elements with tabindex.

This is both a content model constraint and an activation semantics concern. Nested controls create competing click and focus behaviours.

<a href="#">
  <a href="#">Hello</a>
</a>

<a href="#">
  <button>Hello</button>
</a>

<a href="#">
  <div tabindex="0">Hello</div>
</a>

Similarly, buttons cannot contain links, buttons or elements with tabindex.

<button>
  <a href="#">Hello</a>
</button>

<button>
  <button>Hello</button>
</button>

<button>
  <div tabindex="0">Hello</div>
</button>

These examples would be considered invalid markup and could cause issues for some assistive technologies.

These examples violate the content model and the expected activation behaviour.

Browsers may attempt to repair them, but assistive technologies may receive inconsistent signals.

The shape-shifting <a> element

The <a> element is considered to have a transparent content model. In other words, it is a shape-shifter.

The content model of the <a> element is derived from the content model of its parent element.

In the next example, the <a> element is positioned inside the <article> element, which allows flow content.

Because <article> allows flow content, the transparent <a> inherits that model and may also contain flow content.

<article>
  <a href="#">
    <div>Flow content</div>
  </a>
</article>

In the next example, the <a> element is positioned inside the <span> element, which only allows phrasing content.

The transparent <a> element adopts the phrasing content model here because its parent’s model is phrasing, so only phrasing content is allowed.

<span>
  <a href="#">
    <em>Phrasing content</em>
  </a>
</span>

The <label> element

The <label> element has a content model of phrasing content with further restrictions. It must not wrap interactive elements other than its labelled control. Nested controls can break association, interfere with activation behaviour, and lead to incorrect accessible names.

Summary

Content categories describe patterns. Content models define rules. When in doubt, check the element’s definition in the Living Standard. Categories help you find the right part of the spec, but the content model tells you what is allowed.

Understanding these foundations makes it easier to write valid, semantic and accessible HTML that behaves consistently across browsers and assistive technologies.