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.