How Should I Use H1, H2 and H3 Headings on My Website?
Use heading levels to create a clear page outline, separate structure from styling and test whether sections make sense without the surrounding design.
Part of our guide: What Is Website Accessibility?
Headings organise a page into sections. H1, H2 and H3 are structural levels, not a menu of font sizes. Use them to describe the relationship between ideas, then style them to suit the design.
A reader should be able to scan the headings and understand what the page covers. Assistive technology can also use that structure to help people navigate.
Start with an outline in plain text
Write the page’s main subject, then the major questions it answers. Put supporting detail under the relevant question.
For an illustrative office-cleaning page, the outline might be:
- H1: Office cleaning in York.
- H2: What the service includes.
- H3: Shared kitchens and washrooms.
- H3: Workspaces and meeting rooms.
- H2: How a cleaning visit is arranged.
- H2: Request a site visit.
This is a fictional example, not a mandatory template. The hierarchy follows the content rather than the number of keywords you want to repeat.
Separate appearance from meaning
A large introductory sentence is not automatically a heading. A small subsection label may still need to be a real heading even when its visual style is restrained.
W3C’s headings tutorial explains how heading ranks communicate structure and recommends logical nesting. Avoid skipping levels merely to obtain a preferred appearance.
Ask the developer to change the styling if the correct heading level looks wrong. Do not distort the document outline to compensate for a limited editor toolbar.
Give each heading a useful job
“More information” is less helpful than “What happens after you request a quote”. The specific version tells someone whether the next section is relevant.
Headings should describe the content that actually follows. Do not label a sales pitch “Independent comparison” or promise a price table when the section contains no prices.
The service-page writing guide helps identify the practical questions worth making into sections.
Review the page without its visual design
Use the editor’s outline or an appropriate inspection tool to list the headings in order. Can someone understand the structure without colour, cards or column placement?
Watch for headings inserted inside repeated decorative components. A page might contain a clean main article but a confusing sequence of unrelated headings from banners and widgets.
Also check that visually bold section titles are not merely paragraphs. A design can appear organised while the underlying structure remains flat.
Use a compact editorial check
| Question | What to look for |
|---|---|
| Main subject | A clear page-level heading |
| Major sections | Descriptive headings at a consistent level |
| Subsections | Nested under their actual parent topic |
| Repeated labels | Enough context to distinguish their purpose |
| Styling | Achieved without choosing arbitrary heading ranks |
This is a suggested publishing check. It is not a promise that a specific number of headings produces higher rankings.
For search-result wording, the page-title guide covers the separate title element. A page title and visible H1 can be related without being interchangeable fields.
Test after the page is rendered
Preview the actual page, including mobile layout and any reusable content blocks. Check whether headings remain in the intended reading order.
Include screen-reader evaluation when assessing accessibility comprehensively. An outline check is useful evidence, but it does not establish that every interaction or reading sequence works.
The accessibility guide covers the broader checks. Plan headings while writing so readers can follow the article’s structure.
Thinking about your own rebuild?
Tell us about your business, your current website and what you would like to improve. We will help you work out the next step.
