Home / Tools / Heading Structure / Content Outline Checker

Heading Structure / Content Outline Checker

Paste a page's HTML to see its complete H1-H6 outline as a tree, and catch skipped heading levels or a missing/duplicate H1.

hsc.log
waiting for input
Paste page HTML, then click "Analyze headings".

Why heading structure is more than just visual styling

Heading tags exist to describe a document's logical outline, not just to make certain lines of text look bigger. A well-structured page uses exactly one H1 for its main topic, then nests H2s as major sections beneath it, H3s as sub-points within each H2, and so on — the same way a well-organized document or book uses chapter and section headings. Both screen readers and search engines rely on this structure to understand how a page's content is organized, independent of the visual font size a designer chose for each level.

This tool parses your pasted HTML and builds the full heading outline as a simple indented tree, so you can see at a glance whether your page's actual heading structure matches the logical structure you intended when writing it. It also runs two specific, well-defined checks: whether the page has exactly one H1, and whether any heading level was skipped on the way down — for example, jumping straight from an H2 to an H4 without an H3 in between.

Why exactly one H1 matters

The H1 is meant to represent a page's single main topic, functioning as the page's own internal headline distinct from (though often similar to) its title tag. A page with zero H1 tags leaves both readers skimming the page and crawlers parsing it without a clear signal of what the page's main subject actually is, relying entirely on the title tag or overall body text to convey that instead. A page with multiple H1 tags dilutes that same signal in the other direction, since it's no longer clear which of several equally-weighted headlines represents the page's actual primary topic — this is a common byproduct of page builder tools or templates that apply H1 styling to multiple elements, such as both a page header and a separate hero banner component.

Why skipped heading levels are worth fixing

Jumping from an H2 directly to an H4, skipping H3 entirely, doesn't usually cause any visible problem — the page still renders and reads fine to a sighted visitor scanning the layout. The issue is structural: a screen reader user navigating a page by heading level, which is a common and efficient way to skip around a long page using assistive technology, experiences a confusing gap when a sub-level is skipped, since the outline they're building in their head no longer matches the page's stated hierarchy. It also weakens the semantic clarity of the page's structure for anything else that relies on that hierarchy, including some crawlers building an understanding of a page's content structure.

Using the outline view while restructuring content

Beyond catching specific errors, the full indented outline this tool produces is useful on its own as a fast way to review whether a long page's structure actually makes sense — whether sections are grouped logically, whether any section has grown so large it deserves to be split into sub-headings, and whether the heading text itself is descriptive enough to make sense on its own, out of context, the way it would appear in a table of contents or a screen reader's heading list.

Frequently asked questions

Is it ever acceptable to have zero H1 tags on a page?

Generally no for a standard content page — every page should have one clear H1 representing its main topic. Some highly specialized templates or components might be an exception, but as a default rule, exactly one H1 is the safest and most widely recommended practice.

Does skipping a heading level break my page visually?

No, skipped levels are purely a structural issue and don't usually cause any visible rendering problem. The impact is on accessibility for screen reader users navigating by heading level, and on the semantic clarity of the page's structure.

Can I use H2 or H3 styling without actually using an H2 or H3 tag?

Yes, and this is a common and often necessary practice for purely visual elements that aren't really part of the content outline. Just make sure genuine section headings within your main content use real heading tags in the correct order, since that's what this tool and assistive technology both rely on.

Is my HTML uploaded anywhere during this check?

No. Everything is parsed locally with your browser's own DOMParser, and nothing is sent to a server.