Heading Hierarchy Checker — H1–H6 Outline + Issue Detection

The heading outline is an interface, not decoration

Someone using a screen reader does not see your layout. What they get is the heading outline — and many pull up that list first, as a table of contents, to decide where in the page to go. That makes your headings a working navigation control for a group of readers you never see in analytics.

Which is why the common failure matters: text made bold and large to look like a heading is not one. It is invisible to that list, so a section that is obvious on screen simply does not exist for anyone navigating by structure. The reverse is just as bad — a heading tag used on something that is not a section heading inserts a phantom entry into the outline.

Why exactly one H1

The H1 answers "what is this page about". Two H1s claim two subjects and leave the outline without a root, so nothing tells a reader which one the page is really for.

In practice this almost always arrives through a template. A site header marks up the site name or logo as an H1 to make it prominent; later, an article is added with its own H1 title. Nobody wrote two H1s deliberately, but the page now has them, and the outline presents the site name and the article title as equal claims about the subject. The rule that resolves it: the H1 belongs to the content, not to the site frame.

What a skipped level actually breaks

A jump from H2 straight to H4 tells anyone reading the outline that an H3 section sits between them. It does not. They are looking for content that was never written, in a structure that does not exist.

The cause is nearly always visual. Heading levels render at decreasing sizes, so a heading gets picked for how big it looks rather than for where it sits in the hierarchy — H4 chosen because H3 looked too large for a short subsection. The fix follows from that: correct the level, do not add a heading to fill the gap. Adding one papers over a labelling mistake with a real structural change. If the heading is genuinely a subsection of the H2 above it, it is an H3, whatever size that renders at — and size is a job for CSS.

The test that catches most of it

Read only your headings, in order, and ignore everything else. Does that list still describe the page? A sound structure reads as a summary someone could use to find their way around. A broken one reads as disconnected labels, and that is precisely what a reader navigating by headings receives.

It is worth doing before running any checker, because it catches the problems no automated check can see: headings that are correctly nested and still meaningless.

What the checker reads

Paste HTML or Markdown and you get the outline indented by level, plus three figures — total headings, H1 count, and hierarchy issues — with each issue naming the heading text where it occurs.

Two limits to know. It audits markup you paste; it does not fetch a URL or crawl a site. And Markdown is a fallback only: it looks for lines starting with one to six # characters, but only when it found no HTML headings at all. Paste a document mixing both and the Markdown headings are silently ignored, so convert first or check them separately.

Malformed markup is handled properly: an unclosed heading followed by a differently-levelled one no longer merges the two into a single phantom entry, which matters because broken markup is often exactly why you opened a hierarchy checker.

For the other structural read on the same draft — which words the page actually repeats, and whether it is about what you think — see the keyword density analyzer.