Système de titres : règles H1, H2 et H3

Un système de titres est l’ensemble ordonné comprenant un titre de page et ses étiquettes de section. Il transforme une longue page en un itinéraire lisible pour les humains et en un plan exploitable par machine pour les moteurs de recherche, les technologies d’assistance et les systèmes de réponse IA.

Le titre de la page ci-dessus est le H1 unique de cette page. Chaque spécification majeure ci-dessous est un H2, et toute subdivision à l’intérieur d’une section principale est un H3. Ce plan en direct est l’élément rendu : ses niveaux expriment des relations plutôt que des tailles de police.

Pourquoi cet élément est important

Les lecteurs consomment rarement une longue page en une seule lecture ininterrompue. Ils parcourent le texte à la recherche d’une question reconnaissable, comparent les étiquettes de section avec leur besoin actuel et décident où ralentir. Les titres descriptifs réduisent cet effort car chacun fait une petite promesse sur ce qui suit. « Comment les ID de titres stables préservent les citations » est utile en un coup d’œil ; « Quelques réflexions supplémentaires » ne l’est pas.

La même hiérarchie prend en charge l’extractabilité par machine, ce qui signifie qu’un système automatisé peut identifier une section, comprendre comment elle se rapporte au sujet de la page et la récupérer sans la confondre avec une section voisine. Le H1 établit le sujet de la page. Le H2 divise ce sujet en préoccupations principales. Le H3 réduit un H2 à une méthode, un cas, un critère ou une exception. Un niveau sauté masque cette relation et oblige un analyseur à déduire si une sous-section est une sœur, un enfant ou un bloc sans rapport.

Les titres créent également des sections adressables. Un identifiant de fragment est la partie d’une URL après #, par exemple #qa-checklist. Les résultats de recherche, les liens internes, les signets du navigateur et les réponses IA peuvent pointer vers cette destination exacte. Un ID généré automatiquement et renommé à la légère peut donc briser une URL même si la page elle-même existe toujours. Le titre n’est pas une décoration : son texte définit la section et son ID devient une adresse publique durable.

Suivez les règles d’écriture des éléments lorsque le but d’une section correspond à un élément typé. Un H2 nommé « Avertissement » ne remplace pas une boîte d’avertissement, et un H2 nommé « Comparaison » ne remplace pas un tableau de comparaison. Les titres fournissent la hiérarchie du document ; les éléments typés fournissent une structure spécifique au but. Les deux peuvent être nécessaires.

Quand l’utiliser

Utilisez le système de titres sur chaque page indexable substantielle. Même une page courte a besoin d’un H1. Ajoutez des sections H2 lorsque le lecteur doit se déplacer entre des questions, étapes, critères ou groupes de preuves distincts. Ajoutez des sous-sections H3 uniquement lorsqu’un H2 contient au moins deux parties vraiment distinctes qui bénéficient d’une navigation séparée.

Les quasi-échecs sont des étiquettes visuelles qui ressemblent à des titres mais qui n’appartiennent pas au plan de l’article :

• Un titre de carte nomme une carte répétée ; ce n’est pas automatiquement une section de document.
• Une étiquette d’encadré telle que « Astuce » ou « Important » identifie le type de boîte ; elle ne devient pas un H2 simplement parce qu’elle est en gras.
• Un titre de graphique identifie une figure. Il appartient à la légende ou au nom accessible de la figure, sauf si le graphique commence une section complète.
• Une étiquette de menu de navigation, un fil d’Ariane, un onglet, un contrôle d’accordéon, un titre de pied de page et un titre de modale peuvent nécessiter une sémantique de composant, mais ils n’entrent pas dans la hiérarchie principale de l’article.
• Un slogan promotionnel de grande taille est un texte d’affichage. La taille de police ne peut pas le promouvoir au rang de H1 du document.

N’ajoutez pas un titre simplement pour introduire une phrase, diviser une explication continue ou créer un espace visuel. Utilisez l’espacement des paragraphes ou la rédaction pour ces tâches. Un titre utile marque une section suffisamment substantielle pour répondre à un besoin distinct du lecteur.

Où placer les titres

La position exprime la filiation. Placez le H1 au début du contenu principal, après le fil d’Ariane ou autre navigation du site et avant l’introduction. Placez chaque H2 avant une section principale. Placez un H3 uniquement après son H2 parent et le contenu d’orientation du parent, jamais avant le premier H2 et jamais comme un pair choisi pour l’apparence visuelle.

