Heading outline

Learn document heading hierarchy and the outline algorithm.

Heading hierarchy

Headings span six levels from <h1> to <h6>. A page needs a logical heading hierarchy: h1 for the main title, h2 for sections, h3 for subsections. Do not skip levels; for instance going from h2 to h4 is bad.

Screen reader users navigate by headings. Skipping or disordering levels makes the structure unreadable. Do not change a heading level for visual size; use CSS for that.

The document outline algorithm

The heading hierarchy forms the page's document outline. In the past, the first heading inside a <section> would count as an automatic h1; this outline algorithm was never implemented by any browser in practice.

The rule today is: a heading's level is its real h1-h6 value. If you write <h4> inside a <section>, it is announced as h4. So use the levels with intent.

Exercise Build a clean heading hierarchy

Add a <main> inside body. Put an <h1> inside main (non-empty text). Then add two <section> blocks. Each section should have an <h2> (non-empty text). Inside the first section, also add an <h3> after the h2 (non-empty text). Close main.

Show example solution

<body>
  <main>
    <h1>Help Centre</h1>
    <section>
      <h2>Frequently asked questions</h2>
      <h3>Account</h3>
    </section>
    <section>
      <h2>Contact</h2>
    </section>
  </main>
</body>

Test yourself

Which of these is a bad heading hierarchy?
- h1 → h2 → h3
- h1 → h2 → h2
- h1 → h3 → h4
- h1 → h2 → h3 → h4
Show answer

h1 → h3 → h4 — Correct. Going from h1 to h3 skips h2 and confuses screen reader users.

Complete the main heading

<main>
  <____>Member Profile</h1>
  <section>
    <h2>Orders</h2>
  </section>
</main>

Show answer

<main>
  <h1>Member Profile</h1>
  <section>
    <h2>Orders</h2>
  </section>
</main>

Match each level to its role

h1

Main page title
h2

Section title
h3

Subsection title
h6

Deepest sub-heading
How many h1 elements are recommended on a page?
- Three
- One
- Seven if the page is long
- Unlimited, the more the better
Show answer

One — Correct. A single h1 main heading is usually enough on each page.

Next lesson: Summary - Accessible widget

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies