Skip to main content

Web Tools

Heading Hierarchy Checker

Inspect an HTML heading outline and spot skipped levels.

Heading Hierarchy Checker tool

Loading tool…

Jump to a section

About This Tool

Headings give a page a visible and programmatic structure that helps readers scan sections and helps assistive-technology users navigate content. This checker extracts H1 through H6 elements from pasted HTML in document order, presents the outline as text, and highlights a small set of common structural issues. It is a focused review aid rather than an automated accessibility or SEO score.

How To Use It

  1. Paste the HTML source you want to inspect. The markup is parsed locally and is not rendered as page content.
  2. Review the extracted H1–H6 outline in the same order the elements appear in the document.
  3. Look for highlighted empty headings, an outline that starts below H1, or downward jumps that skip a level, such as H2 followed directly by H4.
  4. Use the result as a prompt for manual review. Choose heading levels to describe content hierarchy rather than to achieve a particular visual size.

Examples

Sequential section structure

H1 → H2 → H3 → H2 expresses a top-level page heading, a section, a subsection, and then a return to another section. The checker does not flag that sequence.

Skipped level

H1 → H2 → H4 produces a warning on the H4 because the outline moves two levels deeper at once. Review whether that H4 should be H3 or whether an intermediate section is missing.

Moving back up

H1 → H2 → H3 → H1 is not treated as a skipped-level problem. Moving to a higher-level heading can close nested sections; whether a second H1 is appropriate depends on the page structure and authoring context.

Empty heading

An element such as <h2></h2> is listed as an empty heading. Empty headings can create confusing navigation stops and usually deserve review.

Useful Notes

What a heading hierarchy represents

Heading rank communicates nesting: an H2 normally introduces a section under an H1, while an H3 normally introduces a subsection under an H2. The checker focuses on document order and rank changes; it cannot determine whether the wording accurately describes the surrounding content.

Why skipped levels are highlighted

A jump such as H2 to H4 can make the intended nesting harder to understand because H3 has been skipped. The tool highlights downward jumps greater than one level as review items. It does not flag jumps back upward, because returning from a subsection to a broader section is normal.

H1 is a review cue, not an SEO score

When the first heading is not H1, the checker suggests reviewing the outline. It does not claim that search rankings depend on a specific heading formula, nor does it enforce a one-H1-only rule. Semantic structure and clear content organization matter more than chasing a numeric score.

Parsing without rendering pasted markup

The browser's HTML parser reads the pasted string into a detached, inert template so the tool can query heading elements and text. Hanakash does not insert that markup into the live page, and pasted scripts are not executed as part of this inspection workflow.

Limits of automated heading checks

A mechanically sequential outline can still use vague, misleading, or purely decorative headings. Conversely, unusual document structures may need contextual judgment. This tool does not evaluate ARIA, landmarks, focus order, color contrast, screen-reader behavior, overall accessibility conformance, or full technical SEO.

FAQ

Does every page have to contain exactly one H1?

This checker does not enforce that rule. It flags only when the first extracted heading is below H1. Review H1 usage according to the actual document structure and your publishing framework rather than treating heading count as an automatic pass/fail score.

Is H2 followed by H4 always invalid?

The checker treats it as a potential hierarchy issue because a level is skipped. Review the content context before changing markup; automated checks cannot understand the author's intended section relationships.

Can I use headings just to make text larger?

Heading elements should represent section structure. Use CSS for visual size and weight rather than selecting H1–H6 solely for appearance.

Does the tool execute pasted HTML or JavaScript?

No. It parses the source in a detached, inert template to extract heading elements and text and does not render the pasted markup into the Hanakash page.

Does a clean result mean my page is accessible?

No. It only means this limited set of heading checks found no issue. Accessibility requires many additional checks plus human review.