Heading Structure Analyzer

About the Heading Structure Analyzer

A well-formed page usually has one h1, then h2s for its main sections, and h3-h6 nested underneath in order without gaps. This tool parses pasted HTML with the browser's own DOMParser, walks every h1 through h6 in document order, and builds an indented outline to make the hierarchy visible at a glance. It also checks for a few common problems, a missing h1, more than one h1 on the page, a heading level that jumps (an h4 appearing right after an h2 with no h3 between them), and headings that have no visible text.

Why heading levels can't skip, but siblings can repeat freely

The rule this tool enforces most strictly is about parent-child nesting, not repetition, five h2s in a row on the same page are completely normal and expected, one for each main section. What actually breaks the structure is a level skip, an h4 appearing directly after an h2 with no h3 in between implies a subsection that was never properly introduced. Screen readers give users a way to jump directly between headings to navigate a page's structure without reading through everything, a skipped level makes that navigation confusing in a very literal, mechanical sense, jumping from an h2 straight to what claims to be a sub-subsection with nothing marking the level in between.

Heading level and visual size are two different things

It's common for a heading to get picked based on how large it needs to look rather than where it actually sits in the document's logical structure, an h4 chosen because "h2 looks too big here" even though the content is genuinely a top-level section. Visual size belongs to CSS, not to the tag choice, styling any heading level to look smaller or larger is a font-size rule, not a reason to pick a semantically wrong tag. Keeping those two decisions separate, choosing the tag for structure and the appearance through CSS, avoids exactly the kind of skipped-level problem this tool flags.

Is one h1 per page a hard rule?

The HTML specification has gone back and forth on this over the years and, strictly read, doesn't forbid multiple h1 elements the way this tool's warning might suggest. In practice, one h1 per page remains the safe, universally understood convention, screen reader software, SEO tooling, and most developers all still treat the h1 as the page's single primary heading, and deviating from that widely shared assumption is more likely to cause confusion than to unlock any real benefit. This tool flags multiple h1s as a warning rather than a hard failure specifically because it's a convention worth following, not a strict technical requirement being violated.

Reading the outline versus reading the issues list

The indented outline is useful even on a page with zero flagged issues, it's often the fastest way to sanity-check that a page's actual content structure matches what was intended while writing it, a section that was meant to be a subsection but ended up as a sibling becomes obvious once it's laid out indented by level rather than buried in the surrounding HTML.

Empty headings are easy to introduce by accident

A heading tag with no visible text inside it, sometimes left behind after a placeholder was removed or a CMS field was cleared without deleting the wrapping tag, still counts as a real heading in the document's structure even though there's nothing for a reader to see. This tool flags it explicitly rather than silently skipping it in the outline, since an empty heading announced by a screen reader as just "heading level 3, blank" is a genuinely confusing experience worth catching before a page ships, not a cosmetic detail that only matters visually.