Heading structure: accessibility and SEO best practice

Headings are the outline of a page. Sighted visitors scan them, and assistive technology can list them and jump between them. This guide covers what a good outline looks like, which rules come from standards and which are best practice, the usual mistakes and their fixes, how screen reader users use headings, what Google's documentation says, and how to check your own pages.

What a good heading outline looks like

The heading level is the depth of a section. An h1 names the page, each h2 is a main section, and each h3 is a subsection of the h2 above it. The HTML Standard puts it this way: the h1 is for a top-level section, h2 for a subsection, h3 for a sub-subsection, and so on. Here is the outline of an invented category page:

h1  Trail running shoes
  h2  Shop by terrain
    h3  Mud and soft ground
    h3  Rock and hard pack
  h2  How to choose a pair
    h3  Cushioning
    h3  Grip
  h2  Delivery and returns

Two checks make an outline useful. First, read only the headings: do they tell the story of the page, in order? Second, look at the levels: a heading never sits more than one level deeper than the heading before it. Jumping back up is fine. Going from the last h3 under "How to choose a pair" to the h2 "Delivery and returns" is how sections close, and the HTML Standard allows it: each heading must have a level less than, equal to, or one greater than the heading before it.

What the standards require and what is best practice

Heading rules come from several places, and they do not carry the same weight. The table separates them.

We found no W3C text that makes a skipped level a failure of its own: the Understanding page for 1.3.1 lists no failure specific to heading levels. In our reading, a skipped level can still point to a real 1.3.1 problem, for example a section that looks top-level on screen but is marked up as an h4. Fix skips as a matter of course, and do not report one as a WCAG failure unless the markup misstates the structure. The criteria reference lists 1.3.1 and 2.4.6 with the tools that help, and our 1.3.1 page goes deeper.

Common heading mistakes and how to fix them

These problems are common. The February 2026 WebAIM Million, an analysis of one million home pages, reports that skipped heading levels were present on 41.8% of all pages, that 18.1% of home pages had more than one h1, and that 7.5% of pages had no headings. We repeat WebAIM's wording for each figure, because it switches between "all pages", "home pages" and "pages".

The same logic applies outside web pages. PDFs carry headings as tags, and W3C lists a PDF technique (PDF9) for 1.3.1; see our guide to accessible PDFs and the PDF accessibility checker.

Headings in components and templates

Most outline errors start in a shared component, not in page copy. These cases come up often. The advice is ours, built on the HTML Standard rule quoted above that a heading's level is less than, equal to or one greater than the heading before it.

• Card titles and repeated blocks. Give the title the level that fits where the block sits: h3 for a card grid under an h2 section, h4 for the same grid under an h3. A component with its level hard-coded breaks the outline when someone moves it, so let the template set the level.
• Taglines and subtitles. A line under a title that is not the start of a new section does not need a heading level of its own. The HTML Standard's hgroup element is for content representing a subheading, alternative title or tagline, with the text in p elements next to the heading.
• Styled labels that are not sections. A price, a date or a badge set in large type is not a heading. Style a paragraph or a span instead, so the heading list stays a table of contents.
• Builder blocks. Some page builders and themes let an editor pick the tag for a heading block. Check the finished page, because the tag the block outputs is what counts, not how large it looks. Our WordPress and Shopify guides cover theme-level changes.

ARIA headings

Native elements come first. The WAI-ARIA 1.2 specification says it is better to use an h1 element in HTML than to put the heading role on a div. When you cannot change the element, role="heading" needs an aria-level (the heading role lists it as required) and an accessible name. W3C documents the approach as technique ARIA12.

<div role="heading" aria-level="2">Delivery and returns</div>
<h2>Delivery and returns</h2>

Both lines expose a level-2 heading. The second is simpler, needs no ARIA, and is the one to use. Tools differ in what they see: the free scan and the heading checker read h1 to h6 tags, while the bookmarklet also reads role="heading" with aria-level.

How screen reader users use headings

The WebAIM Screen Reader User Survey #11 ran in July and August 2026 and received 1,780 valid responses. WebAIM notes that the sample was not controlled and may not represent all screen reader users. It asked what people do first when looking for information on a lengthy web page:

The five counts add to 1,757, so WebAIM's shares for this question are of the respondents who answered it, not of all 1,780 valid responses.

Headings remain the most common first move, although the share fell from 71.6% in the 2024 survey. The same survey asked how useful heading levels are when navigating by headings: 51.9% said very useful and 36.4% somewhat useful, which is 88.3% together by our sum.

To hear it for yourself, open your screen reader's list of headings. In NVDA, WebAIM's guide lists the H key to move from heading to heading and NVDA plus F7 to open the Elements List. Read the list as a table of contents. If it does not make sense without the page around it, the headings or their levels need work. Our guide to testing website accessibility puts this in a wider routine.

Heading structure and SEO

We make no ranking promises, and the sources do not support one. What Google's own documentation says:

• Google's SEO Starter Guide lists "Number and order of headings" under things Google believes you should not focus on. It says semantic order is fantastic for screen readers, that Google Search does not mind headings used out of order, and that there is no ideal number of headings for a page.
• Google's title link documentation lists heading elements such as h1 among the sources Google may use to create a title link, and suggests putting the title text in the first visible h1 element as one way to make the main title clear.

That leaves two practical points. Write headings for readers, not for crawlers, and keep the h1 matched to the page's real subject. The case for a clean outline is that people use it, and a page that is easier to navigate is better whatever a search engine does with it.

How to check your headings

A five-minute review: run the heading checker, read the outline aloud, fix the levels, rewrite vague wording, and delete empty headings. Then repeat it on each template, because a skipped level in a shared template appears on every page that uses it. Our guide to making a website accessible and the WCAG 2.2 checklist show where this fits among the other fixes, and the platform guides for WordPress and Shopify cover theme-level changes.