Heading levels should increase by one; skipping levels (e.g. h2 to h4) makes navigation harder.

Headings in HTML (<h1> through <h6>) define a document's outline. When heading levels are sequential, they communicate a clear hierarchy: an <h2> is a section of the page, an <h3> is a subsection within that <h2>, and so on. Skipping a level, such as jumping from <h2> directly to <h4>, breaks this logical structure. The missing <h3> implies that content is absent or that the hierarchy is malformed.

Screen reader users rely heavily on heading navigation to move through a page. Most screen readers provide a shortcut to jump between headings or to list all headings on a page in an outline view. When a level is skipped, that outline has gaps, and users may wonder whether they missed a section or whether the page is structured incorrectly. This slows down navigation and creates confusion, especially on long or complex pages.

Sighted users are also affected, though less directly. A consistent heading hierarchy produces a predictable visual rhythm when paired with appropriate styles. Skipped levels can lead to inconsistent font sizes or spacing if styles are tied to heading elements, making the page harder to scan.

Related WCAG success criteria

This rule relates to WCAG 2.1 Success Criterion 1.3.1 "Info and Relationships" (Level A), which requires that information, structure, and relationships conveyed through presentation are programmatically determinable. A proper heading hierarchy makes the structural relationships between sections of content available to assistive technologies.

It also supports Success Criterion 2.4.6 "Headings and Labels" (Level AA), which requires that headings describe the topic or purpose of the content they introduce. A well-ordered heading hierarchy reinforces the meaning of each heading by placing it in the correct structural context.

How to fix it

The fix depends on the surrounding content, which is why this issue is contextual rather than automatically repairable. There are two common scenarios:

If the heading level is too deep (for example, an <h4> that should be an <h3>), change the element to the correct level so the hierarchy is sequential.

If the heading level is correct but an intermediate heading is missing, add the missing heading to fill the gap. This usually means inserting a section heading at the skipped level.

A few rules of thumb:

• Start the page with a single <h1> that describes the page's title or primary topic.
• Use <h2> elements for top level sections within the page.
• Use <h3> for subsections within an <h2>, <h4> for subsections within an <h3>, and so on.
• Going back up in level is fine. After an <h3>, you can use another <h2> to start a new section. The rule only prohibits skipping levels when going deeper.
• Do not choose a heading level based on its default visual styling. Use CSS to control appearance, and let the heading level reflect the document structure.

Examples

Incorrect: skipped heading level

This example jumps from <h2> to <h4>, skipping <h3>:

<h1>Cooking guide</h1>
<h2>Breakfast recipes</h2>
<h4>Scrambled eggs</h4>
<p>Whisk eggs and cook over medium heat.</p>

A screen reader user navigating by headings would see a gap between levels 2 and 4 and might assume a section is missing.

Correct: sequential heading levels

<h1>Cooking guide</h1>
<h2>Breakfast recipes</h2>
<h3>Scrambled eggs</h3>
<p>Whisk eggs and cook over medium heat.</p>

The <h3> correctly indicates that "Scrambled eggs" is a subsection of "Breakfast recipes."

Correct: going back up to a higher level

After finishing a subsection, you can return to a higher heading level to start a new section:

<h1>Cooking guide</h1>
<h2>Breakfast recipes</h2>
<h3>Scrambled eggs</h3>
<p>Whisk eggs and cook over medium heat.</p>
<h3>Pancakes</h3>
<p>Mix batter and cook on a griddle.</p>
<h2>Lunch recipes</h2>
<h3>Grilled cheese</h3>
<p>Butter bread, add cheese, and grill until golden.</p>

Here, "Lunch recipes" is an <h2> that starts a new top level section after the "Breakfast recipes" subsections. This is valid because the heading level is going back up, not skipping ahead.

Incorrect: using heading levels for visual styling

<h1>Our team</h1>
<h4>Meet the people behind the product</h4>
<p>We are a small team of engineers and designers.</p>

The <h4> is used here because its default font size looked right visually. The correct fix is to use the proper level and adjust the styling with CSS:

<h1>Our team</h1>
<h2 class="subtitle">Meet the people behind the product</h2>
<p>We are a small team of engineers and designers.</p>

.subtitle {
  font-size: 1rem;
  font-weight: normal;
}

The heading level now reflects the actual document structure, and CSS handles the visual presentation independently.

Learn more:

W3C Reference

Understanding Success Criterion 1.3.1: Info and Relationships

→

W3C Reference

Headings

→

MDN Reference

MDN: Heading elements

→