Building useful websites

H1, H2 or H3? Build and check a useful page outline

Start with the questions a reader needs answered. Then give those sections real heading levels and check the published page, not just the editor.

By Coru · Published 2026-10-21 · Updated 2026-10-21

1. Choose levels by the job each section does

For a straightforward article or service page, use one H1 for its main subject, H2 for its main sections, and H3 for a section within an H2. Choose appearance separately with styles. A bold paragraph does not become a heading just because it looks prominent. MDN explains the heading elements; W3C WAI explains the hierarchy.

For example, imagine a fictional repair café publishing visitor instructions. Its reader needs to decide whether to attend, what to pack and how to arrange a visit. Draft those answers before adjusting their font sizes. The example below is an editorial exercise, not information about a real service.

2. Replace a vague outline with reader questions

Before: H1 “Welcome”; H3 “Information”; H2 “More information”; H4 “Contact”. These labels leave the reader guessing where the accepted-item list or booking instructions belong. Renumbering alone would leave the labels vague.

After: use the following outline in reading order. The H3 sections belong to “What can I bring?”; “Arrange a visit” is a new main section, so it returns to H2.

H1 — Visit the repair café
H2 — What can I bring?
H3 — Small electrical items
H3 — Clothes and fabric
H2 — Arrange a visit
H2 — What to pack
H2 — If we cannot repair the item

3. Check two easy-to-miss cases

A new subsection under H2 normally starts at H3, rather than jumping straight to H4. Returning from H3 to H2 closes the subsection and starts another main section; it is not a missing-level error. W3C WAI describes this distinction.

In this example, “Clothes and fabric” belongs beside “Small electrical items”, so both are H3. If “Book a place” sits inside “Arrange a visit”, it becomes H3 there. If the site uses it as the text of a booking button, it is a control label, not automatically another heading.

4. A browser check: identical appearance, different meaning

Coru tested a small original HTML fixture on 21 October 2026 in Chrome 155.0.8059.12. It contained a paragraph and an H2, both reading “What to bring”, with the same 24-pixel bold font, line height and margins. The browser accessibility tree exposed only the H2 sample as a heading, at level 2.

To reproduce the check on your own page, right-click a section title and choose Inspect. Look at the selected element in Elements: is it an h2 or h3, or a styled paragraph? In the Accessibility pane, inspect its computed role and level. The precise panel location can vary by browser version.

This was a browser semantics check, not a test with screen-reader users. It demonstrates why a screenshot alone cannot establish that a section title is marked up as a heading. It does not establish the accessibility of the whole page.

5. Check the published result with this card

In a visual editor, use its heading or paragraph-style control, then inspect the resulting page. If a theme adds the H1 automatically, start the article’s main sections at H2. Check the rendered result rather than assuming the editor’s toolbar matches it.

Page URL and main reader task: ___.
Main title: ___. Does the template already supply the H1 before the article body?
Section labels, in order: ___. Can I locate accepted items, booking and packing from the example outline alone?
For each subsection: parent section ___; chosen heading level ___.
Inspect one suspicious bold line: actual element ___; computed role ___; level ___.
After saving and reloading the public page: title present ___; section order correct ___; no duplicated title ___; readable on a narrow screen ___.

When the outline is ready

Keep the outline when the labels identify the answers, subsections sit under the right parent, and the inspected markup reflects that structure. A very short page may need no subsections. Avoid inventing empty sections just to use every heading level.

If a result surprises you, send the heading text, expected level and observed element through the feedback form. Please omit private URLs and account details. Actual questions will help us decide which example to add next.