Les titres de section
Ce que l’on appelle « hiérarchie des titres » ou plus simplement hiérarchie est l’ensemble des éléments titres de section balisés de <h1> à <h6> (que l'on appellera "Hn"). Le W3C définit le titre de section comme un élément qui décrit brièvement le sujet de la section qu’il introduit. Ce titre de section ne doit pas être confondu avec le titre de la page, balisé avec title, exclusivement dans le head du document.
La hiérarchie des titres sert principalement à structurer le document mais elle a bien d’autres utilités, voire même nécessités :
- Pour les utilisateurs de lecteurs d’écran, les titres <hN> sont un moyen efficace de naviguer dans la page, mais les logiciels de lecture d’écran ne peuvent générer une liste de titres compréhensible que si la hiérarchie des titres du site est correcte.
- Pour les robots indexeurs des moteurs de recherche, les titres de haut niveau représentent du contenu important et ont donc une pondération plus forte que le reste du contenu. Ces titres doivent donc être présents et bien utilisés.
- Les visiteurs scannent les pages d’un site plus qu’ils n’en lisent le contenu. Les titres de section et de sous-section étant des points de repère, il est important que ces titres soient présents et annoncent le contenu qui les suit.
Dans la pratique
La hiérarchie des titres d’une page web doit être :
- Logique : elle doit suivre le schéma d’une table des matières comme pour tout document textuel.
- Continue : elle doit commencer par un H1 et ne pas comporter de sauts de niveau (un H1 ne peut être directement suivi d’un H3, il doit y avoir au moins un H2 entre les deux).
- Pensée pour l’utilisateur, et non pour le référencement : les titres doivent être des titres et non des mots clés sans rapport avec ce qui suit, ni des paragraphes complets.
- Sémantique, et non visuelle : un élément Hn doit être utilisé pour sa valeur sémantique (titre de niveau n) et non pour son rendu visuel (qui peut être totalement transformé avec CSS).
- Ergonomique : Les utilisateurs sont habitués aux titres, ils les aident à se retrouver dans la page, tant papier que virtuelle, et à aller à l’essentiel de l’information. La présence de titres de section rend également le texte plus digeste et lisible et de fait aide à retenir l’attention, très volatile sur Internet, du lecteur.
Peut-il y avoir plusieurs <h1> dans une même page ?
Oui, c’est tout à fait possible. Bien que certains pensent que <h1> ne doit être utilisé qu’une seule et unique fois dans la page aucune règle, sémantique ou autre, ne tranche sur ce sujet. L'élément <h1> doit désigner un titre de niveau 1, si la construction de la page implique la présence de plusieurs titres de niveau 1, il est tout à fait logique d’utiliser l'élément approprié : <h1>. Par contre, ce dernier ne doit en aucun cas être utilisé, à tort, pour « booster le référencement » d’un site en y mettant autre chose que des titres de niveau 1.
Commentaires
Article intéressant. Par contre pour le h1 je suis d'accord avec le fait qu'il doit y en avoir qu'un seul par page. C'est plus logique selon moi.
... sauf si ce qui constitue habituellement ton titre de niveau 1 n'existe pas dans le design de ta page. Dans ce cas-là tu auras plusieurs h1 (qu'habituellement tu aurais balisé par des h2). C'est (devenu) inhabituel mais si tu n'as pas ton h1 bah tes titres "remontent d'un cran".
... d'où la mauvaise utilisation du titre de niveau 1 qui ne sert plus à hiérarchiser mais à donner un titre aux pages.
Bon article !
Je ne vois pas en quoi plusieurs <h1> serait une chose impossible ou sans grand sens.
Si un document comporte plusieurs sections dont le niveau est le même et dont les thématiques sont différente ou sont une conséquence (suite), et non une sous-partie (où un <h2> serait plus approprié), l'utilisation de plusieurs <h1> est un choix logique ET sémantique.
C'est comme une table des matières : une arborescence des titres respectant la logique d'un document, et cette arborescence comporte beaucoup de sections dont le niveau est le même !
L'utilisation de la balise h1 sur alsacreations est assez "triviale" (le mot n'est pas adapté mais je n'ai pas trouvé mieux) car elle entoure la bannière et est située de ce fait en dehors du contenu (elle est bien dans le flux mais en dehors du texte en lui-même). J'en veux pour preuve le lien "aller au contenu" qui nous envoie vers la première balise h2.
Je pense qu'ici justement, une deuxième balise h1 ne serait pas de trop. Elle devrait selon moi remplacer la balise h2 existante. Bref, il faudrait décaler l'ensemble des balises hn d'un niveau.
@jerrywham : Ouep, mais ça va sans doute pas se faire car il faudrait revoir tous les articles pour remonter d'un cran tous les niveaux de titre. À la main. Donc bon. Et puis même si l'utilisation du H2 n'est pas parfaite, elle ne pose pas de problème d'accessibilité et le plan du document reste cohérent. C'est juste pas super optimisé pour le référencement, à la rigueur.
@ Florent V : Je ne demande pas que vous changiez toute la structure du site. J'aurais dû ajouter "dans l'absolu" à la fin de ma dernière phrase.
C'était juste pour rebondir sur cet article et constater que ces bons conseils ne sont pas forcément appliqués là où on pense qu'ils le devraient (il n'y a aucune ironie dans mes propos, que les choses soient claires).
Ce n'était pas une critique. Juste un constat.
Et je voulais apporté par ce commentaire un peu d'eau au moulin de la note de fin d'article : oui il est possible d'utiliser plusieurs balises h1 sur une même page...
Je ne me lasserai jamais de relire cet excellent article Blog and Blues de Laurent Denis sur la question. Un véritable modèle de synthèse. :D
Petit rappel très appréciable. Merci.
Bonjour, merci pour ce rappel :-)
Je ne sais pas d'ou vient cette croyance du h1 unique mais elle est bien ancrée. Peut-être aussi est-ce un impératif pour le référencement ?
J'utilise un outil très pratique pour avoir un aperçu rapide de la hiérarchie de titres d'une page : HeadingsMap (addon Firefox)
Disponible à l'adresse suivante : https://addons.mozilla.org/fr/firefox/addon/7203
@ivanovic La version 1.0 de Accessiweb prônait le H1 unique. Ce n'est pas LA raison mais surement une des raisons qui à contribué à cette rumeur.
+1 avec ivanovic, j'ai découvert l'add-on HeadingsMap récemment, mais c'est aussi indispensable que Firebug :D
-> https://addons.mozilla.org/en-US/firefox/addon/7203 <-
Personellement (et c'est peut etre un tord) ma balise h1 est souvent le titre du site, ou le titre de la page que l'on consulte. Parfois le logo du site est entouré par un h1 mais c'est rare. Je ne sais pas si c'est bien ou mal.
Par contre pour l'utilisation de la balise h1 pour la SEO c'est mal, mais ca marche diaboliquement bien. Pour le moment en tout cas.
Je pense que le logo ou le titre du site dans un h1 peut-être tout à fait pertinent sur une page d'accueil, mais pas sur les pages intérieures.
@ivanovic > Pour le référencement, il y a encore beaucoup de monde à croire qu'effectivement, l'utilisation de plusieurs h1 peut pénaliser un site. Ce qui est faux (du moins nulle recommendations de moteurs n'en fait cas) et heureusement.
@Clawfire > Cette technique (mettre le titre du site en h1 sur toutes les pages) n'est pas mauvaise en soit, tant que le reste de la hiérarchie est correcte, ce n'est pas pénalisant. Mais je préfère effectivement réservé ce h1 au titre de l'article de la page vue (Attention à ne pas confondre titre de page <title></title> et titre de section <hn></hn> !), sauf pour l'index.
@Laurie-Anne : Bon ca va alors. Disons que j'utilise ce h1 pour incorporé l'idée générale de la page, dans le cas des articles un résumé, afin que le moteur de recherche soit plus réceptif et l'indexion un peu plus rapide. Apres je garde une hiérarchie cohérente dans le reste de la page.
Mais en parlant de hiérarchie. Comment gérez vous par exemple une sidebar. Son contenu est présent et visible mais pas forcement pertinent face au contenu principal de la page. Vous utilisez quoi comme niveau de titre par exemple ?
Très bon article merci !
Pour ma part je hiérarchise souvent par bloc.
Par exemple, le bloc header peut avoir un titre (nom du site) et un sous-titre (slogan). On aurait donc ici un h1 pour le titre et un h2 pour le slogan.
Dans la division qui supporte le contenu principal du site je repars à zéro dans la hiérarchie, à savoir un h1 pour le titre de la page sur laquelle je me trouve, puis je baisse dans la hiérarchie "logiquement" en fonction de la structure de ma page.
Pour ce qui est de la sidebar j'utilise souvent des h5 de manière tout à fait arbitraire (et illogique si je suis mes pratiques précédentes). J'utilise rarement les H5, je les réserve donc pour cette sidebar s'il y a.
M'enfin voilà, ce sont de petites habitudes personnelles qui ne sont peut-être pas très bonnes d'ailleurs :p
@Riku Asakura : c'est amusant de dire "Très bon article" et un peu plus loin "Pour ce qui est de la sidebar j'utilise souvent des h5" ;)
L'un des objectifs de cet article est justement de rappeler qu'il faut suivre une hiérarchie cohérente (en l'occurrence pas de H5 si le titre de section précédent n'est pas un H4).
On ne choisit pas un niveau en fonction d'un rendu visuel attendu ni d'une "importance" plus ou moins grande accordée à un titre de section mais simplement en fonction de la structure du document.
@Heyoan : c'est justement pour cela que j'estime que c'est un bon article.
Il permet de recadrer certains points.
Je n'ai jamais eu la prétention de savoir organiser à la perfection la hiérarchie de mes titres sur une page, c'est pour cela que je trouve l'article très bon et que mes habitudes vont être changées. ;)
D'un autre côté ma hiérarchie reste cohérente, il n'y a que l'utilisation arbitraire d'un h5 dans la sidebar qui peut laisser à désirer... bien qu'au final dans mes hiérarchies de page ce n'est pas comme si il y avait un h4 sous un h5... (il manque juste parfois un h4 avant le h5... mais comme je le disais, les habitudes se changent :p)
Au plaisir ;)
@Clawfire > Mettre tout un paragraphe dans un H1 c'est penser référencement et non logique...
Pour la sidebar, je ne vois aucun mal à la faire commencer par un h1 ou h2 (ou autre) suivant la construction du site.