Deux titres ne peuvent pas être adjacents dans le contenu rédigé d’un article. Chaque titre doit posséder un contenu utile avant le titre suivant de même niveau ou de niveau inférieur. Cette règle évite les étiquettes de section vides, donne aux lecteurs un contexte avant une liste de sous-sections et crée des passages extractibles plutôt qu’un plan nu.

Anatomie

L’anatomie étiquetée comporte cinq parties :

1. H1 : le sujet unique de la page et le sommet du plan de contenu.
2. H2 : une question, étape ou dimension principale au sein de ce sujet.
3. H3 : un sujet enfant qui ne peut être compris correctement sans son H2 parent.
4. Contenu possédé : la réponse, les preuves, les instructions ou l’explication entre un titre et le titre suivant de même niveau ou de niveau supérieur.
5. ID stable : la destination de fragment attachée au titre et préservée après publication.

La relation reste valable si la typographie change. Un thème peut rendre un H2 avec une police plus petite sur mobile, mais il doit rester H2 dans le HTML. Inversement, rendre un paragraphe grand et gras ne lui donne pas la sémantique de titre ni une destination de fragment.

Exemples de conception

Les variantes de conception correspondent à des niveaux sémantiques et à des états d’habillage réels, et non à des options de couleur arbitraires.

Titre de page H1 : afficher le sujet unique au début du contenu principal. Une description d’accompagnement peut suivre, mais aucun sur-titre, logo ou slogan vedette ne devient un autre H1.

Section principale H2 : rendre la section compréhensible à partir d’une table des matières et la faire suivre d’un contenu qui établit le périmètre.

Sous-section H3 : utiliser le niveau inférieur parce que le sujet est subordonné, et non parce que le concepteur souhaite un texte plus petit.

Titre renvoyé à la ligne : permettre un retour à la ligne naturel sur deux lignes sur les écrans étroits. Ne raccourcissez pas un titre clair en une étiquette ambiguë simplement pour le maintenir sur une seule ligne.

États ancrés : afficher le survol et le focus clavier sans faire de l’ancre le seul moyen de comprendre la destination. La navigation directe doit décaler tout en-tête collant afin que le titre ne soit pas masqué.

Paramètres

Le système de titres est un contrat de document plutôt qu’un composant décoratif. Ses paramètres définissent le plan, le texte que les lecteurs voient, le contenu que chaque nœud possède et l’URL par laquelle ce nœud peut être atteint.

Les limites de caractères et de mots sont des fourchettes éditoriales, pas des raisons d’omettre la spécificité nécessaire. Un titre de 94 caractères qui distingue deux procédures similaires est meilleur qu’un titre court mais trompeur. Les limites structurelles sont strictes : un H1, pas de niveaux sautés, pas d’ID en double et pas de sections vides.

Syntaxe et exemples de code

La forme portable canonique encapsule le plan natif dans une directive heading-system. Le premier titre correspond au titre du document ; les titres suivants restent des nœuds de contenu ordonnés. Les ID explicites sont ajoutés une fois que les titres deviennent publics.

Directive Markdown portable

:::heading-system
# Rotation d'une clé API sans temps d'arrêt

Remplacez l'identifiant dans chaque service dépendant avant de révoquer l'ancienne clé.

## Préparer le remplacement

Enregistrez chaque service qui lit actuellement l'identifiant.

### Identifier les consommateurs cachés

Vérifiez les tâches planifiées, les secrets de déploiement et les intégrations locales.

## Vérifier et révoquer

Testez le remplacement, puis révoquez la clé exposée.
:::

Lors de la publication, épinglez les ID stables plutôt que de permettre aux futures modifications de texte de les régénérer :

## Préparer le remplacement {#prepare-replacement}
### Identifier les consommateurs cachés {#identify-hidden-consumers}

Shortcode Hugo

{{< heading-system h1="Rotation d'une clé API sans temps d'arrêt" >}}
## Préparer le remplacement {#prepare-replacement}

Enregistrez chaque service qui lit actuellement l'identifiant.

### Identifier les consommateurs cachés {#identify-hidden-consumers}

Vérifiez les tâches planifiées, les secrets de déploiement et les intégrations locales.
{{< /heading-system >}}

Il s’agit du contrat d’adaptateur Hugo, et non d’une affirmation que ce dépôt enregistre un shortcode heading-system. Une implémentation Hugo peut continuer à rendre le H1 à partir du frontmatter et les titres du corps via Markdown, comme le fait cette page, à condition qu’elle valide la même hiérarchie et préserve les ID explicites.

Bloc WordPress

<!-- wp:heading {"level":2,"anchor":"prepare-replacement"} -->
<h2 id="prepare-replacement">Préparer le remplacement</h2>
<!-- /wp:heading -->

