Is having more than one H1 on a page actually wrong?

Not strictly - Google's own John Mueller has said multiple H1s are fine and the HTML5 spec allows sectioning content to reset the outline. This tool still flags it, though, because in practice a second H1 is usually a template bug (a hero component reusing the same heading level as the page title) rather than an intentional sectioned document, so it's worth a second look, not an automatic failure.

Why does a heading-level skip matter if the visual size still looks right?

Screen reader users frequently navigate a page by jumping between headings rather than reading top to bottom, and that navigation relies on the *level* number, not the font size. A skip from H2 straight to H4 makes it seem like a heading level of content is missing, which is disorienting even though sighted users looking at styled text would never notice anything wrong.

What counts as a 'skip' exactly?

Any place in document order where a heading's level number is more than one greater than the heading immediately before it - for example H2 followed by H4 (skipping H3), or H1 followed by H5. Going the other direction (H4 back down to H2) isn't a skip; heading levels are allowed to decrease by any amount when closing out a subsection.

Does this tool check the visual size of headings, or just the tag name?

Just the tag name ( through ) as parsed from the HTML - it has no way to know if CSS has been used to make an look bigger than an visually. That mismatch is itself worth checking manually, since it confuses both the accessibility tree and, to a lesser degree, how crawlers weight heading text.

Heading Structure Analyzer - H1-H6 Outline & Skip Checker

Overview

Introduction

A page's heading tags do two jobs at once: they're a visual outline for sighted readers skimming the page, and they're a navigable structural map for screen reader users and search engine crawlers who read the DOM rather than a rendered layout. When those levels skip around or a page has no H1 at all, both audiences lose the outline, even if the page still looks fine.

This tool builds a nested outline from a page's H1-H6 tags (fetched live or pasted as HTML) and flags the two problems that most commonly break that outline: missing or duplicate H1s, and level skips where a heading jumps more than one level at once.

What Is Heading Structure Analyzer?

A heading-hierarchy checker that parses every <h1> through <h6> tag in document order, renders them as an indented outline, and separately lists specific structural issues with the exact heading text involved.

Like the other checker tools in this category, it works two ways: fetching a URL directly when the target allows cross-origin requests, or reading HTML you paste in yourself (View Page Source works on any page regardless of CORS).

How Heading Structure Analyzer Works

The HTML is parsed with the browser's DOMParser, and every heading element is collected in document order along with its numeric level (1-6) and trimmed text content. The outline view indents each heading by its level so the hierarchy is visible at a glance.

Two checks then run over that list: an H1 count (flagging zero or more than one), and a pairwise scan comparing each heading's level to the one immediately before it in document order, flagging any jump greater than one level and reporting both headings' text so you know exactly where to look.

When To Use Heading Structure Analyzer

While auditing a page's accessibility, since a broken heading outline is one of the most common issues screen reader users report and one of the easiest to fix once it's identified.

After a CMS template or page-builder change, since drag-and-drop builders frequently let editors pick an arbitrary heading level for a styled text block without any structural guardrails, producing skips that are invisible unless you check the actual HTML.

Often used alongside Image Alt Tag Checker and Meta Tag Checker.

Features

Advantages

Shows the exact heading text on both sides of every skip, not just "a skip was found at position 4", so you can find and fix it immediately.
Explains the H1 count check with the actual nuance (Google has said multiple H1s are fine) instead of presenting it as a hard rule.
The nested outline view makes it easy to see a page's overall content structure at a glance, independent of the issue flags.

Limitations

Only reads the tag name and text content of headings; it can't detect a page using styled <div> or <span> elements to *look* like a heading without using a real heading tag, which is itself an accessibility problem this tool won't catch.
A live fetch only works when the target site sends permissive CORS headers, which most ordinary websites don't - use the paste-HTML fallback for anything else.

Examples

A page with a heading skip

Input

<h1>Running Shoe Buying Guide</h1>
<h2>Cushioning</h2>
<h4>Foam density explained</h4>
<h2>Fit</h2>

Output

Outline:
H1 Running Shoe Buying Guide
  H2 Cushioning
    H4 Foam density explained
  H2 Fit

Issues: 1 skip found
- H2 "Cushioning" -> H4 "Foam density explained" (missing H3 in between)

The jump from H2 straight to H4 skips H3 entirely, which the tool flags with both heading texts so the gap is easy to locate and fix.

Best Practices & Notes

Best Practices

Treat heading levels as a strict outline - each level should represent "one level deeper" than the heading before it, the same way a document's table of contents would nest.
Reserve H1 for the single main title of the page's content; use H2 for its major sections and H3+ for subsections within those, regardless of what font size the design calls for.

Developer Notes

The skip check only compares each heading to the immediately preceding one in document order (increasing-level jumps only); decreasing levels of any size are always valid since closing out a subsection can jump back several levels at once.

Heading Structure Analyzer Use Cases

Auditing a page for accessibility issues before a compliance review, specifically WCAG's heading-structure guidance
Verifying a CMS template didn't introduce a duplicate H1 when a hero/banner component was added to a page that already had a title
Reviewing a long-form article's outline at a glance to confirm sections nest the way the writer intended

Common Mistakes

Picking a heading level purely for its default font size in a page builder (e.g. using H4 because it 'looks right' visually) rather than for its actual structural depth.
Leaving a hero/banner component's heading as an H1 on every page of a template, producing a second H1 alongside the page's own title heading.

Tips

If you need a heading to look smaller or larger without changing its semantic level, do it with CSS font-size, not by picking a different heading tag.

Heading Structure Analyzer