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.
Key statistics
18.4% of home pages had skipped heading levels, breaking the logical document outline for assistive technology users.
Source: WebAIM Million
How to fix it
-
1
Ensure every page has exactly one H1 element that describes the primary topic of the page.
-
2
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).
-
3
Do not use heading tags for visual styling. If you need larger or bolder text, use CSS classes instead of misusing heading elements.
-
4
Review your page outline using a browser extension like HeadingsMap or the W3C validator to visualize the heading tree.
Code example
<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
Related topics
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 important topic of the page. Best practice is to have exactly one H1 per page that closely aligns with the title tag but is written for the on-page reading experience rather than search result display.
ARIA Violations
ARIA (Accessible Rich Internet Applications) attributes provide extra semantic information to assistive technologies when native HTML elements are insufficient. ARIA violations occur when these attributes are used incorrectly — for example, applying an invalid role, using aria-labelledby to reference a non-existent ID, or adding redundant ARIA roles to elements that already have implicit semantics.
Title 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 in search engine results pages (SERPs). It is widely considered the single most important on-page SEO element because it directly tells search engines and users what the page is about.
Scan your site for accessibility issues
eiSEO automatically detects and helps you fix issues like this across your entire site.