Heading Structure Checker

The Heading Checker analyzes the heading structure (H1, H2, H3, H4, H5, H6) of any webpage and reports on proper hierarchy, potential issues, and accessibility impact. Headings are both an SEO signal (helping Google understand page structure and topic) and an accessibility feature (screen reader users navigate by heading). A well-structured page has exactly one H1, logical H2 subsections, H3 sub-subsections, and so on — forming a clear outline. Many pages get this wrong: multiple H1s, skipped levels (H1 to H3 without H2), excessive heading depth, or headings used for visual styling rather than structure.

Enter any URL and the tool fetches the page, extracts all H1-H6 headings, and presents the hierarchy as a visual outline. Issues flagged: multiple H1s (should be one per page in most cases), missing H1 entirely, levels skipped (H2 followed by H4), excessive length (headings over 70 characters may be poor SEO), duplicate heading text, and empty headings. Great for pre-publication content review, accessibility audits, and debugging SEO issues where heading structure is suspect.

HTML heading elements range from H1 (most important) to H6 (least important). Semantically, they represent document structure. Visually, browsers render them in decreasing font sizes by default, though CSS can override.

Canonical heading structure:
- H1: page topic (one per page)
- H2: major sections
- H3: subsections within H2
- H4: sub-subsections within H3
- H5, H6: rarely needed for most content

SEO impact: Google uses headings to understand page topic and structure. H1 is most influential; H2 and H3 contribute. Below H3, impact is minimal for SEO but still useful for structure.

Accessibility: screen readers announce headings by level. Users can navigate pages by heading (e.g., pressing H in NVDA). Missing or poorly structured headings make pages harder to navigate. WCAG 2.1 SC 2.4.6 recommends descriptive headings.

Rules and best practices:
- Exactly one H1 per page (historically strict; HTML5 allows multiple in section elements but one is still safest)
- Don\u2019t skip levels: H1 → H2 → H3, never H1 → H3
- Headings should be descriptive of the content below them
- Avoid overly long headings (under 70 characters ideal)
- Don\u2019t use headings for visual styling — use CSS
- Empty headings (<h2></h2>) are a bug; remove or populate

Common issues detected:
1. No H1: the page has no main heading, a major SEO and UX problem
2. Multiple H1s: historically strict violation; HTML5 allows in section context but most SEOs still recommend one per page
3. Skipped level: H2 followed by H4 without H3 — breaks outline logic
4. Duplicate headings: two sections with identical H2 text may confuse navigation
5. Empty heading: <h2></h2> with no text inside
6. Overly long heading: H1 above 70 characters may indicate lack of focus
7. Hidden heading: CSS display:none on headings — fine for accessibility tech, but may indicate overuse

Outline algorithm: HTML5 defines a document outline algorithm using heading levels and sectioning content. In practice, browsers and screen readers still primarily use explicit heading levels. Keep structure simple and explicit.

Tools and libraries: HTML5 Outliner extensions visualize heading structure. Accessibility testing tools (axe-core, WAVE) check heading issues as part of broader audits.

Compared to manually viewing page source and finding h1-h6 tags, this tool automates the check and flags common issues. Manual inspection works for single pages; bulk checking needs automation.

Compared to browser accessibility testing extensions (axe DevTools, WAVE), this tool focuses specifically on heading structure with clearer visualization. Full accessibility testing needs broader tools; for heading issues specifically, this tool is fast.

Compared to paid SEO platforms, this tool is free and focused. Platforms offer heading audits as part of broader packages but for single-page checks this tool is quicker.