<p>Enregistrez chaque service qui lit actuellement l'identifiant.</p>

<!-- wp:heading {"level":3,"anchor":"identify-hidden-consumers"} -->
<h3 id="identify-hidden-consumers">Identifier les consommateurs cachés</h3>
<!-- /wp:heading -->

WordPress doit stocker le H1 dans le champ titre de la page ou dans un bloc hero approuvé, et non comme un second bloc de titre dans le corps de l’article. Définissez explicitement l’ancre HTML de chaque titre publié afin qu’une modification ultérieure du libellé ne change pas silencieusement son URL.

Exemples

Bon : le plan prédit des réponses complètes

# Comment choisir un flux de validation de factures

## Définir le risque de validation
Expliquez quels montants de factures, fournisseurs et exceptions nécessitent un examen.

### Définir des seuils de montant
Attribuez un approbateur nommé à chaque seuil et documentez ce qui se passe à la limite.

### Gérer les exceptions de politique
Envoyez les bons de commande manquants et les coordonnées bancaires modifiées vers un circuit d'examen séparé.

## Tester le flux
Exécutez des factures ordinaires et exceptionnelles sur l'ensemble du parcours avant le lancement.

Cela fonctionne parce que le H1 énonce une tâche, chaque H2 nomme une étape principale, chaque H3 appartient à son parent, et chaque étiquette est suivie d’un contenu qui tient sa promesse. Un lecteur peut parcourir le plan et prédire où les seuils, les exceptions et les tests sont couverts.

Mauvais : le style se substitue à la hiérarchie

# Validation des factures

### Points à considérer
## Plus d'informations
### Exceptions
### Autre

Cela échoue pour quatre raisons indépendantes. Cela passe du H1 au H3, utilise des étiquettes qui ne prédisent pas de réponse, place les titres les uns à côté des autres sans contenu possédé, et laisse « Exceptions » sans explication avant le titre suivant. Le plan qui en résulte suggère une couverture que la page ne fournit pas. Cela crée également des ID auto-générés faibles comme #other, qui sont ambigus lorsqu’ils sont cités en dehors de la page.

Balisage de schéma et accessibilité

Les titres n’ont pas besoin d’un type Schema.org autonome. Le H1 fournit ou reflète généralement le headline d’un Article, TechArticle ou autre entité de page appropriée, mais le libellé visible et le JSON-LD doivent décrire le même sujet. Les sections H2 et H3 restent une structure HTML ; ne créez pas d’entité de schéma pour chaque titre. Un titre intitulé « Foire aux questions » ne crée pas non plus automatiquement un balisage FAQPage — les données visibles de questions et réponses doivent satisfaire le contrat de l’élément FAQ.

L’accessibilité repose sur le HTML sémantique et l’ordre logique. Les utilisateurs de lecteurs d’écran peuvent naviguer par titre, inspecter une liste de titres ou sauter directement entre les sections. Ce flux de travail se brise lorsque la page saute des niveaux pour des raisons de style, utilise des paragraphes en gras comme faux titres, ou inclut des titres utilitaires et d’article dans une hiérarchie incohérente.

Utilisez de véritables éléments <h1>, <h2> et <h3>. Gardez le texte des titres visible ; un aria-label ne doit pas remplacer un libellé clair à l’écran. Les contrôles d’ancrage ont besoin d’un nom accessible descriptif, d’un focus clavier visible et d’une cible de clic distincte du texte du titre lorsque le lien vers l’ensemble du titre perturberait la sélection. Lorsqu’une URL de fragment se charge, le focus clavier n’a pas besoin de se déplacer automatiquement, mais le titre de destination doit être visible et non recouvert par un en-tête collant.

Les ID de titres doivent être uniques au sein de la page et doivent commencer par une lettre. Gardez-les en minuscules, avec traits d’union, lisibles et exempts de dates transitoires ou de numéros de position. Un ID stable peut rester #verify-results même si le titre visible passe de « Vérifier les résultats » à « Vérifier que le nouvel identifiant fonctionne. » Si le sens de la section change complètement, créez un nouvel ID et préservez l’ancien fragment via un alias ou un comportement de redirection documenté lorsque la plateforme le prend en charge. La spécification distincte des liens d’ancrage régit les détails de la navigation et de l’interaction avec les ancres.

Règles d’écriture

