H1, H2 and H3 are HTML headings that express a page’s topic and section hierarchy, helping readers scan the document and understand its sections.
Headings are document structure
H1, H2 and H3 are HTML heading elements that organise visible page content. An H1 normally states the main page topic; H2s divide the major questions; H3s subdivide one H2 when the next level adds meaning. They help a reader scan, navigate with assistive technology and understand the relationship between sections. They are not a quota, a font-size setting or a promise of a ranking result.
A page can have an effective H1 without repeating a target query word-for-word. The stronger test is whether the heading accurately describes the content under it. Google may use visible headings while forming search results, but title links and snippets are generated from multiple page signals. Heading markup cannot compensate for a vague page or misleading section.
Choose a page outline
Draft the content sequence before styling it. For a glossary entry, an H1 supplied by the template can name the term, H2s can cover definition, mechanism, implementation and errors, and H3s can separate details under one mechanism. For a product category, an H1 may name the category while H2s explain selection criteria, variants and delivery information. The correct outline follows the task, not a fixed SEO recipe.
| Heading level | Use when | Do not use it for |
|---|---|---|
| H1 | The page's central subject | A decorative slogan unrelated to the content |
| H2 | A major question or phase of the page | A single sentence that belongs in a paragraph |
| H3 | A true subdivision of an H2 topic | Creating visual indentation without hierarchy |
| Styled text | A label or minor emphasis | Pretending a label is a new document section |
Concrete example: a page about server-side rendering might use H2s for ‘What SSR returns’, ‘When SSR changes the delivery path’, and ‘How to test the response’. Under the testing H2, H3s can distinguish initial HTML, HTTP status and hydration. A separate H3 called ‘SSR’ under an unrelated H2 would be a broken outline.
Check the rendered hierarchy
- Read the page in outline order and state the question each heading introduces.
- Inspect the rendered DOM, not only a CMS editor, for actual h1, h2 and h3 elements.
- Confirm that template navigation, cards and footer labels do not create misleading heading sequences.
- Check accordions and dynamically injected content in the rendered state a crawler and user receive.
- Use a screen-reader heading list or browser accessibility tree to spot skipped or duplicate labels.
The measurable criterion is structural: each heading has a related section, levels do not imply a false parent-child relationship, and the main content remains understandable when read as an outline. A page can be perfectly valid with one H1 and several H2s but no H3s.
Heading mistakes
The common mistake is choosing a heading for visual size, then using the same phrase across every H2 to target a keyword. Another is creating several H1s in separate reusable components without reviewing the assembled page. A content audit should flag headings that are empty, duplicated, disconnected from the next content or used to hide unrelated copy.