The heading X (with computed level M) follows the heading Y (with computed level N), skipping Z heading level."

A heading level has been skipped in the document's heading hierarchy, such as jumping from an <h2> directly to an <h4>.

HTML headings (<h1> through <h6>) form a hierarchical outline of the document. Screen readers and other assistive technologies use this hierarchy to help users navigate content. When a level is skipped, the outline becomes ambiguous: does the <h4> after an <h2> belong to a missing <h3> section, or is it a direct subsection of the <h2>? Users who navigate by heading level may assume content is missing.

The rule is straightforward: after an <h1>, the next heading should be <h2>. After an <h2>, use <h3>, and so on. You can go back up the hierarchy at any time (an <h2> after an <h4> is fine, because it starts a new section), but you should not skip down.

If you are using a heading level purely for its visual size, use CSS instead. Apply the correct semantic heading level and style it however you want.

Example with skipped heading level

<h1>Recipe book</h1>
<h2>Desserts</h2>
<h4>Chocolate cake</h4>

The jump from <h2> to <h4> skips the <h3> level.

Fixed heading hierarchy

<h1>Recipe book</h1>
<h2>Desserts</h2>
<h3>Chocolate cake</h3>

If the <h4> was chosen for its smaller font size, apply CSS to the <h3> instead:

<style>
  .small-heading {
    font-size: 1rem;
  }
</style>

<h1>Recipe book</h1>
<h2>Desserts</h2>
<h3 class="small-heading">Chocolate cake</h3>

Learn more:

MDN Reference

Heading elements

→

WHATWG Spec

Sections and outlines

→

web.dev Article

Headings and sections

→