no-skipped-heading-level

Warns for skipped heading levels.

Each heading following another heading lead in the outline must have a heading level that is less than, equal to, or 1 greater than lead's heading level.

Cite: HTML Living Standard 4.3.11 Headings and outlines

❌ Examples of incorrect code for this rule

<h1>Heading 1</h1>
<h3>Heading 3<!-- SKIPPED --></h3>
<h4>Heading 3</h4>

✅ Examples of correct code for this rule

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

The constraint applies only to a heading that follows another heading lead. A document (or fragment) whose first heading is at any level has no lead, so it is correct. The content of a template element and a declarative shadow root are trees of their own, where it is not known from the markup where they are inserted, so the headings of each tree are a sequence of their own. In React and Vue, the children of a template element without a directive are in the tree of the document.

<!-- Article fragment whose first heading is h3 -->
<h3>Section heading</h3>
<h4>Sub heading</h4>

Interface

{
  "no-skipped-heading-level": boolean
}

Warns for skipped heading levels

Default Severity

error