Français

<h1>

The heading hierarchy that 90% of sites get wrong

— 1 min read

  • HTML
  • accessibility
  • semantics
  • text

<h1> to <h6> — Headings

The <h1> to <h6> elements define six hierarchical heading levels. <h1> is the page's main title, <h2> the major sections, and so on. The hierarchy must be continuous: no <h4> after an <h2> without an <h3> in between.

When to use it

You want to structure your content into sections and sub-sections. Each page has a single <h1>. The <h2> elements split major topics, <h3> elements split sub-topics. Think of the table of contents your headings generate.

What you gain

Accessibility: screen readers let users navigate by headings. A user can list all <h2> elements to skim the page, then dive into the section they want.

Code example

<h1>Accessibility fundamentals</h1>
 
<h2>Semantic HTML</h2>
<p>Using the right element for the right job...</p>
 
<h3>Headings</h3>
<p>Headings create a navigable outline...</p>
 
<h3>Landmarks</h3>
<p>Landmarks define page regions...</p>
 
<h2>Keyboard navigation</h2>
<p>Every interactive element must be reachable...</p>

Further reading