Skip to content

Heading Structure Analyzer

Analyze the heading structure of any HTML document. The tool visualizes your heading tree, flags skipped levels (e.g., H1 to H3), detects missing or multiple H1s, and identifies headings used for styling instead of structure.

Why This Matters

Headings are the backbone of page navigation for screen reader users. Users navigate by jumping between headings to understand page structure. Skipped heading levels (e.g., H1 to H3) or multiple H1s break this navigation model. WCAG 2.1 requires logical heading order (1.3.1, 2.4.6).

How to Use This Tool

  1. 1

    Paste HTML

    Paste your full HTML document or a section of markup into the textarea.

  2. 2

    View heading tree

    The tool visualizes your heading hierarchy as an indented outline.

  3. 3

    Review issues

    Skipped levels, missing H1s, multiple H1s, and empty headings are flagged.

  4. 4

    Fix and re-check

    Adjust your HTML and paste again to verify your fixes.

Frequently Asked Questions

While HTML5 allows multiple H1s, best practice is one H1 per page. Multiple H1s can confuse screen reader users who rely on headings for navigation. The W3C recommends a single H1 as the main heading.

Related Tools

Contrast Checker

Check WCAG 2.1/2.2 contrast ratios for text and UI components. Supports AA and AAA levels with live preview.

WCAG Checklist

Interactive checklist with all 86 WCAG 2.2 success criteria. Track progress, filter by level, and export your audit results.

Form Checker

Check HTML forms for missing labels, improper associations, and other WCAG form accessibility violations.

HTML Scanner

Paste HTML and get an instant accessibility audit. Checks for missing alt text, ARIA issues, semantic HTML problems, and more.