Heading levels exist to describe a document's structure the way a table of contents does, with each level nested inside the one above it. A page that jumps levels or duplicates its top level heading is not just a cosmetic slip, it actively breaks the outline that both a screen reader user and a search engine rely on to understand which sections are subordinate to which.
Parsing happens with the browser's own DOMParser, entirely in your browser, so a draft page's markup never has to leave your machine before you decide it is ready.
Why a heading structure analyzer checks for skipped levels
A correct heading hierarchy nests one level inside the next without gaps, an h3 appearing under an h2, an h4 appearing under that h3, and so on. Skipping straight from an h2 to an h4 with no h3 in between removes a level of the outline that a screen reader user, who often navigates a page by jumping between headings rather than reading linearly, would otherwise use to understand how a subsection relates to the section above it.
This does not mean every page needs every level from h1 to h6. A short page might reasonably use only h1 and h2. The rule is about not skipping ahead within whatever levels the page does use, not about needing to use them all.
One h1, and why more than one is a problem worth fixing
The HTML specification technically allows more than one h1 on a page, particularly under the older idea of sectioning content each starting its own outline. In practice, browsers never implemented that multiple outline model, and both accessibility guidance and search engine documentation now converge on a single, simple rule: one h1 per page, describing what the whole page is about, with everything else nested underneath it as h2 and lower.
A page with zero h1 elements leaves both a screen reader user and a search engine without the single clearest signal of what the page is actually about. A page with several h1 elements creates ambiguity about which one is the real topic, which is functionally similar to having none at all since neither a human skimming headings nor an automated system can be confident which one to trust.
- Exactly one h1 per page, stating what the page is about.
- Do not skip a level going deeper, for example h2 straight to h4.
- It is fine to skip a level coming back up, for example h4 back to h2 to start a new section.
- Heading levels describe structure, not visual size. Style headings with CSS, not by picking a lower level for a smaller look.
Heading level hierarchy is not about font size
A heading level hierarchy is a structural signal, not a styling tool. Choosing h3 instead of h2 because the h3 style happens to look right in a particular spot on the page produces a document whose visual appearance is correct and whose actual structure is wrong, and a screen reader has no way to tell the difference since it reads the level, not the rendered size.
If a heading needs to look smaller or larger than its correct level implies, that is what CSS is for. Restyle the element rather than reaching for a heading tag chosen for its default appearance instead of its actual place in the outline.
How this tool builds the h1 to h6 outline checker result
The pasted HTML is parsed with the browser's built in DOMParser into a real document, then every h1 through h6 element is walked in document order, which is the same order both a screen reader's heading navigation and a search engine's structural parsing would encounter them in. Each heading's level and trimmed text content are recorded, and the sequence of levels is checked step by step for a skip going deeper.
Because this is a genuine DOM parse, headings that are visually hidden with CSS but still present in the markup are still counted, since they remain part of the accessibility tree even when a sighted user never sees them. If a heading is meant to be entirely absent from both sighted and assistive technology users, it needs to be removed from the markup itself, not just hidden visually.
Reading the outline this heading structure analyzer produces
The output is presented as an indented outline, mirroring how a table of contents would nest the same headings, with each flagged skip or duplicate h1 called out directly against the heading where it occurs rather than buried in a separate summary. This makes it straightforward to jump to the exact spot in your markup that needs a fix.
Running the check again after editing is the fastest way to confirm a fix actually resolved the flagged issue rather than just moving it, since skipped heading levels fixed in one place sometimes reveal a second one further down the same document that a naive first fix does not address.
How to analyze a page's heading structure
- 1
Paste the page HTML
Copy the page's HTML source, or the body content containing the headings, and paste it in.
- 2
Run the analysis
Press analyze to parse the markup and build the h1 through h6 outline in document order.
- 3
Review the flags
Check for a missing or duplicate h1 and any point where a level is skipped going deeper.
- 4
Fix and recheck
Adjust the markup and run the analyzer again to confirm the flagged issues are actually resolved.
Related tools worth bookmarking
Sources and further reading
- MDN: DOMParserThe browser API this tool uses to parse pasted HTML into a real document structure.developer.mozilla.org
- W3C WAI: Headings tutorialThe accessibility guidance behind a correct, non skipping heading level hierarchy.w3.org
- Google Search Central: SEO starter guideGoogle's own guidance on using heading tags to describe a page's structure to crawlers.developers.google.com
Frequently asked questions
Common questions about the heading structure analyzer.
In practice, no. Although the HTML specification once described a sectioning content model that permitted multiple h1 elements, browsers never implemented that model, and both accessibility and search engine guidance now converge on exactly one h1 per page. Treat more than one as a problem to fix rather than a valid structural choice.
Going from a higher level heading directly to a lower one deeper than one step, such as an h2 followed immediately by an h4 with no h3 between them. Going back up, for example from an h4 to a new h2 to start another section, is completely normal and is not flagged as a skip by this heading structure analyzer.
No. A short page might only need an h1 and a couple of h2 sections, and that is entirely correct. The rule this tool checks is about not skipping ahead within whatever levels a page actually uses, not about needing to reach h6 or use every level available.
Because a heading hidden only with CSS is still present in the underlying markup and the accessibility tree, so a screen reader user still encounters it even though sighted users do not see it rendered. This tool parses the actual DOM structure, which reflects what assistive technology experiences rather than only what is visually displayed.
No. Heading levels are a structural signal describing how sections nest inside one another, not a font size control. If a correctly leveled heading looks wrong visually, restyle it with CSS rather than choosing a different level purely for its default appearance, since a screen reader reads the level, not the rendered size.