Balises Hn : structurer H1, H2 et H3

Qu’est-ce qu’une balise Hn ?

Une balise Hn est un élément de titre HTML, du <h1> au <h6>. Le chiffre indique le rang : 1 pour le titre principal, 6 pour le niveau le plus fin. L’ensemble forme la structure Hn : le plan de la page tel qu’un navigateur, un moteur ou un lecteur d’écran le lit.

<h1>Balises Hn : bien structurer H1, H2 et H3</h1>
  <h2>Qu'est-ce qu'une balise Hn ?</h2>
  <h2>Quelles règles suivre ?</h2>
    <h3>Un seul H1 par page ?</h3>
    <h3>Peut-on sauter un niveau ?</h3>

Une balise Hn décrit une structure, pas une taille de police. MDN le rappelle : pour grossir un texte, on utilise la propriété CSS font-size, jamais un titre.

Les balises Hn comptent-elles pour Google ?

Oui, mais pas comme on le lit souvent. Le guide de démarrage SEO de Google range l’ordre des titres parmi les points à ne pas surinvestir. Des titres en ordre sémantique sont utiles aux lecteurs d’écran. Pour Google Search, les utiliser dans le désordre n’a pas d’importance.

Cela ne rend pas les Hn inutiles. Elles jouent trois rôles documentés ou observables :

• Comprendre la page : les titres découpent le contenu en sujets. Un H2 clair signale ce que la section traite.
• Titre de secours dans les résultats : selon la documentation sur les liens de titre, Google peut utiliser le titre principal visible ou les éléments de titre quand la balise title est vide, obsolète ou inexacte.
• Lecture rapide : un lecteur pressé parcourt les titres pour trouver sa réponse. Un plan explicite l’y conduit sans détour.

Pourquoi la structure Hn compte-t-elle pour l’accessibilité ?

C’est ici que la hiérarchie devient une exigence. Un lecteur d’écran liste les titres de la page et permet de sauter de l’un à l’autre. Une structure incohérente revient à fournir une table des matières fausse.

Deux référentiels encadrent ce point :

• le critère WCAG 2.4.6 (version 2.2, niveau AA) demande que les titres décrivent le sujet ou la fonction de la section ;
• le critère RGAA 9.1 (version 4.1), référentiel français, vérifie que la hiérarchie entre les titres de chaque page est pertinente.

Le tutoriel du W3C sur les titres précise la règle pratique : ne pas passer d’un H2 directement à un H4. Remonter de plusieurs niveaux en fermant une section, d’un H4 à un H2, reste correct.

Quelles règles suivre pour une structure Hn propre ?

Les règles ci-dessous combinent les exigences d’accessibilité et les conventions de rédaction appliquées chez Elev8 Lab :

• Un seul H1, qui annonce le sujet en 5 à 7 mots et contient le mot-clé ou une variante.
• Des H2 pour les grandes parties, chacun porteur d’une intention secondaire. Plusieurs peuvent être formulés en questions.
• Des H3 pour le détail, rattachés à leur H2. Au moins deux H3 sous un même H2, sinon le découpage n’apporte rien.
• Aucun saut de niveau en descendant : H2 puis H3, jamais H2 puis H4.
• Des titres dans le contenu éditorial uniquement : pas de Hn dans l’en-tête, le menu, la barre latérale ou le pied de page des pages internes.
• Des titres courts et explicites, sans lien, sans ponctuation lourde, sans répétition mécanique du même mot-clé.

Un seul H1 par page : obligation ou convention ?

Convention. Le standard HTML autorise plusieurs H1 non imbriqués, et aucune documentation Google ne l’interdit. MDN qualifie pourtant cette pratique de mauvaise : une page doit en général avoir un seul H1 qui décrit son contenu. Un H1 unique évite aussi l’ambiguïté « pas de titre principal clair ». C’est l’un des cas où Google réécrit le titre affiché.

Peut-on sauter un niveau de titre ?

Techniquement oui : Google indique que l’ordre des titres ne compte pas pour son moteur. Pour un utilisateur de lecteur d’écran, un H4 qui suit un H2 laisse croire qu’une section manque. La règle est donc simple : on descend d’un niveau à la fois, on remonte librement.

Côté rédaction, la structure Hn se construit avant le texte. Elle part de l’intention et des questions de la page de résultats. La démarche complète est détaillée dans la rédaction SEO et l’intention de recherche.

Exemples de structure Hn selon le type de page

Le bon plan dépend du rôle de la page. Trois exemples fictifs :

Sur un article, le H1 et la balise title traitent le même sujet sans être identiques. Le premier titre le contenu pour le lecteur ; la seconde est rédigée pour la page de résultats.

Comment auditer la structure Hn d’une page ou d’un site ?

1. Lire les seuls titres : avec une extension comme Web Developer (menu Information, « View Document Outline ») ou HeadingsMap, affichez le plan de la page. S’il ne permet pas de comprendre le sujet, la structure est à revoir. Durée : 2 min par page
2. Vérifier les gabarits : repérez les Hn ajoutées par le thème dans l’en-tête, le menu, la barre latérale ou le pied de page. Elles se répètent sur toutes les pages et brouillent le plan.
3. Crawler le site : Screaming Frog liste les H1 et H2 de chaque URL. Filtrez les H1 manquants, multiples ou dupliqués entre pages.
4. Contrôler l’accessibilité : un lecteur d’écran (NVDA, VoiceOver) ou un outil d’audit comme WAVE signale les sauts de niveau et les titres vides.
5. Corriger au bon endroit : un défaut de gabarit se règle dans le thème, un défaut de rédaction dans l’éditeur. Sous WordPress, le bloc Titre de Gutenberg permet de choisir le niveau sans toucher au code.

La structure Hn n’est qu’un des éléments de la page. Pour l’ensemble des leviers, voir le SEO on-page et le guide SEO.