Heading Structure Analyzer

Using the Heading Structure Analyzer

1. Paste your content - the textarea accepts raw HTML (with <h1> through <h6> elements) or Markdown (with #, ##, ### syntax). The analyzer auto-detects the format.
2. Click "Analyze" - the tool parses the input, extracts every heading, records its level and text, and builds a tree reflecting nesting by level.
3. Read the hierarchy tree - each heading appears at its nesting level, with warnings if the structure skips levels (e.g. H2 directly to H4) or contains multiple H1s.
4. Scan the issue panel - it highlights three classes of problem: multiple H1s, skipped levels, and empty or duplicate heading text.
5. Edit upstream and rerun - the output updates on each analyze click; iterate until the tree reads naturally as an outline of your content.

What the Parser Does

For HTML input, the analyzer uses the browser\'s DOMParser to produce a document fragment, then queries for all h1, h2, h3, h4, h5, h6 elements in document order. This catches headings inside <article>, <section>, and <main> wrappers, which a naive regex would miss. For Markdown input, it tokenizes line by line, matching ^#{1,6}\\s+ at line start to identify heading levels.

The hierarchy check walks the heading list in order, tracking the current level. A drop from H2 to H4 triggers a "skipped level" warning because it implies a missing H3 between them. Multiple H1s trigger a separate warning, since by HTML5 convention each document has a single H1 representing the main page topic - though HTML5\'s outline algorithm technically allows multiple H1s within <section> elements, browsers, screen readers, and search engines do not implement that outline algorithm. The practical rule remains: one H1 per page.

When to Run a Heading Audit

• Auditing an inherited site or CMS where previous authors used headings for styling rather than structure - often H3 appears as body emphasis or H1 on every section header.
• Checking accessibility - screen reader users navigate pages via heading lists (JAWS: Insert+F6, NVDA: H key), and broken hierarchy makes content unnavigable.
• Validating content migrations between CMSes where heading tag mapping can silently break (Markdown #### converting to H3 instead of H4 is a real bug class).
• Debugging why a page\'s rich snippet is missing - Google sometimes extracts table-of-contents sitelinks from heading structure and badly-structured pages lose that feature.
• Teaching content authors the difference between semantic structure and visual styling by showing them their own page\'s tree.

Heading Pitfalls in the Wild

• Using headings as styling shortcuts - "this section needs to look bigger, so I\'ll use H3 even though it is not a section heading" breaks the outline for everyone downstream.
• Empty headings - <h2></h2> from a CMS template bug shows up as a structural gap. Screen readers announce "heading level 2, blank."
• Duplicate heading text - three H2s all called "Overview" make it hard to navigate and suggest the author did not vary subsection labels.
• H1 inside <header> vs <main> - some templates put the site logo text in an H1 in the header and the article title in an H1 in the main, giving two H1s per page. Pick one (typically the article title).
• Skipping H1 entirely - starting a page at H2 happens on templates where the CMS inserts the title outside the content area and authors assume H2 is the top level. The page then has no H1.
• Headings nested inside interactive widgets - tabs, accordions, and modal dialogs sometimes contain H2s that are hidden by default. The DOM has them; the hierarchy check counts them; users may not see them. Consider whether they belong in the page outline at all.

What Headings Are For in HTML, A11y, and SEO

Headings serve three audiences. For CSS, they are typographic anchors with implied visual hierarchy. For assistive technology, they are the primary navigation mechanism: screen readers let users jump heading-to-heading with a keystroke and announce the level. For search engines, headings are a content-structure signal: Google Search Central says "use heading tags where it makes sense" and warns against using them purely for styling. Headings also feed Google\'s passage ranking, which surfaces specific sections of long pages in SERPs. WCAG 2.1 Success Criterion 1.3.1 requires semantic structure including correct heading hierarchy for AA conformance.

Alternatives and Complementary Checks

Browser extensions like axe DevTools, Lighthouse, and WAVE check heading hierarchy alongside dozens of other a11y issues. For crawling a whole site, Screaming Frog and Sitebulb extract heading data per URL. For live in-page debugging, Chrome DevTools\' Accessibility panel shows the computed tree. This analyzer wins on unpublished content or Markdown drafts; it does not cover other a11y issues, so pair with a full audit before launch.