Heading Hierarchy
What is heading hierarchy and how does it affect screen readers?
What is heading hierarchy?
Heading hierarchy refers to the logical nesting of HTML heading elements (H1 through H6) on a page. A well-structured hierarchy starts with a single H1, followed by H2s for major sections, H3s for subsections, and so on without skipping levels. Screen readers use headings as a navigation shortcut, allowing users to jump between sections.
Heading hierarchy is the logical nesting of HTML heading elements from H1 through H6 on a page. Proper hierarchy starts with a single H1 and nests subsequent headings sequentially without skipping levels, enabling screen reader users to navigate by section and helping search engines understand content structure.
Why does heading hierarchy matter?
Screen reader users frequently navigate pages by jumping from heading to heading. When headings skip levels (e.g., H1 directly to H3), users lose their sense of the page's structure and may miss entire sections. Search engines also use heading hierarchy to understand content organization, topic relevance, and the relative importance of each section.
18.4% of home pages had skipped heading levels, breaking the logical document outline for assistive technology users.
How to fix it
- Ensure every page has exactly one H1 element that describes the primary topic of the page.
- Nest headings sequentially — H2 sections under H1, H3 subsections under H2, and so on. Never skip a level (e.g., do not jump from H2 to H4).
- Do not use heading tags for visual styling. If you need larger or bolder text, use CSS classes instead of misusing heading elements.
- Review your page outline using a browser extension like HeadingsMap or the W3C validator to visualize the heading tree.
Bad seed, good seed.
<h1>Our Services</h1>
<h3>Web Design</h3>
<h3>SEO Audits</h3>
<h5>Technical SEO</h5><h1>Our Services</h1>
<h2>Web Design</h2>
<h2>SEO Audits</h2>
<h3>Technical SEO</h3>Frequently asked questions
Can I have more than one H1 on a page?
HTML5 technically allows multiple H1s within sectioning elements, but for accessibility and SEO best practice, use a single H1 per page that clearly states the main topic.
Does heading hierarchy affect SEO rankings?
Yes. Search engines use headings to understand content structure and topic hierarchy. A clear heading outline helps search engines identify your main topic and subtopics, improving relevance signals.
What happens if I skip heading levels?
Skipping levels (like jumping from H2 to H4) confuses screen reader users who navigate by heading level and breaks the logical document outline that assistive technologies rely on.
Related guides
H1 Structure
The H1 tag is the primary heading on a page and serves as the main content title visible to users. It signals to search engines the most imp...
Read more → AccessibilityARIA Violations
ARIA (Accessible Rich Internet Applications) attributes provide extra semantic information to assistive technologies when native HTML elemen...
Read more → SEOTitle Tags
The title tag is the HTML <title> element that defines the page's title in the browser tab and, most importantly, as the clickable headline...
Read more →Scan your site for accessibility issues
Find and fix these issues automatically with eiSEO.
50 pages free · No credit card · Results in under 2 minutes