Skip to content

Header Tag Analyzer

Check H1–H6 heading hierarchy from pasted HTML to find SEO and accessibility issues instantly.

Updated

What is the Header Tag Analyzer?

The Header Tag Analyzer instantly checks the H1–H6 heading structure of any HTML page or fragment. Paste raw HTML and get a full hierarchy report: every heading level is visualized, structural violations are flagged with clear error messages, and an exportable plain-text outline is generated for your records.

Proper heading hierarchy is one of the most important — and most commonly broken — rules in both SEO and web accessibility. Search engines use your heading tree to understand page structure and topic depth. Screen readers rely on correct heading order to let users jump through sections efficiently. A single skipped level or a duplicate H1 can silently hurt your rankings and lock out assistive technology users.

This tool checks for:

  • Missing H1 — every page needs exactly one H1 as its primary topic
  • Multiple H1 tags — a critical error that dilutes topic authority
  • 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

No login, no file upload, no server round-trips. Paste HTML, get answers instantly.

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 against a rule set covering the most impactful structural issues:

Rule Severity
No <h1> present Error
More than one <h1> Error
Heading level skipped (e.g. H1 → H3) Error
Empty heading element Error
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 that jumps directly to H3, bypassing H2 — a common SEO and accessibility mistake.

<h1>Home Renovation Tips</h1><h3>Kitchen Upgrades</h3><h3>Bathroom Ideas</h3>
 
Error: Heading level skipped from H1 to H3 (missing H2). "Kitchen Upgrades"

Multiple H1 tags

A page template accidentally containing two H1 elements — a critical SEO error.

<h1>Company Name</h1><h2>Our Services</h2><h1>Contact Us</h1><h2>Get In Touch</h2>
 
Error: 2 H1 elements found. A page should have exactly one H1. Error: Extra H1 — "Contact Us".

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>
 
Error: No H1 found. Every page should have exactly one H1 that describes its main topic.

Frequently asked questions

What is a header tag analyzer?

A header tag analyzer is a tool that reads the HTML of a web page and extracts every <h1> through <h6> element to evaluate whether they follow a logical, hierarchical structure. It checks for common mistakes — like a missing H1, skipped heading levels, or duplicate headings — that negatively affect both search engine rankings and screen reader usability.

Why does heading hierarchy matter for SEO?

Search engines use heading tags to understand what a page is about and how its content is organized. The H1 communicates the primary topic; H2s represent major sections; H3s cover sub-topics within those sections, and so on. A broken hierarchy — for example, jumping from H1 directly to H3 — makes it harder for crawlers to interpret page structure, which can reduce how well the content ranks for its target keywords.

Can a page have more than one H1 tag?

Technically yes, but it is strongly discouraged. Modern HTML5 specifications allow multiple H1s when they are scoped to different <section> or <article> elements. In practice, however, most SEO authorities and accessibility guidelines recommend a single H1 per page because it clearly signals the page's primary topic to both search engines and screen reader users. Multiple H1s can dilute topical focus and confuse document navigation for assistive technology.

What does "skipped heading level" mean?

A skipped heading level occurs when a heading jumps more than one level at a time — for example, going from an H1 directly to an H3 without an H2 in between, or from an H2 to an H4. This breaks the document outline and is flagged as an error. The fix is to insert the missing intermediate level, or to reclassify the heading so the sequence is continuous (H1 → H2 → H3).

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?

Yes, significantly. Screen readers provide keyboard shortcuts to jump between headings, allowing users to skim a page without reading every word. When heading levels are skipped or out of order, this navigation breaks down — users may miss sections or become confused about where they are in the document. The WCAG 2.1 success criterion 1.3.1 (Info and Relationships) requires that the visual hierarchy of content be programmatically determinable, and a correct heading order is the primary way to satisfy this for long-form content.

Related tools

More utilities you might find handy.

SEO

Alt Text Checker

Scan pasted HTML for images missing alt attributes
SEO

Canonical Tag Generator

Generate accurate canonical link tags for any URL to optimize SEO and prevent duplicate content issues.
SEO

Free UTM Link Builder - Create Campaign URLs Instantly

Build UTM-tagged URLs with validation, linting, and parse existing links to edit parameters. No sign-up required.