Heading Structure Checker

What is Heading Structure?

HTML headings (h1 through h6) create a hierarchical outline of a page's content. A proper heading structure is essential for accessibility, as screen reader users rely on headings to navigate and understand page organization. Search engines also use heading structure to understand content hierarchy.

Heading Rules Checked

• Single h1: Each page should have exactly one h1 element that describes the page's main topic
• No skipped levels: Headings should not skip levels (e.g., h2 directly to h4). Each heading should be at most one level deeper than the previous
• Logical hierarchy: Headings should form a logical tree structure, like an outline or table of contents
• Non-empty headings: Every heading element should contain descriptive text content
• Starting level: The first heading in the document should be an h1

WCAG Guidelines

• WCAG 1.3.1 (Info and Relationships): Information and structure conveyed through presentation must be programmatically determinable
• WCAG 2.4.1 (Bypass Blocks): Headings allow users to skip to relevant sections
• WCAG 2.4.6 (Headings and Labels): Headings should describe the topic or purpose of the content
• WCAG 2.4.10 (Section Headings): Section headings are used to organize content (AAA)

Why Heading Structure Matters

• Screen readers: Users navigate by heading level, jumping between sections quickly
• SEO: Search engines use heading hierarchy to understand content importance and relationships
• Readability: A clear heading structure makes content scannable for all users
• Document outline: Properly nested headings create a meaningful table of contents

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.