Heading structure on a page is for readers first, always

Aug 29
3 min read

Updated: 4 days ago

Introduction

A page is built in a visual editor. Somebody wants a line to look bigger, so they set it as a heading. Somebody else wants a heading to look smaller, so they set it as body text and make it bold.

The page looks correct and its structure is nonsense. Anybody using a screen reader gets a meaningless outline, search engines get no signal about what the page covers, and the person skimming on a phone cannot find the section they came for. Headings are a structure, and they are being used as a font menu.

1. Heading structure on a page describes the content, not the size

The distinction everything else follows from.

A heading marks the start of a section and says what that section is about. How large it appears is a styling decision that should be made separately, and every platform allows it.

2. Use one main heading per page

The convention worth keeping.

One top-level heading naming what the page is about, then everything else beneath it. Pages with several competing top-level headings usually indicate two pages that were merged and never reconciled.

3. Do not skip levels

Order is what makes it an outline.

Moving from a main heading straight past the next level to a lower one produces a broken hierarchy. It is invisible to sighted readers and confusing to anyone navigating by structure.

4. Write headings that would work as a list

A quick test for the whole page.

Read only your headings, in order. If that sequence tells somebody roughly what the page contains and helps them find a section, the structure is doing its job; if it reads as a series of slogans, it is not.

5. Say something rather than nothing

Generic labels waste the position.

Overview, More information and Details describe no content. Naming the actual subject of the section helps the reader skimming, and it is one of the clearest signals a page gives about what it covers.

6. Include the terms people search naturally

Relevance without stuffing.

If a section answers a question people ask in a particular way, using those words in the heading is both accurate and useful. Repeating one phrase across every heading is neither.

7. Break long sections up

The reader-facing benefit.

Six hundred words without a heading is hard to scan on a phone, and people leave rather than hunt. A heading every few paragraphs makes a long page usable, which matters more than any technical consideration.

8. Keep the styling separate from the level

The fix for the original problem.

If a heading needs to look smaller, change its style rather than demoting its level. Every content system supports this, and it removes the incentive that breaks structure in the first place.

9. Check the outline of your important pages

Verification is quick.

Browser extensions and accessibility tools display a page's heading outline in seconds. Running it across your main service pages usually reveals two or three that are structured incoherently, and the fault is nearly always the same one: a level chosen for how it looked.

Fix the templates rather than individual pages where you can. If the heading levels are wrong in a theme, every page built from it inherits the fault, and correcting one page at a time never gets ahead of new pages being created.

Conclusion

Treat headings as a description of the content rather than as a way of controlling text size.

Use one main heading per page, avoid skipping levels so the outline stays coherent, check that your headings read sensibly as a standalone list, replace generic labels with headings that name the actual subject, include the natural search terms without repeating one phrase throughout, break long sections so the page can be scanned on a phone, adjust styling rather than heading level when something needs to look different, verify the outline on your important pages, and correct the templates rather than page by page.