Analyze an HTML Heading Outline
Paste markup and get its H1-H6 outline, skipped-level and duplicate-heading warnings, plus literal element/tag counts.
About this tool
html-outline-analyzer reads pasted HTML and reports two things that are useful for SEO, accessibility reviews, documentation cleanups, and migrations: the H1-H6 heading outline, and the element tags used in the source.
The outline keeps document order and records each heading's level, text, id, line/column, and hidden state. It also flags common structural problems: missing H1, multiple H1s, skipped heading levels, empty headings, duplicate heading text, and headings hidden with markup such as hidden, aria-hidden="true", or inline display:none.
Worked example
Input:
<h1>Getting started</h1>
<h2 id="install">Install</h2>
<p>Text</p>
<h3>macOS</h3>
<h3>Windows</h3>
<h2>Configure</h2>
<h4>Advanced flags</h4>
Default output includes:
HTML OUTLINE — 6 heading(s)
Levels: h1:1 h2:2 h3:2 h4:1
OUTLINE (6 headings)
1 h1 Getting started
2 h2 Install #install
4 h3 macOS
5 h3 Windows
6 h2 Configure
7 h4 Advanced flags
The skipped h2 → h4 jump is listed in the issues section, and the tag-count section shows how many h1, h2, p, and other element tags were written.
Options and limits
- Output can be
tree,markdown,json, orcsv. - Minimum/maximum heading level filter the rendered outline without changing the total heading counts.
- Include outline issues toggles the issue section.
- Include tag counts toggles the total/distinct tag count section.
- Tag count rows limits the number of distinct tag names listed, from 1 to 500.
- The input limit is 5 MB and the first 5,000 headings are recorded.
- Counts are based on literal opening/self-closing tags in the source. The scanner does not invent implied DOM elements such as browser-added
<tbody>or<body>. - It does not execute JavaScript, fetch linked pages, apply CSS, validate full HTML conformance, or compute the browser accessibility tree.
FAQ
Is this the same as a browser DOM outline?
No. It scans the literal HTML you paste. That means tag counts reflect the source, not the DOM after a browser inserts implied elements or JavaScript mutates the page. This is useful for audits of generated markup and templates.
Does it use the old HTML5 outline algorithm?
No. The old sectioning algorithm is not implemented by browsers or assistive technology in a way authors can rely on. This tool reports the practical H1-H6 heading sequence and flags skipped levels.
Why is a hidden heading reported?
Hidden headings can affect audits and screen-reader behavior depending on how they are hidden. The analyzer marks headings with hidden, aria-hidden="true", or inline styles such as display:none and visibility:hidden so you can review them explicitly.
Can it analyze a live URL?
No. Paste the HTML source. Keeping the tool paste-only avoids network fetching, login/session problems, and server-side rendering differences. Use your browser's “View Source” or a crawler to collect markup first.
Is my HTML uploaded?
No. The Rust scanner runs locally in the WebAssembly page and in the CLI. Your markup is processed in your browser or terminal.
Developer & Automation Access
Run it from the terminal
Same engine as this page, headless — via the gizza CLI:
gizza tool html-outline-analyzer '<!doctype html>
<html>
<body>
<h1>Guide</h1>
<h2 id="install">Install</h2>
<p>Steps...</p>
<h3>macOS</h3>
<h2>Configure</h2>
</body>
</html>'New to the CLI? Get gizza →
Open it by URL
Pre-fill and auto-run this tool with query parameters — the names match the API/CLI:
https://gizza.ai/tools/html-outline-analyzer/?html=%3C%21doctype%20html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A%3Ch1%3EGuide%3C%2Fh1%3E%0A%3Ch2%20id%3D%22install%22%3EInstall%3C%2Fh2%3E%0A%3Cp%3ESteps...%3C%2Fp%3E%0A%3Ch3%3EmacOS%3C%2Fh3%3E%0A%3Ch2%3EConfigure%3C%2Fh2%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E&format=tree&min_level=1&max_level=6&include_issues=true&include_counts=true&top_tags=20Machine-readable descriptor: tool.json — title + parameters JSON Schema for agents.