Heading Structure Checker
Inspect H1-H6 heading order in HTML and detect skipped levels.
Back to all tools on ToolForge
About Heading Structure Checker
This heading structure checker inspects H1 to H6 order in HTML and highlights skipped heading levels. It generates a report showing the heading hierarchy and warns about accessibility issues.
It is useful for content audits, accessibility reviews (WCAG compliance), on-page SEO checks, and ensuring consistent document structure for screen reader users.
Heading Hierarchy Best Practices
Correct structure:
<h1>Page Title</h1>
<h2>Main Section</h2>
<h3>Subsection</h3>
<h3>Another Subsection</h3>
<h2>Another Main Section</h2>
<h3>Subsection</h3>
<h4>Deep nesting</h4>
Incorrect - skipped level:
<h1>Page Title</h1>
<h2>Main Section</h2>
<h4>Skipped H3!</h4> <!-- WARNING -->
Incorrect - multiple H1s:
<h1>First Title</h1>
<h1>Second Title</h1> <!-- WARNING -->
WCAG Heading Requirements
| Criterion | Level | Requirement |
|---|---|---|
1.3.1 | A | Info and Relationships - headings convey structure |
2.4.6 | AA | Headings and Labels - descriptive headings |
2.4.10 | AAA | Section Headings - use headings in mobile contexts |
1.4.10 | AA | Reflow - headings visible at 320px width |
Common Heading Issues
| Issue | Impact | Fix |
|---|---|---|
| Skipped level (H2→H4) | Screen reader confusion | Use sequential levels |
| Multiple H1 tags | SEO dilution, unclear structure | Use one H1 per page |
| No H1 tag | Missing page title | Add descriptive H1 |
| Empty headings | Wasted navigation points | Remove or fill content |
| Headings for styling | Misleading structure | Use CSS for styling |
| Non-descriptive text | Poor navigation | Use meaningful headings |
Heading Structure for SEO
SEO Best Practices:
1. One H1 per page - include primary keyword
2. H2s for main topics - include secondary keywords
3. H3-H6 for subsections - support topic hierarchy
4. Keep headings concise (20-70 characters)
5. Make headings descriptive and unique
6. Include keywords naturally, don't stuff
7. Match search intent in headings
Example SEO-friendly structure:
<h1>Complete Guide to JavaScript Arrays</h1>
<h2>What Are Arrays?</h2>
<h3>Array Syntax</h3>
<h3>Creating Arrays</h3>
<h2>Array Methods</h2>
<h3>map() Method</h3>
<h3>filter() Method</h3>
<h3>reduce() Method</h3>
<h2>Common Array Operations</h2>
<h3>Adding Elements</h3>
<h3>Removing Elements</h3>
Frequently Asked Questions
- What is proper heading hierarchy?
- Proper heading hierarchy follows a logical order: H1 for page title (one per page), H2 for main sections, H3 for subsections, H4-H6 for deeper nesting. Never skip levels (e.g., H2 to H4). This structure helps screen readers navigate content and improves SEO.
- Why is heading structure important for accessibility?
- Screen reader users navigate by headings to understand page structure and jump to sections. Skipped levels (H2 to H4) confuse navigation. Proper hierarchy (WCAG 1.3.1) ensures all users can understand content organization. Headings should describe content, not just style.
- How many H1 tags should a page have?
- Best practice is one H1 per page, representing the main topic/title. While HTML5 allows multiple H1s (one per section), screen readers and SEO tools work best with a single H1. Use H2-H6 for subsections. Think of H1 as the page title in a document outline.
- What are common heading mistakes?
- Common mistakes: skipping levels (H2 to H4), using headings for styling only, multiple H1s, empty headings, headings that don't describe content, using bold/large text instead of proper heading tags. Always use heading tags for structure, CSS for visual styling.
- How does heading structure affect SEO?
- Search engines use headings to understand content hierarchy and importance. H1 carries most weight, followed by H2, etc. Proper structure helps crawlers understand page topics and section relationships. Include relevant keywords naturally in headings, but prioritize user readability.
- What is WCAG requirement for headings?
- WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) requires headings to be used correctly. Criterion 2.4.6 (Headings and Labels) requires descriptive headings. Criterion 2.4.10 (Section Headings) recommends section headings in mobile contexts. Proper heading order is essential for AA compliance.