Headings are the table of contents of a web page, whether or not the page shows one. Sighted visitors skim them; people using screen readers can jump from heading to heading to find the part they want. Browsers and other software read the underlying tags to work out how the page is organized. Problems start when a writer or a designer treats headings as a way to make text bigger, so the visual look and the underlying structure drift apart.
Outline on paper first
Before touching the page editor, write the page as an indented list. The top line is the subject of the whole page. Each major question the visitor will bring becomes a second-level line. Anything that belongs to only one of those questions sits underneath it as a third-level line. If you cannot write the outline in a few minutes, the page probably tries to do too much and may be better split in two.
Only after the outline reads sensibly should it become markup. HTML provides six levels, from h1 to h6. MDN’s reference explains that the level expresses rank within the document, with h1 highest, and it advises against skipping levels because that makes the structure harder to follow. Most small business pages need only three levels.
Matching outline to tags
| Outline position | HTML level | Rule of thumb |
|---|---|---|
| Page subject | h1 | One per page; matches what the visitor came for |
| Main sections | h2 | Each describes a distinct question or topic |
| Parts of a section | h3 | Only when a section has genuine subtopics |
| Fine detail | h4 to h6 | Rare on ordinary service pages |
| Menu, footer, sidebar labels | Usually not headings | Use headings only if they label a real section |
Never pick a level for its size
If an h3 looks too small or an h2 too large, the fix belongs in the stylesheet, not in the choice of tag. Ask the developer or the theme settings to adjust appearance. Equally, bold paragraph text that works as a heading to the eye should be a real heading, because assistive tools cannot treat styled text as a landmark. The W3C’s guidance on info and relationships explains the principle: structure that is visible to the eye should also be available in the code.
Write headings that stand alone
A visitor jumping from heading to heading hears or sees only the headings, so each should make sense without the text below it. Compare ‘More information’ with ‘What the first visit involves’. The second tells the reader where they are. Avoid repeating the same heading text on a page, which leaves two items indistinguishable in a list of headings. Keep them short enough to scan, and use the same grammar for sibling headings, such as all questions or all noun phrases.
Hypothetical worked example
Hypothetical example: take an invented home organizing service, Tidy Shelf Co., planning a page about its pantry consultation. The outline reads: Pantry Consultation (page subject); What the visit covers; How to prepare; After the visit, with two subtopics, Written plan and Follow-up call; Questions about scheduling. The first line becomes the h1. The four main lines become h2 headings. The two subtopics become h3 headings beneath After the visit. When the owner reviews the draft page, the theme turns out to use an h4 for a pull-quote because it looks right, and the footer’s contact label is marked as an h2. The owner asks the developer to restyle the quote as ordinary text and change the footer label to a paragraph. The scenario is imaginary; it shows how an outline written first gives the owner something to check the code against.
Audit an existing page in five minutes
- Open the page and list only its headings, using a browser extension, the developer tools, or the outline view in your editor.
- Confirm there is exactly one h1 and that it names the page subject.
- Look for jumps, such as an h2 followed directly by an h4.
- Look for headings that exist only for decoration, and for sections that lack a heading.
- Read the list aloud. Does it describe the page as a person would?
- Note template-generated headings in the header, footer or sidebar, and ask the developer whether each is deliberate.
Where templates interfere
Many content systems insert the page title as the h1 automatically. In that case, writers should begin their own body headings at h2. Page builders sometimes offer a heading widget with a tag option next to a size option; train editors to use the tag option for rank and the style option for appearance. When the theme changes, recheck a sample of pages, because a new template can silently change the default levels.
Record the pattern
Add a short entry to the site’s editing guide: one h1 per page, h2 for sections, h3 only for subtopics, no skipped levels, no tags chosen for size. A paragraph of guidance saves repeated corrections and gives new staff and vendors a standard to follow.
