Headings skip levels

Screen reader users navigate by heading level. Jumping from a heading 2 straight to a heading 4 makes the page structure read as though a section is missing.

Headings on a web page work like an outline: an <h1> is the title, <h2> marks main sections, <h3> marks subsections within them, and so on. A "skipped level" happens when the page jumps past a level — for example going straight from an <h2> to an <h4> with no <h3> in between. This usually happens because a heading was chosen for how big or bold it looked rather than where it sits in the structure.

Why it matters

Screen reader users often jump from heading to heading to understand and navigate a page. When a level is skipped, it sounds as though a section is missing or nested incorrectly, which is confusing and can make content harder to find. A logical heading order also helps search engines understand how your content is organised.

How to fix it

The goal is that heading levels only ever go up by one at a time. Keep one <h1> per page, then use <h2>, <h3>, <h4> in order without gaps.

<h1>Page title</h1>
  <h2>Main section</h2>
    <h3>Subsection</h3>
    <h3>Another subsection</h3>
  <h2>Next main section</h2>

If a lower heading looks wrong after changing it, fix the appearance with CSS (font size, weight) — not by picking a different heading level.

WordPress

In the block editor, click the heading block and use the level selector (H2, H3, etc.) in the toolbar to set the correct level. Avoid choosing a level just because you prefer its size; adjust size in your theme or with the "Typography" settings instead.

Custom HTML / static sites

Edit the markup directly so levels increase one step at a time, as in the example above. Then style them with CSS:

h3 { font-size: 1.25rem; font-weight: 600; }

Page builders (Elementor, Divi, etc.)

Select the heading widget and change its "HTML Tag" setting to the correct level. Most builders keep the visual style separate, so the size can stay the same while the tag is corrected.

How to check it worked

Read down the page and confirm each heading level is at most one step deeper than the one before it, with a single <h1> at the top. A browser extension or your browser's accessibility inspector can list the headings in order so you can spot any remaining gaps.