Heading Structure Analyzer
Fetch or paste HTML, extract h1–h6, visualize the outline and check heading order and skipped levels.
What we check
- Presence of a top-level
h1. - Sequential order (no level skips, e.g.,
h2 → h4). - Empty or overly short/long headings.
- Visual outline of
h1–h6in document order.
Results
Enter a URL or paste HTML, then click Analyze.
Official guidance & references
- web.dev: Headings (HTML learning)
- MDN: HTML Heading elements
- WCAG 2.1: Headings and Labels (2.4.6)
- Lighthouse Accessibility guidance
FAQs
HTML allows multiple
h1s, but a single, clear page title is easier for users and tools. Focus on clarity and hierarchy.
Don’t jump from
h2 to h4 without an h3 sibling level in between. Keep levels increasing or decreasing by one as you nest sections.
Headings primarily improve accessibility and comprehension. Clear structure can indirectly help SEO by making content easier to parse and link to.
Use semantic heading tags (
h1–h6) for structure, not just CSS styling. Screen readers and tools rely on headings for navigation.