Heading Structure Validator
Validate your page heading hierarchy for accessibility issues. Enter headings below or study the before/after examples to learn proper heading structure.
Validate Your Headings
Accepted formats: "h1 Page Title", "# Page Title", or "<h1>Page Title</h1>"
Before & After: Heading Structure
Compare a poorly structured heading hierarchy with a well-structured one. Proper heading order helps screen reader users navigate page sections efficiently.
Bad: Skipped Levels & Multiple h1s
Skipped heading level: jumped from h1 to h3
Skipped heading levels: jumped from h3 to h5
Skipped heading level: jumped from h2 to h4
Multiple h1 elements: only one h1 per page is recommended
Good: Sequential & Logical
Heading Structure Rules
1. One h1 per page
Each page should have exactly one h1 element that describes the main topic. This helps screen readers and search engines understand the page purpose.
2. Do not skip heading levels
Headings should follow a logical hierarchy: h1 then h2, h2 then h3, etc. Jumping from h1 to h3 creates a confusing document outline for assistive technology users.
3. Use headings for structure, not styling
Never choose a heading level based on its visual size. Use CSS to style headings appropriately while keeping the semantic hierarchy correct.
4. Make headings descriptive
Headings should clearly describe the content that follows. Avoid generic headings like "More Info" or "Click Here" that provide no context when read in isolation.