Heading structure for accessibility: write the outline first
Headings are a page's table of contents. Screen reader users list them and jump between them, so they need to form a sensible outline: one h1 that names the page, h2 for each main section, h3 for parts of a section, with no levels skipped on the way down. How big a heading looks is a CSS decision and has nothing to do with its level.
Why the outline matters
Sighted readers skim a page by its big bold lines. People using a screen reader do the same thing with a list of headings, which most screen readers can generate on demand, then jump straight to the one they want. MDN's notes on the heading elements describe exactly this use. If the headings are missing, that shortcut disappears and the page has to be read from the top. If they're out of order, the list suggests a structure the page doesn't have.
WCAG covers both sides. Info and Relationships (level A) asks that structure shown visually is also in the markup, which for headings means real h1 to h6 elements rather than bold paragraphs. Headings and Labels (level AA) asks that the headings you do have describe their section.
The rules of a heading hierarchy
- One h1 per page, naming that page. On the home page that's usually the main headline; on an About page it's "About" or something more specific. HTML allows more than one, but a single h1 that matches the page's title is the convention screen reader users expect.
- h2 for each main section. Services, prices, reviews, contact: each one is a branch of the outline.
- Go down one level at a time. An h2 is followed by h3s, not h4s. The W3C's headings tutorial points out the one place a jump is fine: coming back up, so an h4 can be followed by a new h2.
- Keep repeated regions consistent. A sidebar or footer heading should be the same level on every page, whatever the content around it.
- Make headings say something. "Prices from one to four people" helps more than "Overview" when it's read out of context in a list.
Getting h1 h2 h3 order right in practice
Most broken outlines come from choosing a level by its look. A designer wants a small heading over a card, so it becomes an h5; a big quote needs to be loud, so it becomes an h2. The fix is to separate the two jobs: pick the level from the outline, then style it with a class. A card's title can be an h3 set at 18px, and a pull quote can be a blockquote set at 40px without being a heading at all.
| Mistake | What a screen reader user gets | Fix |
|---|---|---|
| Bold paragraphs used as section titles | No headings to jump to | Use h2 or h3 elements |
| The logo marked as the h1 on every page | Every page appears to have the same name | Make the logo a link; give each page its own h1 |
| h2 straight to h4 for a smaller size | A missing level, and a sense something was skipped | Use h3 and style it smaller |
| Eyebrow labels marked as headings | Twice as many headings, half of them one word | Make the label a paragraph, or group it with hgroup |
| Headings inside a carousel or tabs that are hidden | Headings for content they can't reach | Keep hidden panels out of the outline until shown |
Checking the outline
- Turn off the styles. Most browsers can show a page unstyled, or you can remove the stylesheet in developer tools. The headings that remain should read like a contents page.
- List the headings. Accessibility extensions and screen readers can list headings by level. Look for gaps, duplicates and vague labels.
- Read only the headings aloud. If someone could guess what each section contains from its heading alone, the structure works.
- Check every template, not just the home page. Inner pages are where the h1 usually goes missing.
Headings for screen readers also help search engines and AI assistants understand a page, but that's a side effect. Write them for people first. For the related job of making links readable out of context, see accessible link text, and for overall hierarchy on the screen, visual hierarchy in web design.
Headings in Anticode
Anticode's design engine writes headings in order. On the home page the hero headline is the h1, each section opens with an h2, and items inside a section, such as a card, use h3. On a multi-page site each separate page, such as About or Contact, turns its first section heading into that page's h1, so every page has its own. Heading sizes come from the design system's type scale, not from the level.
In the code editor (Pro mode), text and section order map back to the project, but other markup changes are flagged and not kept, so a hand edit can't quietly turn an h2 into an h4. App builds are different: the model writes the whole program, headings included, so check their outline yourself.
Questions people ask
Can a page have more than one h1?
HTML allows it if they aren't nested, but the common, expected pattern is one h1 that names the page.
Is skipping a heading level an accessibility failure?
It isn't a WCAG failure on its own, but it confuses people navigating by headings. Avoid it on the way down; jumping back up to a higher level is fine.
Should I use a heading to make text bigger?
No. Choose the level from the outline and set the size in CSS.