Vérificateur de structure des titres : plan H1 à H6 depuis le HTML | We.Inc
Collez du HTML et voyez son plan de titres H1 à H6 sous forme d'arbre, avec les niveaux sautés, les H1 manquants ou répétés et les titres vides signalés. Fonctionne dans votre navigateur ; rien n'est envoyé.
Vérificateur de structure des titres
Collez le HTML d'une page et ce vérificateur dessine son plan de titres sous forme d'arbre indenté, de h1 à h6, y compris les éléments avec role="heading". Il signale les niveaux sautés, comme un h2 suivi d'un h4, un h1 manquant ou répété, et les titres vides. L'analyse se fait dans votre navigateur, le code ne quitte donc jamais votre appareil.
Ce que signale le vérificateur
Contrôle
Exemple
Pourquoi c'est important
Niveau sauté
h2 suivi directement d'un h4
Les utilisateurs de lecteurs d'écran perdent le fil de leur position
Aucun h1
La page commence par un h2
La page n'a pas de titre principal
Plus d'un h1
Logo et titre tous deux en h1
Un seul h1 doit nommer la page
Titre vide
<h3></h3> ou seulement une icône
Annoncé sans rien à dire
Premier titre qui n'est pas un h1
h3 avant le h1
Le plan commence au milieu
Les titres sont la façon dont les personnes utilisant un lecteur d'écran parcourent une page, et ils donnent aux moteurs de recherche la forme de votre contenu. Collez ci-dessous le HTML d'une page ou d'un composant, depuis le code source ou votre éditeur, et le plan apparaît avec chaque problème signalé sur la ligne où il se produit.
Copiez le HTML de votre page, par exemple avec l'affichage du code source, et collez-le dans le champ. Ou chargez l'exemple pour voir les contrôles.
Le vérificateur lit chaque h1 à h6 et chaque élément avec role="heading" dans l'ordre du document.
Lisez l'arbre : l'indentation suit le niveau, et les avertissements se trouvent à côté du titre qui les a provoqués.
Corrigez le balisage, collez à nouveau, et copiez le plan propre en texte brut si vous en avez besoin pour un brief.
Utilisez les niveaux de titre pour la structure et le CSS pour la taille. Si un h2 paraît trop grand dans une carte, restylez-le plutôt que de le remplacer par un h4.
Remonter de plusieurs niveaux ne pose pas de problème : un h4 peut être suivi d'un h2 quand une nouvelle section commence.
Un logo est rarement le bon h1. Donnez le h1 au titre qui nomme cette page.
Pour les single-page apps, collez le HTML rendu, copié depuis l'inspecteur d'éléments de votre navigateur, car le code source peut n'afficher qu'une coquille vide.
Le texte masqué en CSS compte quand même ici, car le vérificateur lit le balisage et n'applique pas votre feuille de style.
Questions fréquentes
Est-ce une erreur de sauter des niveaux de titre ?
Le tutoriel du W3C sur les titres indique que sauter des rangs peut prêter à confusion et doit être évité autant que possible, par exemple un h2 suivi directement d'un h4. Fermer une section et remonter, comme passer d'un h4 à un h2, est normal.
Une page peut-elle avoir plus d'un h1 ?
Le HTML le permet, mais MDN recommande un seul h1 décrivant le contenu de la page. L'ancienne idée selon laquelle chaque section pouvait recommencer à h1 reposait sur un algorithme de plan de document que les navigateurs n'utilisent pas, c'est pourquoi cet outil avertit en cas de second h1.
Pourquoi ne puis-je pas simplement saisir une URL ?
Il s'agit d'une page statique qui tourne dans votre navigateur, et les navigateurs empêchent un site de lire le HTML d'un autre site. Coller le code garde l'outil honnête et privé : rien n'est envoyé nulle part.
Comprend-il role="heading" ?
Oui. Un élément avec role="heading" est lu à son aria-level. Si aria-level est absent, les navigateurs se rabattent sur le niveau 2, le vérificateur le traite donc comme un h2 et signale l'attribut manquant.
Les titres ont-ils un effet sur le SEO ?
Les titres décrivent la structure de votre contenu à tous les lecteurs, y compris les moteurs de recherche. Nous ne promettons rien sur le classement ; un plan clair vaut d'abord la peine pour les personnes.
Lire le plan
Chaque ligne est un titre, indenté selon son niveau. Un plan sain se lit comme une table des matières : un titre, quelques sections h2, et des sous-sections h3 en dessous si nécessaire.
Les avertissements pointent vers le titre où le saut s'est produit, pas vers celui qui le précède. Corrigez-les de haut en bas, car un mauvais niveau au début peut rendre étrange tout ce qui suit.
Causes fréquentes
La plupart des niveaux sautés viennent du choix d'un titre pour sa taille par défaut. Les templates et les constructeurs de pages le font souvent dans les pieds de page et les cartes. D'autres proviennent de composants réutilisés sur des pages à la structure différente, c'est pourquoi il vaut la peine de rendre configurable le niveau de titre d'un composant.
Les titres vides entourent généralement une icône ou une image sans texte alt. Donnez un texte alt à l'image, ajoutez du texte visible, ou cessez d'utiliser un titre pour cet élément.
Les niveaux de titre en un coup d'œil
Comment les six niveaux sont généralement utilisés sur une page web
Niveau
Usage typique
Le titre de la page, une seule fois
Les sections principales de la page
Les sous-sections d'un h2
Le détail à l'intérieur d'un h3, comme les éléments d'une liste de fonctionnalités
Rare ; documentation approfondie et textes juridiques
Réparer un plan cassé
Avant : des niveaux choisis pour leur taille
Les titres des cartes sautent de h2 à h4 parce que h4 semblait avoir la bonne taille.
Après : le bon niveau, restylé en CSS
Les cartes utilisent h3, le niveau juste en dessous, et une classe les garde petits.
Vérifiez vos titres
Collez du HTML ci-dessous. Il est lu dans votre navigateur et n'est jamais envoyé.
HTML à vérifier
Charger l'exemple
Effacer
Plan
{n} titres, {w} avertissements
Aucun titre trouvé. Collez le HTML d'une page pour voir son plan.