Web Tools
Heading Hierarchy Checker
Inspect an HTML heading outline and spot skipped levels.
HTML is parsed locally as an inert document for inspection. Hanakash does not render or execute pasted scripts.
Outline summary
4 headings found · 1 potential issue
- H1Product documentation
- H2Getting started
- H4Installation details
Heading level jumps from H2 to H4.
- H2API reference
What this check covers
It flags empty headings, a document outline that begins below H1, and downward jumps such as H2 → H4. It does not claim that a page is fully accessible or that every flagged structure is invalid in every context; review headings against the actual content hierarchy.
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
- Paste the HTML source you want to inspect. The markup is parsed locally and is not rendered as page content.
- Review the extracted H1–H6 outline in the same order the elements appear in the document.
- 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.
- 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 DOMParser reads the pasted string into a separate document so the tool can query heading elements and text. Hanakash does not insert that markup into the live page with innerHTML, 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 into a separate document 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.
Related Tools
Color Contrast Checker
Check WCAG text contrast ratios for two web colors.
HTML Entity Encoder / Decoder
Convert text to and from HTML entities directly in your browser.
URL Parser & Inspector
Inspect URL components and query parameters.
CSS Unit Converter
Convert relative CSS units with the context that determines their real size.