Heading Hierarchy Checker
Paste HTML — from View Source, a CMS export, or your editor — and the checker walks the H1-H6 outline and reports every issue. Multiple H1s on a page. Heading levels skipped (H2 directly to H4). Empty headings (visual styling masquerading as semantic structure). Out-of-order nesting. Each issue is reported with the heading text and document position so you can find and fix it fast.
Why Heading Outline is Both SEO and Accessibility
Headings serve two audiences. Screen readers use the H1-H6 outline as the primary navigation structure — users skip through pages by jumping heading to heading, and a broken outline makes pages unusable. Google uses headings as topic signals — pages with clear, hierarchical outlines tend to rank better for the broad topics their headings cover. Both audiences want the same thing: one H1 per page, sequential nesting, no skipped levels, no empty tags. The fix is mechanical; the checker just makes it visible. For a deeper accessibility audit, follow up with WCAG Compliance Checker.
How the Outline is Walked
The checker parses your HTML with a DOM parser, walks every H1 through H6 element in document order, and tracks the current depth. A new heading at depth N+1 directly under a heading at depth N is correct. A new heading that jumps multiple levels (H2 directly to H4) is flagged. An H1 anywhere other than the first heading is flagged unless it is intentional (some templates have multiple H1s in articles within a single page). Empty headings (no visible text content) are flagged because they are invisible to sighted users but interrupt screen-reader navigation. The output is a tree view of the outline plus a flat list of issues.
See also: pair the outline check with the Mobile-Friendly Tester for viewport, tap target, and font-size signals, and keep the Core Web Vitals Cheatsheet open while debugging Lighthouse reports.
Frequently Asked Questions
Why is more than one H1 a problem?+
It signals to both search engines and screen readers that a page has more than one primary topic, which dilutes both. HTML5 technically allows multiple H1s inside section elements, but in practice the cleanest pattern is one H1 per page for the page title, then H2s for major sections.
What is wrong with skipping heading levels?+
Skipping from H2 to H4 (no H3 between) breaks the outline tree. Screen readers announce the jump as a gap, which disorients users navigating by headings. SEO-wise, it signals sloppy structure. Always step down one level at a time.
Can I use heading styling without using the heading tag?+
Yes — use a CSS class on a p or div to get the visual weight without breaking the outline. The mistake is the opposite: using h3 on something that is not a section heading just because you want bigger text. Headings must be structural, not stylistic.
Does the checker work for React or Vue dynamic content?+
It checks the HTML you paste. For client-rendered apps, paste the post-render HTML from your browser's DevTools (Elements panel and Copy outerHTML on body). The pre-render HTML from View Source may not include dynamically inserted headings.
What about display:none or aria-hidden headings?+
Headings that are visually hidden but still in the DOM appear in the outline check. If they are truly meant to be removed from the document outline, use aria-hidden='true' plus a heading tag that screen readers will still see — or remove them from the DOM entirely. The checker flags both but treats them as warnings, not errors.
Should section landmarks have their own H1?+
HTML5 says yes — each section with its own heading establishes its own outline scope. In practice, screen reader support for this is inconsistent, so the cleanest pattern remains one H1 for the page and H2 for section openers.
Why is the heading text required, not just the tag?+
Empty headings are the most common accessibility bug in custom templates — usually a developer added the tag intending to fill it in via JS, then never did. Screen readers announce the empty heading as 'heading level 2, blank,' which is worse than no heading at all.
Can I check just the heading outline without other HTML?+
Yes — paste any HTML, even a minimal snippet with just headings. The checker does not care about validity of the surrounding markup; it walks whatever heading elements are present.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service