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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-heading-x-with-computed-level-m-follows-the-heading-y-with-computed-level-n-skipping-z-heading-level
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

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

## Fixed heading hierarchy

```html
<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:

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

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