Structure des titres HTML H1–H6 : guide complet pour le SEO

HTML propose six niveaux de titres, de <h1> à <h6>. La plupart des rédacteurs savent que le H1 compte pour le SEO. Peu comprennent en revanche le rôle des H2, des H3 et des niveaux plus profonds, leur interaction avec les crawlers des moteurs de recherche, et la raison pour laquelle une hiérarchie cassée nuit à la fois au SEO et aux utilisateurs.

Pour le crawler de Google, les balises de titre forment la table des matières d’un document. Le robot s’appuie dessus pour déterminer le sujet de la page, repérer les sous-thèmes et évaluer la pertinence du document pour une requête donnée. Un niveau manquant, un H1 en trop ou un titre utilisé seulement pour la mise en forme brouillent cette carte.

zoom_in

Que sont les balises de titre H1 à H6 ?

H1 à H6 sont des éléments HTML sémantiques qui signalent des titres à six niveaux d’importance. H1 est le titre principal de la page ; H6 est le sous-titre le plus profond. Chaque niveau envoie un signal au crawler : « le contenu de cette section traite de ce sujet ».

Contrairement à la mise en forme visuelle (<b>, <big>, classes CSS), les balises de titre portent du sens. Les navigateurs affichent par défaut le H1 en gras et en grand, mais la taille n’est qu’un effet secondaire. On peut rendre un H6 visuellement plus grand qu’un H1 avec du CSS, sans changer sa sémantique : pour les moteurs de recherche comme pour les lecteurs d’écran, le H1 reste le titre principal.

Hiérarchie : H1, H2, H3 et au-delà

Une hiérarchie de titres correcte fonctionne comme la table des matières d’un livre : un titre pour l’ouvrage (H1), plusieurs chapitres (H2), des sous-sections dans les chapitres (H3), puis les paragraphes de détail (H4 et plus). Briser cette structure revient à arracher des chapitres d’un livre et à mélanger les pages.

zoom_in

<!-- Correct hierarchy -->
<h1>Guide to Welders' Protective Clothing</h1>

  <h2>Types of protective clothing</h2>
    <h3>Fire-resistant suits</h3>
    <h3>Protective masks</h3>

  <h2>Regulatory standards</h2>
    <h3>EN ISO 11612</h3>
    <h3>ANSI/ISEA standards</h3>

  <h2>How to choose</h2>

<!-- Wrong hierarchy (skipped levels) -->
<h1>Guide to protective clothing</h1>
  <h3>Fire-resistant suits</h3>  <!-- H2 skipped! -->
    <h5>Standards</h5>           <!-- H4 skipped! -->

Quand utiliser les H4 à H6

Les H4, H5 et H6 servent rarement : seulement dans les documents techniques volumineux qui exigent une quatrième imbrication, voire plus. Exemples : contrats juridiques, documentation d’API, protocoles médicaux. Pour les articles de blog et les pages de destination, trois niveaux (H1 à H3) suffisent à tout couvrir.

Impact des titres sur le SEO

Chaque balise de titre est un signal de pertinence. Plus le niveau est élevé, plus le signal est fort : le H1 pèse plus que le H2, et le H2 plus que le H3. Mais tous participent à l’évaluation de la proximité entre le document et la requête.

Google utilise les titres pour générer des featured snippets. Quand un utilisateur pose une question, l’algorithme cherche les pages dont un H2 ou un H3 correspond étroitement à la requête, et dont le bloc de contenu suivant apporte une réponse directe. Des H2 bien formulés sont autant de candidats gratuits à la position zéro.

Les titres alimentent aussi le maillage interne : un texte d’ancre reprenant le H2 de la page cible renforce la pertinence. Et sur les sitemaps, certains CMS ajoutent automatiquement un attribut id aux titres, ce qui crée des URL d’ancrage directement utilisables dans les sitemaps XML pour les sections profondes d’une page.

Accessibilité et lecteurs d’écran

Les lecteurs d’écran (logiciels d’assistance pour les personnes malvoyantes) utilisent les balises de titre comme principal outil de navigation sur une page. L’utilisateur appuie sur la touche H pour passer d’un titre à l’autre et entend ainsi la table des matières de la page. Une hiérarchie cassée rend cette navigation inutilisable.

Selon le WCAG 2.1 (critère 1.3.1 « Information et relations »), les titres doivent être implémentés avec des balises HTML sémantiques, et non avec des styles. Un bouton avec font-size: 24px; font-weight: bold n’est pas un titre pour un lecteur d’écran. <h2> en est un. La différence est considérable.

Règles d’utilisation des titres

