Heading structure for accessibility: how to use H1 to H6 correctly

Why headings matter

Screen reader users commonly move from heading to heading to scan a page, the way sighted visitors scan big text. A clear outline lets them find the product details or the checkout button quickly. Headings also help search engines understand a page's structure. WCAG covers this under 1.3.1 Info and Relationships (structure must be in the code, not only visual) and 2.4.6 Headings and Labels.

The rules of thumb

• One h1 per page, describing what the page is about.
• h2 for main sections; h3 for subsections inside an h2, and so on.
• Do not skip levels (an h2 followed straight by an h4).
• Never use a heading tag only to make text big or bold, and never use bold or large text instead of a heading.
• Keep headings descriptive: "Shipping and returns" beats "More info".

Fix: real headings, styled with CSS

<!-- Before: looks like a heading, is not one -->
<p class="big bold">Shipping and returns</p>

<!-- Before: skipped a level to get smaller text -->
<h2>Our range</h2>
<h4>Jackets</h4>

<!-- After -->
<h2>Our range</h2>
<h3 class="subhead">Jackets</h3>

.subhead { font-size: 1rem; font-weight: 600; }

Check your own outline

1. Use a browser extension that shows headings (WAVE and Accessibility Insights both do; see free checkers compared).
2. Read only the headings. Does the list tell the story of the page?
3. Look for pages with no H1, several H1s that do not make sense or levels that jump.

Platforms and page builders

Site builders often choose heading levels by design, so check what each block produces. In the block editor, set the heading level explicitly. In Squarespace guide, use the Heading 1 to 3 styles; in WordPress accessibility guide, check the page builder's output.

Headings inside cards, footers and popups

Components repeat, so a heading level chosen inside one card repeats across the page. Pick a level that fits the page outline: if a product grid sits under an H2, each product title is an H3. Footer columns can use headings too, but keep the order logical, and give dialogs a heading that names them.

Headings, landmarks and lists do different jobs

• Headings outline the content of the page.
• Landmarks (header, nav, main, footer) mark the regions of the page so users can jump between them.
• Lists group related items such as menu links or product features.

How people use headings

Sighted readers skim a page by its large, bold titles. Screen reader users do something similar by listening to a list of headings or jumping from one to the next. In surveys of screen reader users, headings are consistently reported as one of the most common ways to find information on a page. Search engines also read headings to understand a page, which is one reason accessibility and search work often overlap. See accessibility and SEO.

A good outline, shown as a list

h1  Waxed cotton jacket
  h2  Description
  h2  Sizes and fit
    h3  Size guide
    h3  Care instructions
  h2  Delivery and returns
  h2  Reviews
  h2  You may also like

One h1 names the page. The h2 headings are the main sections. The h3 headings split a section when it needs to be divided. Levels do not skip downward, so an h4 does not follow an h2 directly. It is fine to go back up, from an h3 to the next h2.

Common outline mistakes and their fixes

Headings on a store

Store themes often generate headings automatically. The product title should be the h1 on a product page. Section titles such as "Description" or "Reviews" should be h2. Collection pages should have the collection name as the h1. Cards for individual products in a list usually need a heading level that fits below the section title, often h2 or h3. Banner text on the home page is often marked as a heading for its look and not its structure, so check it.

Writing good heading text

• Describe the content of the section in a few words.
• Put the key words first.
• Make each heading different from its neighbors.
• Prefer a statement or a short question that matches what readers are looking for.
• Keep style choices, such as capitals, in CSS.

Testing your outline

Browser extensions can show the headings on a page as a list. A screen reader can show the same list from its own menu. Read the list from top to bottom. It should read like a table of contents for the page. If it does not, the page is hard to navigate by headings, and the fix is usually changing the heading levels or adding missing headings.

A worked example: cleaning up a services page

A services page looks neat: a big banner line, three service columns with bold names, a quote in large type and a "Get in touch" strip. Yet its outline, as a screen reader reports it, has one heading, the banner line, marked h1, and nothing else. The service names and the contact strip are styled paragraphs. A visitor navigating by headings finds a single stop and no way to jump to a service.

The fix: mark each service name as an h2, make "Get in touch" an h2, leave the quote as a blockquote and keep the visual style with CSS. The page looks the same, and now the outline lists five entries: the page title, three services and the contact section. A screen reader user can jump to "Bookkeeping" in one keystroke, and a search engine can see the page's structure.

