Module 8: Accessibility · Lesson 2 of 7
HTML Heading Order: How to Use h1 to h6 Correctly
All lessons in Module 8
Goal: Build a heading outline with no skipped levels, picking each level for what it means.
Learn
Headings are the page's table of contents. Many screen reader users jump from heading to heading to find what they want, and they hear each level as they go: "heading level 2, Choosing Shoes".
Three rules, in line with the HTML standard's section on heading elements (opens in a new tab), keep that table of contents honest:
- Use one
<h1>for the page's main topic. - Go down one level at a time. After an
<h2>, a subsection is an<h3>; an<h5>would skip two. Going back up (h3 to h2) is fine. - Choose the level by meaning. If a heading looks too big, fix its size with CSS later. A bold paragraph won't do as a heading either, because nobody can jump to it.
The Outline tab next to the preview draws your headings as a tree. Check it after every change.
The short version
- Headings make the page's outline: one
<h1>, then<h2>sections, then<h3>subsections. - Step down one level at a time. Jumping back up to any higher level is fine.
- Pick the level for its meaning and set the size with CSS.
- Make headings only of real section titles, each one describing the content below it.
Example
<h1>Trail Running Guide</h1>
<h2>Choosing Shoes</h2>
<h3>Grip</h3>
<h3>Fit</h3>
<h2>Your First Run</h2>Your task
Whoever wrote this guide picked headings by their size, and the outline shows it. Open the Outline tab, then fix the page so the tree looks like this:
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<h1>Trail Running Guide</h1>
<h1>Choosing Shoes</h1>
<h1>Your First Run</h1>Right
<h1>Trail Running Guide</h1>
<h2>Choosing Shoes</h2>
<h2>Your First Run</h2>With every heading an h1, the outline goes flat and nothing tells the page topic apart from its sections.
Wrong
<h2>Spring Trail Tips</h2>
<h4>Posted on 3 May 2026</h4>
<p>The trails are muddy this month.</p>Right
<h2>Spring Trail Tips</h2>
<p>Posted on 3 May 2026</p>
<p>The trails are muddy this month.</p>A date is no section title, and an h4 picked for its small size adds a false entry to the outline.
Go deeper
Few navigation tools on the web get more use than headings. In WebAIM's long-running screen reader surveys, moving by headings comes out, year after year, as the most common way to find information on a long page. Screen readers can also list every heading at once, like a clickable table of contents. So each heading should make sense on its own. Grip under Choosing Shoes works. A heading that only says More doesn't.
WCAG 2.2 covers this twice. Headings have to reflect the real structure (1.3.1, Info and Relationships), and they have to describe their topic (2.4.6, Headings and Labels (opens in a new tab)).
Headings inside an <aside> or <footer> belong to the same outline. A sidebar box titled Opening Hours is usually an <h2>, since it is a top-level part of the page. The lesson on articles, sections and asides shows how these regions fit together.
Try writing the headings first, before any paragraphs. If that list alone reads like a sensible table of contents, the page structure holds up.
Frequently asked questions
Can you have more than one h1 on a page?
You can, and it is valid HTML. Still, one <h1> per page is the plainest and most widely recommended approach. The old idea that an <h1> inside a <section> counts as a lower level was never supported by browsers or screen readers, and the HTML standard has dropped it. Screen readers announce every <h1> as level 1, so several of them blur the page's main topic. All six levels are covered in the lesson on HTML headings.
Is it bad to skip heading levels in HTML?
For accessibility, yes. A validator won't complain, because skipping levels is valid HTML. But a screen reader user who hears "heading level 2" and then "heading level 5" will wonder whether levels 3 and 4 slipped past. Stepping down one level at a time keeps the structure predictable. Going back up, say from <h4> to <h2>, is perfectly fine.
Do HTML headings matter for SEO?
Yes, as structure. Search engines read headings to work out what a page and each of its parts are about, and good headings help them pick the right passage for a search. Google has said heading order itself carries no penalty. Its SEO Starter Guide (opens in a new tab) asks for well-organized content, nothing more. So skip the folklore and write honest, descriptive headings in a logical order. People and search engines both read them the same way.
