Every well-structured web page relies on headings to break content into scannable, meaningful sections. Heading hierarchy refers to the practice of using HTML heading elements (<h1> through <h6>) in a sequentially nested order—much like chapters, sections, and sub-sections in a book. An <h1> represents the top-level topic, <h2> elements represent major sections within that topic, <h3> elements represent sub-sections within an <h2>, and so on. When this nesting is logical and consistent, the headings form an outline that communicates the page's structure to both humans and machines.
A correct heading hierarchy never skips levels going downward. You wouldn't jump from an <h2> to an <h4> without an intervening <h3>, because that creates a gap in the outline that confuses users who depend on it for navigation. Heading hierarchy is one of the most fundamental aspects of semantic HTML and plays a central role in accessibility audits, screen-reader usability, and overall content quality.
Why heading hierarchy matters
Impact on screen-reader users
Screen readers allow users to pull up a list of all headings on a page and jump directly to the section they need. This "headings navigation" mode is one of the most common strategies blind and low-vision users employ. When headings are skipped or misused—for example, choosing an <h3> because its default styling looks right rather than because it logically follows an <h2>—the resulting outline is broken. Users may assume content is missing, or they may struggle to understand the relationship between sections.
Impact on SEO and machine readability
Search engine crawlers parse heading hierarchy to understand a page's topic structure. A clean outline helps search engines index content correctly and can influence how rich snippets and page summaries are generated.
Impact on cognitive accessibility
Sighted users also benefit from a clear heading hierarchy. People with cognitive disabilities, attention difficulties, or those simply scanning a long article rely on headings to orient themselves. A logical structure reduces cognitive load and makes content easier to consume.
What goes wrong without it
- Assistive technology users encounter a confusing, broken outline.
- Automated accessibility audits (using WCAG 2.2 Success Criterion 1.3.1 – Info and Relationships, and best-practice checks like those in axe-core or Rocket Validator) flag skipped heading levels as issues.
- HTML validators may not flag heading order as a syntax error, but accessibility-focused linting tools will.
How heading hierarchy works
The six heading levels
HTML provides six heading elements: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. They represent a strict hierarchy from most important to least important. Each page should typically have one <h1> (the page title or main topic), followed by <h2> elements for major sections, <h3> for subsections, and so on.
Nesting rules
The key rule is straightforward: do not skip heading levels when descending. An <h2> can be followed by an <h3>, but not directly by an <h4>. When moving back up the hierarchy—for instance, starting a new major section—you can jump back to a higher level (e.g., from <h4> back to <h2>).
Headings and landmark roles
Heading hierarchy works hand-in-hand with landmark roles. A <main> element typically contains the primary heading structure, while <nav>, <aside>, and <footer> may have their own headings. Each landmark's headings should still respect the overall page hierarchy or clearly establish their own context through accessible names.
Styling versus semantics
A common mistake is selecting heading levels based on visual appearance. If you want an <h2> to look smaller, use CSS—don't reach for an <h4>. Heading level must always reflect the document's logical structure, not the desired font size.
Code examples
Bad example — skipped heading levels
<body>
<main>
<h1>Cooking Guide</h1>
<h4>Choosing Ingredients</h4>
<p>Start with fresh, seasonal produce.</p>
<h2>Preparation Techniques</h2>
<h6>Knife Skills</h6>
<p>Learn basic cuts like julienne and brunoise.</p>
</main>
</body>
In this example, the hierarchy jumps from <h1> directly to <h4>, skipping <h2> and <h3>. Later, it jumps from <h2> to <h6>, skipping three levels. Screen readers will present a broken outline, and accessibility audits will flag every skipped level.
Good example — logical heading hierarchy
<body>
<main>
<h1>Cooking Guide</h1>
<h2>Choosing Ingredients</h2>
<p>Start with fresh, seasonal produce.</p>
<h3>Vegetables</h3>
<p>Look for vibrant color and firm texture.</p>
<h3>Proteins</h3>
<p>Select cuts appropriate for your cooking method.</p>
<h2>Preparation Techniques</h2>
<h3>Knife Skills</h3>
<p>Learn basic cuts like julienne and brunoise.</p>
</main>
</body>
Here each heading level follows logically from the one above. The page outline is clear: the <h1> introduces the guide, <h2> elements define major sections, and <h3> elements break those sections into sub-topics. A screen reader's heading list would present a perfectly navigable tree.
Bad example — headings chosen for styling
<h1>Our Services</h1>
<h5 class="small-heading">Web Design</h5>
<p>We build beautiful, responsive websites.</p>
<h5 class="small-heading">SEO</h5>
<p>We optimize your content for search engines.</p>
Good example — correct level with CSS for styling
<h1>Our Services</h1>
<h2 class="small-heading">Web Design</h2>
<p>We build beautiful, responsive websites.</p>
<h2 class="small-heading">SEO</h2>
<p>We optimize your content for search engines.</p>
.small-heading {
font-size: 1rem;
font-weight: 600;
}
The visual result can be identical, but the semantic structure is now correct. The <h2> elements properly sit one level below the <h1>, and the .small-heading class handles the desired appearance.
Maintaining a clean heading hierarchy is one of the simplest yet most impactful things you can do for accessibility. It costs nothing extra in development time, passes automated checks, and dramatically improves the experience for anyone navigating your content with assistive technology—or simply trying to scan the page quickly.
Related terms
Help us improve this glossary term
Scan your site
Rocket Validator scans thousands of pages in seconds, detecting accessibility and HTML issues across your entire site.