HTML Guides for skip

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>

<h3class="small-heading">Chocolate cake</h3>