Rédigez le plan de la page avant de peaufiner les étiquettes individuelles. Chaque titre doit répondre à la question « Que vais-je apprendre, décider ou faire ici ? » dans un langage concret. Préférez « Comparer les coûts de facturation mensuels et annuels » à « Considérations tarifaires », et « Pourquoi l’import rejette les ID en double » à « Dépannage ». Descriptif ne signifie pas verbeux ; cela signifie que l’étiquette prédit le contenu réel de la section.

Utilisez un H1 de 20 à 80 caractères. Préférez les titres H2 et H3 de 2 à 12 mots et ne dépassant pas 90 caractères. Un long guide a normalement 3 à 12 sections H2. Un H2 a besoin d’au moins une phrase de périmètre ou de réponse avant tout H3. Utilisez deux sections H3 ou plus sous un parent lorsque la subdivision est utile ; un seul H3 signale souvent que son contenu devrait être fusionné dans le H2.

Utilisez la casse de phrase sauf si un nom propre ou un nom de produit nécessite des majuscules. Les questions sont appropriées lorsque la section répond immédiatement à la question exacte. Les étiquettes déclaratives conviennent aux étapes, critères, résultats et spécifications. Maintenez les sections parallèles grammaticalement parallèles : utilisez des verbes pour une séquence de processus, des noms pour les critères de comparaison, ou des questions pour un ensemble de FAQ.

Ne mettez jamais ce qui suit dans le texte des titres :

• Liens Markdown ou URL brutes ; ils créent des destinations concurrentes et des noms accessibles instables.
• Marqueurs de note de bas de page ou citations de sources ; placez les preuves dans le contenu possédé.
• Émojis utilisés comme étiquettes structurelles, badges d’état ou préfixes décoratifs.
• Numérotation manuelle sauf si le type d’article définit une séquence ordonnée stable.
• Langage d’appel à l’action tel que « Acheter maintenant », mentions de prix, urgence ou badges promotionnels.
• Instructions de style, sauts de ligne HTML ou abréviations spécifiques à un appareil.
• Une deuxième phrase qui appartient au paragraphe ci-dessous.

N’écrivez pas d’étiquettes astucieuses qui dépendent du texte environnant pour avoir un sens. « Le mystère s’épaissit » peut convenir au ton d’un essai, mais cela ne donne aucun contexte utilisable à un résultat de recherche, une table des matières, une liste de titres de lecteur d’écran ou une citation IA. Préservez la personnalité dans l’explication après un titre précis.

Types d’articles qui l’utilisent

Le tableau postTypes du frontmatter pilote ces relations. Chaque type d’article listé utilise le même contrat de hiérarchie, tandis que sa propre anatomie détermine les noms et l’ordre exacts des sections.

Liste de contrôle QA

• La page rend exactement un H1 visible, et il nomme le sujet réel de la page.
• Le plan passe de H1 à H2 à H3 sans niveaux sautés.
• Chaque H3 a un H2 parent clair qui le précède.
• Chaque titre est suivi d’un contenu possédé significatif avant le titre suivant.
• Chaque H2 inclut une phrase d’orientation ou de réponse avant son premier H3.
• Le texte du titre est descriptif lorsqu’il est lu seul dans une table des matières ou une liste de titres de lecteur d’écran.
• Les sections parallèles utilisent une grammaire parallèle et des niveaux équivalents.
• Les niveaux de titres reflètent les relations, pas la taille de police ou le poids visuel souhaité.
• Les usages typés utilisent toujours leurs éléments requis ; les titres n’imitent pas les composants.
• Chaque titre publié a un ID de fragment unique, lisible et stable.
• Les ID de fragments existants restent inchangés lorsque le libellé visible est modifié sans changer le sens de la section.
• La navigation directe par fragment laisse la destination visible sous tout en-tête collant.
• Le texte du titre ne contient pas de liens, citations, étiquettes émoji, badges promotionnels ou sauts de ligne manuels.
• Le plan HTML reste cohérent avec les menus, cartes, accordéons, modales et autres composants de la page présents.
• La page rendue fonctionne à largeur étroite, avec des titres sur deux lignes passant à la ligne sans coupure ni chevauchement.

Rejetez la page lorsque le design visuel semble soigné mais que le plan échoue. Les défauts de titres se cumulent : un niveau sauté ou une section vide oblige chaque consommateur en aval à travailler davantage pour reconstruire des relations que la source aurait dû énoncer directement.

FAQ

Les questions ci-dessous résolvent les cas les plus susceptibles de créer des plans incohérents selon les rédacteurs et les plateformes. Leurs valeurs faisant autorité résident dans le frontmatter structuré [[faq]] ci-dessus afin que la sortie visible et toute sortie de schéma éligible puissent partager une seule source.