A page's headings — H1 through H6 — aren't just visual styling, they're a semantic outline that both screen readers and search engines rely on to understand a document's structure. This tool analyzes a page's heading hierarchy and flags structural issues.
Headings as a document outline, not a font-size shortcut
HTML heading tags were designed from the start to represent a genuine logical outline of a document's structure, similar to a formal outline with numbered sections and subsections — H1 representing a page's main topic, with H2s marking major sections and H3s marking subsections within those, and so on. A common and genuinely problematic practice is using heading tags purely for their default visual size (choosing an H3 simply because it "looks right" at that point in a design) rather than their actual structural, semantic meaning — a practice that breaks the logical outline screen reader users rely on to navigate a page's structure efficiently, since screen readers commonly let users jump directly between headings, an experience that only works correctly if the heading hierarchy genuinely reflects the content's logical structure.
What this tool checks
The tool scans a page's heading tags and reconstructs their hierarchical outline, flagging common structural problems: multiple H1 tags (traditionally recommended as a single, page-defining heading, though modern HTML5 semantics have relaxed this somewhat in certain contexts), skipped heading levels (jumping from an H2 directly to an H4 with no H3 in between), and headings used seemingly for visual styling rather than genuine structural hierarchy.
Where analyzing heading structure is genuinely useful
- Web accessibility auditing — a broken or illogical heading structure directly harms screen reader users' ability to navigate and understand a page's content organization.
- Content organization and SEO — a clear, logical heading structure helps search engines understand a page's topic hierarchy and can support how content is represented in search features like featured snippets.
- Content editing and quality review — reviewing whether a long article's heading structure genuinely reflects a clear, logical organization of ideas, which often benefits both readers and search visibility.
- Template and CMS quality control — checking whether a website's template consistently applies correct heading structure across different page types.
Frequently asked questions
Can a page have more than one H1 tag? Traditional SEO guidance strongly recommended exactly one H1 per page, representing its single main topic, and this remains a widely followed best practice; HTML5's sectioning elements technically allow for a more flexible heading model in certain nested contexts, but a single, clear H1 per page remains the safer, more broadly compatible convention.
Why is skipping a heading level (like H2 to H4) a problem? Because it breaks the logical outline structure that screen reader users specifically rely on when navigating by heading level, and it can also make a page's content hierarchy genuinely confusing to parse, both for assistive technology and for search engines attempting to understand relative content importance and organization.
Should I choose a heading level based on how it looks, or its position in the outline? Always based on its logical position in the content outline — if a specific heading level's default visual styling doesn't look right for your design, the correct fix is adjusting that heading level's CSS styling, not choosing a different, structurally incorrect heading tag purely because it happens to look better by default.
Further reading
W3C WAI — Headings tutorial — The official Web Accessibility Initiative guidance on proper heading structure and hierarchy.
MDN — Heading elements — Technical reference for HTML heading tags and their semantic role.