Cinq règles couvrent 95 % des situations réelles.

Erreurs courantes dans la structure des titres

Ces erreurs apparaissent lors des audits de la plupart des sites, des petits blogs aux grandes plateformes d’entreprise.

• Plusieurs H1 sur la page. Le plus souvent causé par des éditeurs visuels qui enveloppent n’importe quel grand bloc dans un H1. Pour les repérer : Screaming Frog → H1 → Multiple. Correction : gardez un seul H1 et remplacez les autres par des H2 ou par une <div> stylée.
• Des titres utilisés pour la mise en forme, et non pour la sémantique. Un designer a choisi un H4 parce qu’il « a la bonne taille », en sautant les H2 et H3. Le crawler voit H1 → H4 → H1 → H4 : du désordre au lieu d’une structure.
• H1 absent. Après une refonte ou une migration de CMS, le H1 disparaît du template. Une page sans H1 perd son principal signal de pertinence on-page.
• Le H1 = nom du site sur chaque page. Un template de CMS insère le nom de l’entreprise dans le H1 à l’échelle de tout le site. Chaque page reçoit le même H1 : doublons à l’échelle du site, pertinence nulle.
• Niveaux sautés lors de l’imbrication. H1 → H3 (H2 absent), H2 → H4 (H3 absent). Le lecteur d’écran signale une erreur ; le crawler perd le contexte de la sous-section.
• Utiliser <p> ou <div> à la place des balises de titre. Le texte ressemble visuellement à un titre, mais il n’en est pas un pour les moteurs de recherche ni pour les lecteurs d’écran. Fréquent dans les anciens templates.
• Des titres trop longs. Un H2 de trois phrases n’est pas un titre, c’est un paragraphe. Un titre doit se lire d’un seul regard : 4 à 12 mots constituent un format optimal.

<!-- BAD: typical template with errors -->
<div class="title">Workwear catalogue</div>    <!-- not H1! -->
<h1>Acme Workwear Ltd</h1>                     <!-- H1 = company name -->
<h1>Winter workwear</h1>                       <!-- second H1 -->
<h3>Fire-resistant suits</h3>                  <!-- H2 skipped -->

<!-- GOOD: correct structure -->
<h1>Winter welders' workwear catalogue</h1>
  <h2>Fire-resistant suits</h2>
    <h3>Suits to EN ISO 11612</h3>
    <h3>Suits to ANSI Z49.1</h3>
  <h2>Protective masks and shields</h2>

Outils d’audit de la structure des titres

// Quick heading hierarchy check in the browser console
const headings = $$('h1,h2,h3,h4,h5,h6');
const report = headings.map(h => ({
  tag: h.tagName,
  text: h.textContent.trim().slice(0, 60)
}));
console.table(report);

// How many H1s are on the page?
const h1Count = $$('h1').length;
console.log(`H1 count: ${h1Count}`, h1Count === 1 ? '✓' : '✗ ERROR');

Liste de vérification de la structure des titres

H1

• Un seul H1 sur chaque page du site
• Le H1 contient la requête cible principale de la page
• Le H1 est cohérent avec la balise title (la formulation peut différer)
• Le H1 est unique à l’échelle du site : il n’est pas dupliqué par le template
• Le H1 n’est pas vide, ne contient pas seulement une image et n’est pas masqué par CSS

H2

• Le H2 suit le H1 sans sauter de niveau
• Chaque H2 décrit une section principale distincte de la page
• Les H2 contiennent des requêtes secondaires et des termes sémantiques (naturellement, sans bourrage)
• La formulation d’un H2 peut servir d’ancrage à un featured snippet
• Aucun H2 n’existe uniquement pour l’effet visuel : il n’apparaît que là où commence une nouvelle section thématique

H3 à H6

• Le H3 s’imbrique dans le H2, le H4 dans le H3 (sans sauter de niveau en descendant)
• Les H4 à H6 ne sont utilisés que lorsqu’une imbrication profonde est réellement nécessaire
• Aucune balise H3 à H6 n’est utilisée à la place d’un H2 uniquement pour sa taille visuelle
• L’ensemble de la structure se lit comme une table des matières logique lors d’un survol

Accessibilité

• Ordre des titres vérifié avec l’extension HeadingsMap ou WAVE
• Tous les titres sont implémentés avec des balises HTML sémantiques, et non avec des div stylées
• Aucun titre masqué (display: none, visibility: hidden)
• Chaque titre porte un contenu significatif : pas de titre vide ni de titre de remplissage

FAQ

Réponses aux questions les plus fréquentes sur la structure des titres, issues des audits et des ateliers avec les équipes de contenu.