On le sait, il convient de structurer son document HTML à l’aide de différents niveaux de titres. Une récente étude prouve d’ailleurs la grande utilité de cette pratique puisque plus de 50% des utilisateurs utilisant un lecteur d’écran naviguent au sein de la page à l’aide de cette structure.
Il nous est offert un jeu de titres allant du niveau 1 au niveau 6 qu’il convient d’ordonner de manière logique sans sauter de niveau.
Mais il n’est absolument pas précisé que le titre de niveau 1 doit être unique. En fonction du choix fait sur ce point, nous allons voir que dans la pratique cela a beaucoup de répercussions sur l’accessiblité de votre document ainsi que son référencement.
Je décide de n’utiliser qu’un seul titre de niveau 1…
… et je place ce titre de niveau 1 sur le logo
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 1</title>
</head>
<body>
<div id="page">
<div id="tete">
<h1>Titre (notre logo)</h1>
</div>
<hr />
<div id="corps">
<div id="menu" style="float:left;width:20%;">
<h2>Sous-titre numéro 1</h2>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="contenu" style="float:left;width:80%;">
<h2>Sous-titre numéro 2</h2>
<p>Contenu de l’article.</p>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 1 :
- respecte la syntaxe HTML ;
- respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
- n’est pas idéalement optimisée pour un bon référencement (outre pour une page d’accueil).
… et je place ce titre de niveau 1 sur le descriptif principal de notre article
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 2</title>
</head>
<body>
<div id="page">
<div id="tete">
<p>Notre logo</p>
</div>
<hr />
<div id="corps">
<div id="menu" style="float:left;width:20%;">
<h2>Sous-titre numéro 1</h2>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="contenu" style="float:left;width:80%;">
<h1>Titre (descriptif principal de notre article)</h1>
<p>Contenu de l’article.</p>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 2 :
- respecte la syntaxe HTML ;
- ne respecte pas la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres (puisque le titre de niveau 2 apparaît avant le titre de niveau 1).
- est idéalement optimisée pour un bon référencement.
… et je place ce titre de niveau 1 sur le descriptif principal de notre article… et je ruse ensuite par CSS !
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 3</title>
</head>
<body>
<div id="page">
<div id="tete">
<p>Notre logo</p>
</div>
<hr />
<div id="corps">
<div id="contenu" style="float:right;width:80%;">
<h1>Titre (descriptif principal de notre article)</h1>
<p>Contenu de l’article.</p>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="menu" style="float:left;width:20%;">
<h2>Sous-titre numéro 1</h2>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 3 :
- respecte la syntaxe HTML ;
- respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
- est idéalement optimisée pour un bon référencement ;
- respecte également la linérarisation du document car :
Je décide d’utiliser plusieurs titre de niveau 1…
… et je place un de ces titres de niveau 1 sur le logo
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 4</title>
</head>
<body>
<div id="page">
<div id="tete">
<h1>Titre (notre logo)</h1>
</div>
<hr />
<div id="corps">
<div id="menu" style="float:left;width:20%;">
<h1>Sous-titre numéro 1</h1>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="contenu" style="float:left;width:80%;">
<h1>Titre (descriptif principal de notre article)</h1>
<p>Contenu de l’article.</p>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 4 :
- respecte la syntaxe HTML ;
- respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
- n’est pas idéalement optimisée pour un bon référencement.
… et je place un de ces titres de niveau 1 sur le descriptif principal de notre article
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 5</title>
</head>
<body>
<div id="page">
<div id="tete">
<p>Notre logo</p>
</div>
<hr />
<div id="corps">
<div id="menu" style="float:left;width:20%;">
<h1>Titre</h1>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="contenu" style="float:left;width:80%;">
<h1>Titre (descriptif principal de notre article)</h1>
<p>Contenu de l’article.</p>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 5 :
- respecte la syntaxe HTML ;
- respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
- n’est pas idéalement optimisée pour un bon référencement.
… et je place un de ces titres de niveau 1 sur le descriptif principal de notre article… et je ruse là encore par CSS !
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 6</title>
</head>
<body>
<div id="page">
<div id="tete">
<p>Notre logo</p>
</div>
<hr />
<div id="corps">
<div id="contenu" style="float:right;width:80%;">
<h1>Titre (descriptif principal de notre article)</h1>
<p>Contenu de l’article.</p>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="menu" style="float:left;width:20%;">
<h1>Titre</h1>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 6 :
- respecte la syntaxe HTML ;
- respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
- n’est pas idéalement optimisée pour un bon référencement ;
- respecte également la linérarisation du document car :
Conclusion
Seuls l’exemple 1 (dans le cas d’une page d’accueil) et l’exemple 3 (dans les autres cas) garantissent l’accessiblité et le référencement de notre page.
Il est donc nécessaire parfois d’utiliser quelques astuces CSS pour ordonner correctement vos informations.
Bien qu’il soit tout à fait possible d’utiliser plusieurs titres de niveau 1 dans une page, cette pratique n’est pas conseillée pour un bon référencement. Il convient alors d’être attentif à la bonne hiérarchisation de l’information, si besoin avec l’aide de l’outil proposé par le W3C :
21 commentaires ↓
Bon article. Ca me rappelle juste que j’ai vu des
<h10>dans une application Java qu’on fait à la boite… Ca m’a fait assez rire.Quand des dev s’improvisent intégrateur, ca fait des choses un peu spéciales 😀
Je ne suis pas persuadé que ça soit réellement un problème pour les utilisateurs de lecteurs d’écrans d’avoir un h2 avant un h1.
Et de toutes façons, je me laisse entendre dire que HTML5 a l’intention de régler ce problème avec les sections…
Olivier : je ne sais pas non plus mais c’est clairement déconseillé. Il doit avoir une raison à cela.
Et en effet HTML 5 réglera tout ça… bientôt.
Pour une page d’accueil, il n’y a pas vraiment de problèmes, le titre du site est aussi le titre de la page en général.
Pour toutes tes pages je ne comprends pas toute ta structure. Tu joues avec un titre de site, un titre de contenu, et un troisième truc qui titre une liste. C’est quoi comme contenu ?
Pour les pages de contenu ta solution 3 peut aller, mais elle complexifie la mise en page.
Mais surtout, en quoi le titre de ton site est un titre pour cette ressource précise ? C’est un contexte, pas un titre.
Regardes par exemple un livre. Le titre du livre c’est le titre de son contenu. La collection et l’éditeur sont précisés, mais ce ne sont ni les « titres » principaux, ni même des titres d’ailleurs.
Du coup je privilégie vraiment la solution 5, en faisant attention que le premier titre soit bien celui du contenu (et en importance et en position).
Éventuellement le site sera « titrisé » dans la balise [title]
Pour moi vouloir mettre en titre le nom du site est une lubie d’informaticien qui veut hiérarchiser tous les concepts (un peu comme quand on parlait de mettre ou pas des titres aux sommaires et menus). Certes ton contenu appartient au site, mais quand on accède directement au contenu, le site n’est plus qu’un contexte. Ce n’est plus ni le titre principal, ni (encore moins) un sous titre.
Un peu comme un livre, encore une fois. Quand on accède directement à une page de chapitre, on a le titre du chapitre mais le titre du livre n’y est pas répété ni en titre ni en sous titre. Eventuellement il est présent en tout haut de chaque page … en contexte (et pas en titre), donc avec un bête [p] (à défaut de balise [aside])
Bonjour, en terme de référencement, je vous conseille un seul H1 par page pour éviter les problèmes.
Je suis tout à fait d’accord avec Eric : le titre du site peut être un élément
h1sur la home, puisque c’est généralement ici que le site est présenté, mais pas sur les autres pages, qui ont leur propre titre. Ce sont des documents indépendants, autant reliés aux autres pages du site qu’au reste du web.Donc sur la home, ça donne :
<h1 id="site-title">Le nom du site</h1>Et sur les autres pages :
<p id="site-title">Le nom du site</p>Il serait tout de même intéressant de pouvoir indiquer, à l’aide d’un attribut par exemple, qu’il s’agit là du nom du site sur lequel se trouve la ressource. Je n’ai rien trouvé à ce sujet, mais peut-être existe-il quelque chose pour ça, avec les microformats ou directement dans HTML5 ?
Pour le contenu n’ayant pas de relation avec le sujet principal du document, HTML5 propose l’élément
aside. Dans l’exemple proposé, c’est naturellement un élémenth1qui est utilisé pour titrer la section.Cette solution me paraît assez bonne, et il devrait être possible de l’utiliser dès aujourd’hui, soit en utilisant directement l’élément
aside, soit à l’aide d’un élément<div class="aside">par exemple.Il pourrait aussi être intéressant de pouvoir lier des contextes aux titres. Imaginons un attribut appelé par exemple « context », utilisable sur les éléments
h1àh6.Nous pourrions définir le titre du site :
<h1 context="website">HTML Zen Garden</h1>Puis le contenu principal (la valeur spéciale « main » pourrait d’ailleurs permettre d’identifier le contenu principal) :
<h1 context="main">Combien peut-on mettre de « H1 » dans une page ?</h1>Puis reprendre le premier contexte (website), pour décrire les éléments liés au site, mais placés après le contenu principal du document :
<h2 context="website">Catégories</h2>L’utilisation de l’élément
h1pour le nom du site serait alors légitime, puisqu’il pourrait titrer tout ce qui est lié au site et non au document (comme les liens vers les archives).Malheureusement, dans le cas d’un site soumis à l’expertise de spécialistes du référencement, il n’est absolument pas envisageable d’utiliser plusieurs éléments
h1sur une même page, et encore plus lorsqu’il s’agit de contenu moins important que le contenu principal de la page.C’est vraiment dommage d’en arriver à de telles contraintes, d’autant plus qu’elles reposent souvent sur peu de choses. Mais puisqu’il faut faire avec, nous devons trouver des compromis. En voici quelques-uns, assez moyens pour la plupart :
h2par exemple), ce qui n’a pas vraiment de sens.<strong>à l’intérieur d’un<p>.dtpermet de « titrer » les élémentsdd.J’utilise souvent les listes de définition, mais n’en suis pas vraiment satisfait :
ddfaisant office de conteneur.Éric, Pierre :
Merci d’abord pour vos commentaires détaillés !
Ils me font remarquer deux choses :
Je n’ai peut-être pas suffisamment appuyé mon idée d’utiliser la structure numéro 1 uniquement pour une page d’accueil.
J’essayais ici de traiter des cas très concrets où tout les corps de métier interviennent. Même si théoriquement la structure numéro 5 est tout-à-fait pertinente, en pratique et dans un contexte de production, elle sera ignorée au profit de la structure numéro 3. C’est le point évoqué par Pierre vers la fin il me semble.
Pour revenir sur HTML 5, qui semble proposer une solution élégante à ces problèmes de titres, je pense écrire prochainement un billet sur ce sujet car je ne comprends pas bien comment il va pouvoir être supporté par nos navigateurs actuels, ni encore moins pourquoi nous devrions avoir des éléments de sa syntaxe dans nos bons vieux codes en XHTML.
Moi j’ai une structure qui est équivalente selon la page :
Page d’accueil :
h1titre du siteh2navigationh1« derniers articles » (ou assimilé, selon le type de site)h2(un par bloc dans le bloc principal)h1de plus pour les liens, qui encadre deuxh2, un en français et un en anglais)Page intérieure :
h1pour titre du siteh2pour la navigationh1spécifique à la pageh2(un par bloc, notamment pour les intertitres dans le contenu, un pour les commentaires, un pour les « méta-informations » sur l’article)Pour moi, faute d’un navigateur qui sache tirer facilement toutes les informations du
head(notamment les informations liées au titre du site et à la navigation), je comprends unbodyHTML comme l’agrégation de deux types de contenus :Donc je suis passé à 2
h1par page depuis des années.En revanche là où je suis sanas doute un affreux maniaque c’est dans la structure hiérarchique que je m’impose : ce n’est pas parce qu’un truc est présenté en plus petit qu’il faut prendre un
h4alors qu’à cet endroit-là du document il s’agirait d’unh2. C’est le boulot de CSS de prendre cette information strictement visuelle en charge. C’est là où je me bats le plus dans les projets auxquels je contribue.On s’éloigne un peu de la problématique intiale (le nombre de h1) mais j’en profite pour rebondir sur cette question à l’origine de pas mal de guéguerres entre intégrateurs et référenceurs :
Doit-on abandonner le skinnage CSS systématique des balises de titres en fonction de leur nature pour leur préférer un skinnage par classe ?
Si d’une page du site à l’autre, le h1 se balade dans la source comme ça semble être recommandé (la métaphore de la « page intérieure du livre » est assez séduisante), il faut passer par un système de classes…
Instinctivement, j’ai tendance à hiérarchiser mes contenus de façon iso sur chaque page de mes sites (la lubie d’informaticien dont parle Eric 😉 )… mais je dois y renoncer de plus en plus fréquemment sous les contraintes, notamment, des référenceurs.
Il semblerait donc que ce soit une bonne chose ?
Ca n’empêchera pas les référenceurs d’exiger des h6 dans les fils d’ariane (hin Steph ?
) mais ça peut me pousser à réviser ma façon de structurer mes feuilles de style et mes pages…
STPo en fait la réponse est oui : comme je le disais, la représentation d’un titre ne doit pas être liée qu’à sa représentation graphique.
J’ajoute en post-scriptum tardif à ce que je disais précédemment que bien sûr, cette hiérarchie hyper stricte est souvent difficile à imposer postérieurement - or c’est souvent après la bataille qu’on invite les sherpas de l’accessibilité pour minimiser les dégâts, en actions correctives. Du coup nous imposons très peu de restructuration des titres lors de nos audits.
Personnellement, je suis sur la solution 1 depuis des années et je compte bien y rester, avec le
<h1>comme identifiant du site, et j’utilise le<h2>pour identifier la page, c’est à dire son contenu principal.L’internaute qui arrive sur une page interne de mon site depuis un moteur de recherche, il est bien content de commencer par savoir sur quel site il se trouve avec le
<h1>, et éventuellement donc qu’il peut lui faire confiance, puis qu’il est bien sur un contenu pertinent avec le<h2>.Après, au cours de sa navigation, il sait toujours qu’il est resté sur le même site avec le
<h1>, ce qui est aussi intéressant.Alors certes le
<h1>donne un meilleur référencement que le<h2>, mais la structure sémantique du contenu doit servir l’utilisateur avant de servir les moteurs de recherche.Je me permets de souligner que lorsqu’on « ruse » en déplaçant en CSS le menu avant le contenu qui le précède dans le code source, les points 10.3 et 10.4 du label Accessiweb ne pourront pas être validés. Pour rappel :
Critère 10.3 :
Critère 10.4 :
Le but de ces critères est de permettre aux utilisateurs de tabulation ou de synthèse vocale de pouvoir utiliser l’affichage du navigateur en parallèle. (L’ordre considéré comme logique étant : de gauche à droite et de haut en bas.)
Au passage : ce point avait été soulevé sur le forum Alsacréations en 2005, à l’apparition du label.
Pour respecter ces critères, il faut donc éviter les solutions « source-ordered » pour le moment, et attendre HTML5 qui nous permettra d’indiquer à quelle section de la page un titre se rapporte. En espérant que les moteurs de recherche mettent à jour leurs algorithmes aussi vite que le souhaitent les intégrateurs !
Justement, comme je le soulignais dans le billet, j’ai l’impression de ne pas faire entorse à ses points. Je ne note aucun illogisme.
Mais c’est peut-être ma comprehension de la règle qui est fausse.
Très intéressante lecture sûr alsa par ailleurs !
Je propose d’encadrer cette magnifique phrase de Nicolas et de la servir à tous les référenceurs naturels qui foutent des titres dans n’importe quel ordre parce que le vaudou de google leur laisse supposer que parmi une centaine de critères flous, foutre le bordel dans la hiérarchie d’une page, c’est une vache de bonne idée.
(tiens j’ai dit mon lot de grossièretés pour la semaine, mais je suis comme Nicolas : parfois, penser aux robots avant de penser aux humains, ça me hérisse)
Stéphane, n’en fait pas trop, ils vont croire que je t’ai soudoyé pour que tu dises du bien de moi ! 😉
Sérieusement, très flatté que tu valides ma façon de penser.
(Par contre je n’ai pas noté le numéro de ton compte en Suisse, Nicolas ?) 😉
Vincent : Si la navigation de gauche vient après le contenu principal dans le code source, mais qu’elle est positionnée à gauche par CSS, l’ordre du code source et celui de l’affichage diffèrent, ce qui invalide le point 10.3.
Autre conséquence, si on tabule dans la page, le focus passera du header au contenu principal, puis à la navigation de gauche. L’ordre de tabulation diffère de l’ordre d’apparition des liens, point 10.4 invalidé.
J’en tire donc 2 conclusions :
Pour moi, et de multiples études le mettent en évidence, quand on arrive sur une page, on la scanne d’abord d’en haut à gauche vers en bas à droite, puis on revient vers la gauche et éventuellement vers le haut à droite.
Donc la navigation gauche est bien vue après le contenu principal.
Tiens, la mère de tous les articles sur le sujet, on avait oublié d’y faire référence : title et h1, titre de section et titre de document: le malentendu.
[…] Combien peut-on mettre de « H1 » dans une page ? […]
Laisser un commentaire