3.2 — The Document Outline in Reality

The Rise and Fall of the HTML5 Outline Algorithm

The original HTML5 specification included an automatic outline algorithm. The idea was elegant: you could wrap content in <section>, <article>, <nav>, or <aside>, and the browser would calculate the heading level based on nesting depth. An <h1> inside three nested sections would be treated as an <h3> in the document outline. This was meant to make truly reusable, modular components possible.

It never happened. No major browser ever shipped a full implementation, and screen reader vendors flatly rejected it. The algorithm introduced massive performance overhead because the outline had to be recalculated on every DOM change. It would also have broken millions of legacy sites that misused sectioning elements without proper headings. As a result, the outline algorithm was removed from the HTML Living Standard entirely.

How the Implicit Outline Works

Because the algorithm doesn’t exist, browsers and assistive technologies construct an implicit outline by simply reading your heading tags in sequence. If you write:

…the outline is:

Even if you wrap those headings in dozens of <section> or <article> tags, the outline remains the same. Sectioning containers do not alter the numeric hierarchy.

Two Iron Rules for a Valid Outline

1. Exactly One <h1> Per Page

A standard‑compliant document must have a single <h1> – the primary title of the entire page. Multiple <h1> elements fragment the outline and confuse screen reader navigation.

2. Never Skip a Heading Level

Headings must descend in strict numerical order: <h1> → <h2> → <h3> → … and never jump from <h2> directly to <h4>. Skipping a level creates an "un‑named node" gap in the outline tree. If you need a smaller font, handle it with CSS – never change the heading number.

A Complete, Compliant Outline – Live Example

Below is a page fragment following the rules exactly. The source code is on the left; the resulting heading hierarchy is visualised on the right.

<h1>Main System Dashboard</h1>

<section id="hardware-metrics">
  <h2>1.0 Hardware Telemetry</h2>
  <p>Narrative text…</p>

  <article>
    <h3>1.1 Central Processing Unit</h3>
    <p>CPU data…</p>
  </article>

  <article>
    <h3>1.2 Core Memory Arrays</h3>
    <p>Memory logs…</p>
  </article>
</section>

Notice that even though we used <section> and <article>, the outline is controlled entirely by <h1>, <h2>, and <h3>. This is the only outline that matters.