English

<h1>

La hiérarchie des titres que 90 % des sites cassent

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • texte

<h1> à <h6> — Les titres

Les balises <h1> a <h6> définissent six niveaux de titres hiérarchiques. <h1> est le titre principal de la page, <h2> les grandes sections, et ainsi de suite. La hiérarchie doit être continue : pas de <h4> après un <h2> sans <h3> entre les deux.

Quand l'utiliser

Tu veux structurer ton contenu en sections et sous-sections. Chaque page a un seul <h1>. Les <h2> découpent les thèmes principaux, les <h3> les sous-thèmes. Pense à la table des matières que tes titres génèrent.

Ce que tu gagnes

Accessibilité : les lecteurs d'écran permettent de naviguer par titres. Un utilisateur peut lister tous les <h2> pour survoler la page, puis plonger dans la section qui l'intéresse.

Exemple de code

<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>

Pour aller plus loin