What This Tool Does
Paste any HTML document or page fragment and the extractor finds every heading tag from<h1> through <h6>. The results are displayed as a visual tree — indented by level — so you can read the document outline at a glance, the same way a screen reader or search engine crawler would interpret it. Warnings fire automatically if you have no H1, multiple H1s, or skipped heading levels that break the expected hierarchy.
How to Use
- Paste your HTML markup into the input panel.
- Click Extract Headings to generate the visual outline.
- Read the indented tree to verify the logical flow of the document structure.
- Check the stats bar for H1 count, H2/H3 counts, and any skipped level warnings.
- Click Copy as Outline to export the hierarchy as indented Markdown-style text.
Frequently Asked Questions
Why do headings matter for SEO?
Search engines use heading tags to understand the topic hierarchy of a page. The H1 signals the primary subject, while H2s and H3s define sub-topics and supporting sections. A well-structured heading outline helps Google accurately index your content and surface the right sections in featured snippets. Beyond rankings, a logical heading structure also improves dwell time because users can scan the page quickly and jump to the section they need — a behavioral signal that indirectly reinforces relevance.
How many H1 tags should a page have?
The HTML5 specification technically allows multiple H1 elements when each is scoped to a distinct sectioning element like <article> or <section>. In practice, however, most SEO guidance recommends exactly one H1 per page — a single, clear statement of the page's primary topic. Having zero H1s leaves search engines without a strong signal for the page subject. Having multiple H1s at the same document level dilutes that signal and can confuse both crawlers and screen reader users who rely on the H1 to understand what the page is about before reading further.
What are skipped heading levels and why do they matter?
A skipped level means the heading hierarchy jumps from, say, H2 directly to H4, omitting H3. This breaks the logical nesting of the document outline. For screen reader users, skipped levels are disorienting — assistive technologies allow users to navigate by heading level, and a gap implies a structural relationship that doesn't exist. For SEO, Google's John Mueller has noted that while skipped levels aren't a direct ranking penalty, they are a sign of poorly organized content that may be harder to parse correctly. Fixing skipped levels is low-effort and improves both accessibility and content clarity.
How do I fix a broken heading structure?
Start by copying the outline from this tool and reading it as a table of contents. Every H2 should be a major section of the H1 topic; every H3 should be a sub-point of the H2 above it. If a heading is skipped, either insert the missing level or demote the out-of-sequence heading to fit the correct slot. If there are multiple H1s, pick the one that best describes the whole page and reclassify the rest as H2s. Remember: heading levels are for document structure, not visual styling — use CSS classes if you want a visually large heading without changing its semantic level.