Heading Hierarchy Checker
Paste HTML source code to check the heading hierarchy and get a visual outline of your document structure.
Reviewed by the ToolNestr Editorial Team — July 2026
How heading hierarchy analysis works
The checker parses pasted HTML with the browser's DOMParser and walks the DOM tree to find all h1 through h6 elements in document order. It builds an ordered list of every heading node, recording each heading's level (1–6) and text content. The analyzer then applies four validation rules: (1) exactly one h1 must exist, (2) heading levels must never increase by more than 1 (no skipped levels like h1 → h3), (3) no heading may have empty text content, and (4) heading order should be sequential without regressions.
A score is computed by subtracting penalty points from 100: −20 for missing or multiple H1s, −10 per skipped level, −5 per empty heading, and −5 per out-of-order regression. A score of 60+ is a passing grade. The document outline is rendered as a nested tree using the heading level to determine indent depth, giving you an instant visual representation of your page's logical structure.
Worked example
HTML headings: h1, h2, h2, h4, h3, h2
Common heading hierarchy issues
The most frequently found problems in heading structures across websites.
SEO Specialist
Validates heading structure during technical SEO audits to ensure optimal search engine understanding of page content.
Web Developer
Checks that dynamically generated templates produce valid heading hierarchies before deployment.
Content Writer
Ensures articles and blog posts follow proper heading structure for both readability and SEO.
Accessibility Auditor
Verifies that heading levels create a logical document outline that works with screen reader navigation tools.
| Level | Purpose | Example |
|---|---|---|
| H1 | Page title / main topic | "Complete Guide to SEO" |
| H2 | Major section | "On-Page SEO" |
| H3 | Sub-section under H2 | "Title Tags" |
| H4 | Detailed sub-section | "Optimal Title Length" |
| H5-H6 | Deeply nested content | Rarely used, for complex hierarchies |
How to use the Heading Hierarchy Checker
Paste HTML
Copy the HTML source code from your page and paste it into the input area.
Check hierarchy
Click Check hierarchy to analyze heading tags and generate a document outline.
Fix warnings
Review warnings for skipped levels, missing H1, or multiple H1 tags and update your HTML accordingly.
Tips for heading hierarchy
One H1 per page
Each page should have exactly one H1 that describes the main topic. Multiple H1 tags confuse search engines and screen readers.
Never skip levels
Always follow H1 with H2, H2 with H3, and so on. Skipping from H2 to H4 breaks the logical document structure.
Use headings for structure, not styling
Don't use heading tags just to make text bigger or bolder. Use CSS for styling and reserve headings for document structure.
Why heading hierarchy matters
Headings are the backbone of a well-structured document. They create a logical outline that helps search engines index content correctly and enables users, especially those using screen readers, to navigate efficiently. A clear hierarchy improves both user experience and search rankings.
Proper document outline
A proper document outline starts with a single H1, followed by H2s for main sections, H3s for subsections, and so on. This creates a tree structure that mirrors the content's logical organization. Think of it like a book: H1 is the title, H2s are chapter names, and H3s are section headings within chapters.
SEO impact
Search engines use heading tags to understand the relative importance of content sections. Pages with clear, hierarchical headings tend to rank better because the content structure is easier to parse. Proper use of heading keywords also signals relevance to search queries.
Accessibility
Screen readers allow users to navigate by heading levels, jumping from one section to another. A broken or missing heading hierarchy makes this navigation impossible, creating a poor experience for visually impaired users. WCAG guidelines require logical heading structure for compliance.
Frequently asked questions
What does the heading hierarchy checker do?
It parses pasted HTML, extracts all H1-H6 tags, and analyzes the heading structure for issues like missing H1, skipped levels, and multiple H1 tags.
Why is heading hierarchy important?
Headings create a document outline that helps search engines understand content structure and enables screen reader users to navigate efficiently.
What issues does it detect?
It detects missing H1, skipped heading levels (e.g., H1 to H3), multiple H1 tags, empty headings, and incorrect heading order.
What is considered a proper hierarchy?
A proper hierarchy follows H1 > H2 > H3 > H4 > H5 > H6 without skipping levels. Each section should have one H1 at the top.
Is my HTML sent to a server?
No. All processing happens in your browser. Nothing is uploaded or stored.
Do I need full HTML or just headings?
Paste any HTML content that contains headings. The checker parses the markup and finds all heading elements.
Can I check multiple pages at once?
No. You need to paste one HTML document at a time for analysis.
What does the overall score mean?
The score reflects the quality of your heading hierarchy. A passing score means no critical issues were found.
Does it check heading text content?
Yes. It flags empty headings (headings with no text content) as a warning.
How do I fix skipped heading levels?
Ensure that an H2 follows an H1, an H3 follows an H2, and so on. Do not jump from H1 to H3 or H2 to H4.