Formations aurelearn

Les balises hn

source ↗

Il existe 6 niveaux de hiérachie pour les titres dans une page HTML. Chacun d’eux remplit un rôle sémantique précis.

Il faut également veiller à respecter la hiérarchie tout au long du document :

index.html

<!-- CORRECT -->
<h1></h1>
<h2></h2>
<h3></h3>
<h3></h3>
<h4></h4>
<h5></h5>
<h4></h4>
<h5></h5>
<h6></h6>
<h2></h2>
<h2></h2>
<!-- INVALIDE -->
<h1></h1>
<h2></h2>
<h3></h3>
<h2></h2>
<h4></h4>
<h2></h2>
<h4></h4>
<h5></h5>
<h6></h6>
<h3></h3>
<h2></h2>

<h1>

La balise <h1> sert à indiquer le sujet principal de la page. Elle doit absolument être la première balise hn référencée dans la page.

index.html

<body>
<h1>Mon titre de premier niveau</h1>
</body>

Un ou plusieurs <h1> par page ?

Selon les sources, il serait autorisé d’insérer plusieurs balises <h1> au sein d’une même page (par exemple, le titre d’un article au sein de la même page pourrait être aussi un <h1>). Effectivement, Google ne pénalise pas ce fonctionnement, donc ce n’est pas mal vu d’un point de vue SEO.

Néanmoins, pour garder une sémantique cohérente, une page ne devrait avoir qu’un seul sujet principal, donc il est plutôt recommandé de se limiter à une seule occurence de cette balise.

<h2>

La balise <h2> représente généralement un titre de section à l’intérieur d’une page.

index.html

<body>
<h1>Mon titre de premier niveau</h1>
<section>
<h2>Titre de niveau 2</h2>
</section>
</body>

<h3>, <h4>, <h5>, <h6>

Les balises hn de niveaux inférieurs sont utilisées en fonction de la maquette reçue, toujours en gardant à l’esprit une cohérence dans l’ordre d’apparition.

index.html

<body>
<h1>Mon titre de premier niveau</h1>
<section>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
</section>
</body>

© 2023 • Aurélien Devaux