Heading Structure Checker
Paste HTML or upload a file. Color-coded indented outline, level-skip detection, empty / hidden / too-long warnings, document outline algorithm, eight curated best-practice tips, and compare-two-pages diff mode.
Source HTML
Paste the full HTML of a page, drop a file in, or load a sample. Live URL fetching is blocked by browser CORS — copy a 'View source' result instead.
0 charsLive URL fetching disabled (CORS)
Heading outline
Source order, indented per level — colour-coded H1 to H6.
Paste HTML above to render the outline.
HTML5 document outline
What screen readers and the HTML5 outline algorithm see — every untitled section is a missed wayfinding signal.
Outline appears once HTML is parsed.
Statistics
Statistics appear once headings are detected.
Issues
SEO + a11y checks. Errors first, then warnings, info, then passes.
Single H1
Every page should declare exactly one H1.
Best practices
Heading habits that please both screen readers and search engines.
- Use exactly one H1 per page — it should mirror the page title.
- Use H2 for main sections and H3 for their subsections.
- Never skip levels (H2 → H4 is a navigation cliff).
- Keep headings descriptive — 5 to 12 words is a sweet spot.
- Place keywords naturally; don't stuff.
- Use CSS for visual hierarchy — don't promote a <div> to look like a heading.
- Make headings unique within a page so each landmark is distinct.
- Avoid headings inside hidden containers (display:none, hidden, aria-hidden="true").