Skip to content

Header Tag Analyzer

Review H1–H6 heading structure in pasted HTML and create a readable outline.

Updated

What is the Header Tag Analyzer?

The Heading Tag Analyzer checks H1–H6 elements in pasted HTML and creates an outline with possible structure issues. It does not inspect rendered pages or determine search rankings or accessibility conformance.

Clear, descriptive headings help people navigate and understand a page. Heading structure is also useful to assistive technology. A skipped level or multiple H1 elements is not automatically an SEO error; review the document and rendered page in context.

This tool checks for:

  • Missing H1 — a prompt to check whether the main page topic is clearly identified
  • Multiple H1 tags — a prompt to review whether the structure is clear
  • Skipped heading levels — jumping from H1 to H3 breaks the document outline
  • Empty headings — invisible to users but still parsed by crawlers
  • Duplicate heading text — identical labels at the same level confuse navigation
  • Non-descriptive headings — headings that are too short to convey meaning

Paste HTML to review the markup you provide; this is not a complete accessibility or SEO audit.

How it works

Copy the full source of a page — or any HTML fragment — and paste it into the editor. The tool accepts anything from a complete <!DOCTYPE html> document to a snippet of component output. No preprocessing needed.

2. Headings are extracted automatically

A regex parser scans the HTML for every <h1> through <h6> element. For each heading it records:

  • Level (1–6)
  • Text content — inner HTML is stripped of all child tags, and HTML entities (&amp;, &nbsp;, etc.) are decoded
  • Line number — the approximate position in your source for easy cross-referencing
  • Indent depth — computed from a running ancestor stack so the visual tree reflects true nesting

3. Hierarchy is validated

The extracted heading list is checked for patterns you may want to review:

Rule Severity
No <h1> present Review
More than one <h1> Review
Heading level skipped (e.g. H1 → H3) Review
Empty heading element Review
H1 does not appear before other headings Warning
Heading text duplicated at the same level Warning
Heading text under 3 characters Warning
Heading text over 160 characters Warning

4. Review the visual report

Results are shown in three interchangeable views:

  • Tree — an indented outline where each heading is color-coded by level; rows with errors are highlighted red, warnings amber
  • List — a tabular view showing level, text, line number, and linked issue count for every heading
  • Outline — a plain-text representation you can copy directly into a content brief or site audit

5. Export your findings

Use the Copy outline button to grab the plain-text heading tree for a client report, or Download report to save a .txt file containing the full analysis: level counts, the complete outline, and every issue with its severity and description.

Examples

Simple blog post with correct hierarchy

A well-structured blog post with a single H1 and nested H2/H3 sections.

<h1>Ultimate Guide to Cold Brew Coffee</h1><h2>Equipment You Need</h2><h3>Grinders</h3><h3>Filters</h3><h2>Brewing Methods</h2><h3>Immersion Method</h3><h3>Slow Drip Method</h3><h2>Frequently Asked Questions</h2>
 
No issues detected. 8 headings found: 1x H1, 3x H2, 4x H3. Hierarchy is valid.

Page with skipped heading level

An H1 followed by H3; review whether the heading levels reflect the content structure.

<h1>Home Renovation Tips</h1><h3>Kitchen Upgrades</h3><h3>Bathroom Ideas</h3>
 
Review: H1 is followed by H3. "Kitchen Upgrades" — check the hierarchy in context.

Multiple H1 tags

A page with two H1 elements that may be worth reviewing for clear structure.

<h1>Company Name</h1><h2>Our Services</h2><h1>Contact Us</h1><h2>Get In Touch</h2>
 
2 H1 elements found. Review whether both headings clearly represent the page structure.

Fragment with no H1

A page section using H2–H4 headings but missing an H1 entirely.

<h2>What We Offer</h2><h3>Web Design</h3><h3>SEO Consulting</h3><h4>Technical Audits</h4>
 
No H1 found in the supplied fragment. Check the full page to see whether its main topic is clear.

Frequently asked questions

What is a header tag analyzer?

A heading tag analyzer reads supplied HTML and extracts <h1> through <h6> elements to help review structure. It can flag patterns for human review, but cannot determine whether headings are appropriate in context or predict search rankings.

Why does heading hierarchy matter for SEO?

Descriptive headings help readers and assistive technology understand how content is organized. There is no guarantee that a particular heading sequence improves rankings; use headings to reflect the content's structure.

Can a page have more than one H1 tag?

Yes. Multiple H1 elements are allowed in HTML. Whether they make sense depends on the page structure; aim for clear headings that help readers navigate. This analyzer flags multiple H1s as a prompt to review, not as a definitive SEO or accessibility failure.

What does "skipped heading level" mean?

A skipped level occurs when a heading jumps, for example from H1 to H3. Review whether the heading levels communicate the content hierarchy clearly; adding a heading solely to satisfy a sequence is not always the right fix.

Does this tool analyze live URLs or only pasted HTML?

This tool analyzes pasted HTML only — it does not fetch live URLs. To analyze a live page, view its source in your browser (Ctrl+U / Cmd+Option+U), select all, copy, and paste it here. This approach keeps all processing in your browser with no data sent to any server.

How do I get the HTML source of a live webpage?

Open the page in any modern browser, then press Ctrl+U (Windows/Linux) or Cmd+Option+U (Mac) to open the page source. Select all text with Ctrl+A / Cmd+A, copy it, and paste it into the analyzer. Alternatively, right-click on the page and choose "View Page Source" from the context menu.

Will this tool work on HTML fragments or component output?

Yes. The analyzer accepts any valid HTML — full documents, partial fragments, or raw component output. You do not need <!DOCTYPE html> or a <head> section. Simply paste whatever HTML you have and the tool will extract every heading element it finds.

What is the difference between heading level and heading depth?

Heading level is the absolute number defined by the tag: an <h3> is always level 3. Heading depth (or indent) is the position of a heading relative to its ancestors in the current document tree. For example, if your page only uses H1, H2, and H3, the H3 headings have a depth of 2 (two levels below the root H1) even though their absolute level is 3. The tree view in this tool uses depth to control visual indentation.

How do empty headings affect SEO and accessibility?

An empty heading — one with no visible text content — is invisible to sighted users but still appears in the document outline parsed by screen readers and crawlers. Screen reader users navigating by headings will encounter a blank entry, which is disorienting. Search engines may also interpret empty heading tags as low-quality markup. Empty headings should be removed or populated with descriptive text.

What is the plain-text outline used for?

The plain-text outline is an indented, human-readable representation of your heading structure — for example:

H1: Complete Guide to Home Brewing
H2: Equipment
H3: Kettles
H3: Fermenters
H2: Ingredients

It is useful for client reports, content briefs, editorial reviews, and site audits. You can copy it with one click or download a full analysis report as a .txt file.

Does heading order affect accessibility?

Headings provide useful navigation for many screen-reader users. Use them to represent the content's hierarchy, but a skipped number alone does not establish WCAG nonconformance. WCAG 2.1 Success Criterion 1.3.1 requires that information and relationships conveyed visually are programmatically determinable; evaluate the whole page, not this check alone.

Related tools

More utilities you might find handy.

SEO

Alt Text Checker

Review img alt attributes in pasted HTML for missing values and possible quality issues.
SEO

Canonical Tag Generator

Create a canonical link tag from a URL and review selected URL normalizations before use.
SEO

Hreflang Tag Generator

Draft reciprocal hreflang annotations for alternate-language pages in HTML, headers, or sitemaps.