Headings and landmarks together

Landmarks mark the big regions of a page: header, navigation, main, complementary and footer. Headings mark the sections inside them. Used together they let people jump to the part of the page they want. Use one main landmark that holds the page's own content, and give a label to navigation regions if there is more than one, such as "Primary" and "Footer".

Your questions about headings

• Should my logo be an h1? Generally no. The h1 should name the page, not the site.
• Is it fine to skip from h1 to h3 because of the design? It makes the outline confusing. Use h2 and adjust the style with CSS.
• Do headings need to be visible? Usually yes. A visually hidden heading can help structure a region, but visible headings help everyone.
• What about headings in widgets like reviews or related products? Give each widget a heading at a level that fits the page, and do not leave the widget's default level if it breaks the outline.

Page builders and themes

Visual builders often let you choose a heading level in a drop-down and a separate style for the look. Use them as intended: pick the level by the page's structure and the style by the design. Some themes add headings by default to widgets, such as "Recent posts" or "Search", at levels that may not fit your outline. Check these and change them if needed. Footers are another place to look: footer column titles are often h4 or h5 because of the theme's CSS, even though no h2 or h3 comes before them.

What good heading structure gives you

A quick fix list

1. Install a headings viewer and list the headings on your five main pages.
2. Find pages with no h1, several h1s or skipped levels.
3. Find bold paragraphs that are really headings.
4. Find headings that are really styled paragraphs.
5. Change the markup, keep the look with CSS and re-list the outline.

Most sites can fix the worst problems in an afternoon, because they sit in a handful of templates.

A worked example: a blog post template

A blog template marks the post title as an h1, the author box as an h3, "Related posts" as an h4 and the sidebar headings as h2. The outline reads h1, h3, h2, h2, h2, h4, with the h2s in the sidebar coming before the article body. A screen reader user jumping by headings lands in the sidebar before the article and finds levels that do not match the content.

The fix is to mark the article's sections as h2, the author box as a smaller-looking h2 or no heading at all, "Related posts" as an h2 after the article and the sidebar headings as h2 within a complementary landmark. The outline now matches the page, and editors know to use h2 and h3 inside articles. A short note in the editor guide keeps new posts consistent.

Headings for tables, accordions and tabs

• A table should have a caption or a nearby heading that names it, and header cells in the first row or column.
• Accordion sections should have a heading for each section, with the button inside the heading, so the structure is clear.
• Tabs should label each panel, and the panel should have a heading if it contains a lot of content.
• Cards in a grid should each have a heading at the same level.

What to do about headings you cannot edit

Sometimes a plugin or theme controls headings you cannot change. Options include a template override, a setting in the plugin, a different plugin or a small script that changes the heading level. Choose the least fragile option, document it and retest after updates.

In short

A good heading structure has one h1, sections marked with h2, subsections with h3 and no skipped levels. Headings describe their sections, are real heading elements and are styled with CSS. Check your five main pages with a headings viewer, fix the templates first and keep a short guide for editors. This is among the cheapest accessibility improvements you can make, and it helps readers, search engines and everyone who skims.

Related checks to do at the same time

• Check that each page has a unique, descriptive title. See accessibility and SEO.
• Check that link text is specific. See link and button names.
• Check that images have useful descriptions. See alt text.
• Check that the page can be navigated with a keyboard. See keyboard focus.

A five-minute heading audit

1. Open the page and list its headings with a browser extension or your screen reader.
2. Check that there is one h1 and that it matches the page title.
3. Check that levels go down by one step at a time.
4. Look for sections that should have a heading and do not.
5. Look for headings that are really decoration.
6. Fix the template, then check a second page that uses it.

Repeat the audit after a redesign, a theme update or a major content change.

If you are unsure whether something should be a heading, ask whether it names a section of the page that a reader might want to jump to. If yes, make it a heading. If it is only a way of making text look bigger or bolder, it is not, and CSS can do that job.

Keep in mind that headings are for navigation as much as for looks. A page whose headings, read in order, outline its content clearly is easier for everyone to use.

Long pages

A guide or policy with many sections benefits from a short list of links at the top that jump to each heading. The headings themselves are what that list links to, so this works only when they are real headings with sensible text.