Implémenter la numérotation automatique des titres via CSS

 Publié le 29 oct. 2024 ·  ≤ 1 minute de lecture

Découvrez comment numéroter automatiquement les titres d’une page web en utilisant uniquement HTML et CSS, sans JavaScript. Ce tutoriel vous guide pour implémenter une numérotation à plusieurs niveaux (1, 1.1, 1.1.1, etc.), idéale pour structurer des contenus complexes et améliorer l’expérience utilisateur. Un exemple de code est inclus pour une mise en œuvre simple et rapide.

Code HTML

<h2>Titre de niveau 2</h2>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h3>Titre de niveau 3</h3>
<h3>Titre de niveau 3</h3>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Code CSS

body { 
  counter-reset: h2counter; 
}

h2 {
  counter-reset: h3counter h4counter h5counter h6counter;
}

h3 {
    counter-reset: h4counter h5counter h6counter;
}

h4 {
  counter-reset: h5counter h6counter;
}

h5 {
  counter-reset: h6counter;
}

h2::before {
    counter-increment: h2counter;
    content: counter(h2counter) ". ";
}

h3::before {
    counter-increment: h3counter;
    content: counter(h2counter) "." counter(h3counter) ". ";
}

h4::before {
    counter-increment: h4counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ". ";
}

h5::before {
  counter-increment: h5counter;
  content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ". ";
}

h6::before {
  counter-increment: h6counter;
  content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h5counter) ". ";
}

Articles associés

Partage et commentaires

Partager cet article sur :

Vous pouvez commenter cet article grâce à ce fil de discussion sur Mastodon (avec Mastodon ou un autre compte ActivityPub/​Fediverse).