November 3, 2026

Heading structure and accessibility: using h1 to h6 correctly

A sound heading structure, from h1 down to h6, matters for accessibility. The W3C headings tutorial puts it plainly: headings communicate the organization of the content on the page, and web browsers, plug-ins and assistive technologies can use them to provide in-page navigation. In practice, that means marking up every heading with a real heading element (h1 to h6) and nesting those headings by rank. We draw one practical piece of advice from this: pick the level according to the structure rather than the look, and handle presentation in CSS (advisory technique C22). This guide walks through the W3C “Headings” tutorial and the Understanding document for WCAG success criterion 1.3.1 “Info and Relationships”, with example structures and the mistakes to fix.

Why heading structure matters for accessibility

Sighted users spot a heading at a glance. The Understanding document for 1.3.1 describes it this way: headings are often in a larger, bold font, separated from paragraphs by blank lines. That structure is perceived through visual presentation.

The trouble starts when the presentation changes. The W3C names two situations: the content is read by a screen reader, or the user substitutes their own style sheet for the author's. Success criterion 1.3.1 (Level A) therefore requires that information, structure and relationships conveyed through presentation can be programmatically determined or are available in text.

A properly marked-up heading meets that requirement: its existence and its rank are exposed to browsers and assistive technologies, which can then offer navigation within the page. A paragraph that is merely bold does not expose its role as a heading.

Six heading levels and the nesting rule

The W3C tutorial sets one central rule: nest headings by their rank (or level). Rank 1 is the most important, rank 6 the least important. A heading with an equal or higher rank starts a new section; a heading with a lower rank starts a subsection that is part of the higher-ranked section.

Skipping heading ranks can be confusing and should be avoided where possible. There is one case where it is fine: closing subsections.

Avoid: an h2 followed directly by an h4, with no h3 in between.
Fine: an h4 followed by an h2, which closes the open subsections and starts a new section.
Exception: in fixed sections of the page, such as a sidebar, heading ranks should not change depending on the ranks used in the content area, because consistency across pages matters more there.

Where does the h1 go? The W3C examples

The tutorial presents several ways to organize a page. In the simplest case, headings only organize passages of text, such as the main content: the example has one h1 followed by three h2 headings.

First full-page example: the rank 1 heading is the first heading in the document. The navigation menu, the sidebar, the footer and the main content get headings one rank lower, as h2. Inside the content, a subsection is an h3, itself split by an h4; the next h2 closes both subsections at once.

Second example: the main heading is not the site name but the content heading, at rank 1. The page opens with an h2 for the navigation menu, then an h2 for the sidebar, then the h1. All other headings, including the footer, are h2, and the subheadings in the content are rank 2 as well, on the same level as the other structural headings.

Our takeaway: what matters is not where the h1 sits in the code, but whether each heading's rank matches the place of the section it introduces.

Picking a heading for its size: a mistake to avoid

In our view, choosing a heading level because of how it looks (an h4 because it is “smaller”, an h1 because it is “bigger”) risks producing a rank that no longer matches the real organization of the content, which breaks the nesting the W3C recommends.

Among the techniques listed for 1.3.1, some deal with marking up structure: H42 (Using h1-h6 to identify headings), ARIA12 (Using role=heading to identify headings), G115 (Using semantic elements to mark up structure). Others deal with presentation: C22, an advisory technique (Using CSS to control visual presentation of text), and G140, a sufficient technique (Separating information and structure from presentation to enable different presentations). Our recommendation follows from this: choose the level for the structure, then adjust the size in CSS.

The opposite mistake also exists: text styled large and bold to look like a heading, without heading markup. That matches failure F2, defined as a failure of 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text. More broadly, failure F43 covers using structural markup in a way that does not represent relationships in the content.

Headings and page regions

Headings are also useful for labeling page regions. The tutorial recommends using aria-labelledby to associate headings with their page region, and notes that visible headings help all users identify those regions.

The Understanding document for 1.3.1 also lists, among its sufficient techniques, ARIA13 (Using aria-labelledby to name regions and landmarks), ARIA11 (Using ARIA landmarks to identify regions of a page) and H101 (Using semantic HTML elements to identify regions of a page).

WCAG success criteria and techniques to know

The “Headings” tutorial links headings to four success criteria at different conformance levels. It states that it provides best-practice guidance combining those levels.

1.3.1 Info and Relationships, Level A.
2.4.1 Bypass Blocks, Level A.
2.4.6 Headings and Labels, Level AA.
2.4.10 Section Headings, Level AAA.
Related techniques: G130 (Providing descriptive headings), G141 (Organizing a page using headings), H69 (Providing heading elements at the beginning of each section of content), H80 (Identifying the purpose of a link using link text combined with the preceding heading element) and PDF9 (Providing headings by marking content with heading tags in PDF documents).

How to check the heading structure of your page

The Understanding document for 1.3.1 suggests one way to check: access the information serially, through different modalities. For headings, we read this as asking whether the structure still makes sense once the styling is gone. Here is a checklist based on the rules above.

To spot problems quickly across all your pages, you can run a free test, then set up continuous monitoring to catch regressions with every site update.

Is every piece of text that visually acts as a heading marked up with an h1 to h6 element (or role=heading)?
Are ranks nested, with no skips such as an h2 followed directly by an h4?
Were levels chosen for the structure rather than for their display size?
Do headings in fixed sections, such as the sidebar, keep the same rank on every page?
Are important regions introduced by a visible heading, associated through aria-labelledby where needed?

Frequently asked questions

Can you skip a heading level, like going from h2 to h4?

The W3C recommends avoiding it where possible, because skipping ranks can be confusing. Skipping ranks is fine when closing subsections, though: an h2 can follow an h4 to start a new section.

Does the h1 have to be the first heading on the page?

Not necessarily. The W3C tutorial shows two structures: one where the h1 is the first heading in the document, and one where the page starts with h2 headings for navigation and the sidebar, before an h1 that is the content heading rather than the site name.

Can I use an h3 or h4 to get a smaller heading?

In our view, better not: the W3C tutorial recommends nesting headings by rank, which implies the level reflects the structure. Appearance can be handled in CSS (advisory technique C22 for 1.3.1). The sufficient techniques also include G140, which separates information and structure from presentation.

Is large bold text enough to count as a heading?

Not in an HTML page. Success criterion 1.3.1 requires structure conveyed through presentation to be programmatically determinable or available in text. Using changes in text presentation without the appropriate markup matches failure F2. Formats without semantic structure rely instead on text formatting conventions (technique T3).

Which WCAG success criteria cover headings?

The W3C tutorial lists 1.3.1 Info and Relationships (A), 2.4.1 Bypass Blocks (A), 2.4.6 Headings and Labels (AA) and 2.4.10 Section Headings (AAA).

Should sidebar heading levels change from page to page?

No. In fixed sections such as a sidebar, the W3C says ranks should not change depending on the main content: consistency across pages matters more.

Sources

This article relies on the official sources listed at the end of the page.