# Heading Structure: Build a Clear Page Outline
Source: https://allyway.ai/glossary/heading-structure
Heading structure is the outline a page forms through its h1 to h6 elements. Each heading marks the start of a section, and its level shows where that section sits in the hierarchy.
Heading structure is the outline your page builds with the elements `` to ``. Sighted visitors see big, bold titles and grasp the layout in seconds. [Screen reader](https://allyway.ai/glossary/screen-reader) users get the same overview only if those titles are real headings – then they can list them and jump from section to section with one key.
## What it means
[WCAG 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (Level A, [WCAG 2.2](https://allyway.ai/regulations/wcag-2-2)) requires that structure conveyed through presentation can be programmatically determined. W3C names headings as a typical case: text that looks like a heading because of its larger, bold font must also be marked as one. The sufficient techniques are H42 (using h1–h6) and ARIA12 (`role="heading"` with `aria-level`). Failure F2 describes the opposite: using only text styling to convey structure.
Two related criteria complete the picture: 2.4.6 Headings and Labels (Level AA) asks that headings describe their topic, and 2.4.10 Section Headings (Level AAA) asks that content is organized with headings at all. The advisory technique G141, "Organizing a page using headings", recommends correctly nested levels.
| Level | Typical use |
|---|---|
| h1 | The page's main topic – usually one per page |
| h2 | Main sections ("Pricing", "How it works") |
| h3 | Subsections inside an h2 |
| h4–h6 | Deeper levels, rare on marketing pages |
| Bold paragraph that looks like a heading | Not a heading for assistive technology – can fail 1.3.1 |
> **Tip:** > **Level = position, not size**
> Choose the level by where the section sits in the outline. If the design needs a smaller heading, change the font size in CSS. Picking a level for its look is the main cause of a [skipped heading level](https://allyway.ai/glossary/skipped-heading-level).
Headings work together with [ARIA landmarks](https://allyway.ai/glossary/aria-landmarks): landmarks mark the regions of a page (header, navigation, main), headings structure the content inside them.
## Examples
```html title="Example"
Garden furniture
Lounge sets
Teak
Aluminium
Care and cleaning
Delivery times
Free shipping from €50!
```
**Do:** Do
Start with one h1 that names the page, use h2 for main sections and h3 for their subsections. Write headings that say what follows ("Delivery times to Austria"). Keep the same pattern on every template.
**Don't:** Don't
Fake headings with bold paragraphs, use heading tags just to make text big, wrap logos or entire banners in an h1, or leave sections without any heading so the page reads as one long block.
## How to check your heading structure
## Questions
Q: How many h1 headings should a page have?
A: WCAG sets no number. One h1 that names the page's main topic is the clearest pattern and what most screen reader users expect, so it is the common recommendation.
Q: Is skipping a heading level a WCAG violation?
A: Not on its own. W3C does not list a skipped level as a failure of 1.3.1, but it recommends nested levels because gaps confuse people who navigate by headings. It becomes a real problem when the levels contradict the visual structure.
Q: Do headings matter for SEO?
A: Headings help search engines understand what each section is about, much like they help screen reader users. A clear heading structure serves both, but stuffing headings with keywords helps neither.
Q: How do screen reader users use headings?
A: Many start by listing all headings or by pressing H to jump from one to the next, then read only the section they need. A page without real headings forces them to listen from the top. A [skip link](https://allyway.ai/glossary/skip-link) and landmarks add further shortcuts.