5568 sujets

Sémantique web et HTML

Hiérarchie des Hn

Bonjour,

Tout site web a un titre. Et toute page web spécifique, à l'intérieur du site, a aussi un titre. Je me demande donc à quel titre il convient d'assigner la balise H1.

Imaginons qu'on soit sur un site consacré aux fruits, sur chaque page du suite j'aurai le titre Les fruits.
Ensuite, chaque page présentera un fruit, ainsi j'aurai par exemple une page qui aura pour titre Les pommes.

Logiquement, la balise h1 ne doit être utilisée qu'une seule fois par page, car une page ne doit traiter que d'un sujet et d'un seul. Faire deux balises h1 dans une même page me semble contraire à la sémantique...

Alors, qui de Les fruits ou de Les pomes doit recevoir le h1 ? Et si c'est les pommes, quelle balise doit-on donner au titre du site ?

Dans le même ordre d'idées, quand on a une liste de menus et de sous-menus, faut-il utiliser les balises Hn pour les titres de menus ?

Merci d'avance,
Dzana
Bonjour,

Ce débat a déjà fait rage à maintes reprises sur ce forum et ailleurs sur le web.
IL en ressort plusieurs théories différentes et contradictoires sur l'utilisation ou la non-utilisation de H1 , qui peuvent tout autant se justifier les unes que les autres.

1. H1 doit contenir le titre du site et H2 le titre de la page, les titres de section de plus haut niveau du document ne commencent qu'à H3.

Exemple :

<h1>Les recettes de grand-mère</h1>
<h2>Tarte au pommes</h2>
<h3>Ingrédients</h3>
...
<h3>Préparation</h3>
...


2. H1 doit contenir les deux informations à la foi, les titres de section de plus haut niveau du document peuvent commencer à H2.

Exemple :

<h1>Les recettes de grand-mère -- Tarte aux pommes</h1>
<h2>Ingrédients</h2>
...
<h2>Préparation</h2>
...



3. La balise title seule a la fonction de transmettre le nom de site et/ou le titre de page. Les H1 doivent représenter les titres de section de plus haut niveau du document proprement dit, par exemple les chapitres du livre plutôt que son titre, puisque ce dernier est véhiculé par title.

Exemple :

<head>
<title>Les recettes de grand-mère</title>
...
</head><body>
<h1>Tarte aux pommes</h1>
<h2>Ingrédients</h2>
...
<h2>Préparation</h2>


Cette dernière théorie permet en outre de justifier l'apparition de plusieurs H1 sur la même page. Imaginons pour notre exemple que nous aimerions avoir un compilé de plusieurs recettes en un seul document, ce qui permet de l'imprimer ou de générer un PDF plus facilement par exemple. Ici, ce serait totalement valide, et avec ce type de structure, c'est la meilleure façon d'y arriver.

Arrivé à ce point des choses, je voudrais te conseiller l'option n°3, que je trouve la plus sémantiquement correcte.

Le gros problème de cette structure-là est que le nom du site n'apparaît pas de façon assez significative. Hormis un minuscule intitulé de fenêtre, c'est à peu près tout et c'est évidemment bien moindre.

C'est ainsi que je me replie sur les options 1 et 2, qui sont presque équivalentes en fait. Title n'étant qu'un petit intitulé de fenêtre, autant le remplir avec à la fois le nom du site et le titre de la page, de toute façon il ne se voit presque pas.

Pour ta question sur les menus, il faut évidemment utiliser des titres Hn si tes menus sont arborescents, au profit des listes de définition, par pitié.
Modérateur
Salut Dzana (et QuentinC), Smiley smile

Je dirais qu'il n'y a pas de règle en soi. On peut, tout aussi bien, mettre un h1 sur "Les fruits" que sur "Les pommes". Ca dépend plus des objectifs qu'autre chose.

Ceci dit :
a écrit :
Logiquement, la balise h1 ne doit être utilisée qu'une seule fois par page, car une page ne doit traiter que d'un sujet et d'un seul.
Bien que je partage pleinement ton avis, ce n'est pas, là encore, une règle ; c'est juste préférable pour la clarté. Ce principe devrait donc t'aider à faire ton choix car ta page, traite-t-elle des pommes ou des fruits en général ? Smiley cligne A priori ce serait plutôt le premier cas donc ton titre h1 semble tout trouvé.

La répétition de l'information "Les fruits" n'est pas obligatoire non plus ; c'est juste une aide permettant de savoir où on se situe dans le site. Maintenant, si on y regarde bien, rien ne t'oblige à en faire un titre. Tu pourrais, par exemple, te contenter de mettre un fil d'ariane à la place, ce serait tout aussi bien.

Disons que beaucoup de personnes prennent l'habitude de mettre le titre du site en tant que h1 parce qu'ils considèrent cette information comme étant le titre principal. Ca arrive, en effet, mais en fait, il arrive souvent que ce ne soit pas le cas.
Si, par exemple, on prend le cas d'un site nommé "KiwiLand" qui traite de la culture du kiwi, le nom du site n'est pas un titre mais une simple identité. La répétition d'un titre :
<h1>KiwiLand</h1>
ne semble alors pas justifié. (La répétition du nom du site, oui, mais pas en tant que titre puisque la page ne traite pas directement de cette information)

a écrit :
Dans le même ordre d'idées, quand on a une liste de menus et de sous-menus, faut-il utiliser les balises Hn pour les titres de menus ?
Ca peut être une aide pour les lecteurs d'écran. N'ayant pas une vision globale du document comme on peut l'avoir avec un navigateur graphique, ce titre peut permettre de mieux se repérer. Aussi, bien souvent, dans ce dernier cas, on peut se dire que le titre est inutile voire même visuellement gênant... pour l'intégration dans le design entre autres. Dans ce cas, on peut donc cacher ce titre, non pas par un "display: none" car certains lecteurs d'écran l'interprètent mais plutôt, en suivant cette technique :

http://www.blog-and-blues.org/weblog/2004/06/10/239-cachez-ce-sein-que-je-ne-saurais-voir
Modifié par koala64 (12 Aug 2007 - 08:10)
Je ne vois pas en quoi il devrait y avoir qu'un seul h1. Une page peut avoir plusieurs sections non ?

Il y a une chose qui ne va pas dans ton exemple, c'est que tu mets en title le titre du site, alors qu'il faudrait mettre le titre de la page.

Title : La pomme - Les fruits
H1 : La pomme verte

H2 : la pomme périmée
H2 : La pomme flamboyante

H1 : La pomme rouge
H2 : La pomme flamboyante
...

Title : La poire - Les fruits
H1 : La poire verte

H2 : la poire périmée
H2 : La poire flamboyante

H1 : La poire rouge
H2 : La poire flamboyante
...
Modifié par JyuniX (12 Aug 2007 - 10:17)
Modérateur
JyuniX a écrit :
Une page peut avoir plusieurs sections non ?
oui bien sûr mais ce que tu mets en title peut être répété en h1, diminuant ainsi tous les autres titres d'un cran.

Title : La pomme - Les fruits

H1 : La pomme - Les fruits
    H2 : La pomme verte
        H3 : la pomme périmée
        H3 : La pomme flamboyante
    H2 : La pomme rouge
        H3 : La pomme flamboyante
...
Ta structure n'en reste pas moins logique pour autant ; tu fais juste sauter le titre de plus haut niveau en considérant que le title (placé dans l'entête) suffit.

Pour ma part, j'en dirais que si on a :

un seul h1 -> le document se veut exhaustif et lorsqu'on arrive sur la page, on sait d'entrée de jeu que celui-ci parle des pommes.

plusieurs h1 -> le document ne l'est pas forcémment... du moins, on n'en sait rien puisque le title, suivant l'outil dont on se sert n'est pas toujours indiqué (ex.: téléphone) donc... interrogation du lecteur (y'a-t-il toutes les pommes ?), sentiment de frustration, déprime et tout ce qu'il s'en suit. Smiley bawling
Modifié par koala64 (12 Aug 2007 - 11:02)
Sinon, juste une idée comme ça: il est tout à fait possible de rappeler le titre du site sans pour autant le caser dans un H1.

Par exemple, une page d'accueil de blog:
<title>Le blog de Tartempion</title>
<h1>Le blog de Tartempion</title>
<h2>Navigation</h2>
...
<h2>Derniers billets</h2>
...


Et un billet du blog en question:
<title>Mon super billet - Le blog de Tartempion</title>
<p>Le blog de Tartempion</p>
<h1>Navigation</h1>
...
<h1>Mon super billet</h1>
...


Bien sûr, ça n'est qu'un exemple rapide. Quoi qu'il en soit, l'essentiel est de proposer une structure de titres cohérente. Mais il n'y a pas de structure-type parfaite.
Modifié par Florent V. (12 Aug 2007 - 15:26)
Bonjour tout le monde,

Merci beaucoup pour vos réponses. Heu, tous vos exemples me semblent très bons et très cohérents, j'ai encore plus l'embarras du choix maintenant ! Et en plus vos réponses ont fait naître de nouvelles questions, sûrement déjà débattues, comme par exemple s'il faut d'abord afficher le menu puis le contenu, ou bien le contraire.
Je continue de penser qu'il ne doit y avoir qu'un seul h1 par page. Partant de là, si on considère qu'il y a toujours au moins deux grandes parties dans une page (le contenu et le menu), cela signifie que ces deux grandes parties héritent d'un h2 :
<h1>Titre du site</h1>
<h2>Menu de navigation</h2> 
......
<h2>Titre de la page</h2>
......

Tout de même dommage que le titre de la page ne soit qu'en niveau 2... enfin la solution parfaite n'existe pas, c'est donc la structure pour laquelle je vais opter pour le moment, en attendant de peut-être trouver plus cohérent (de toutes façons je n'ai plus le droit de toucher au côté visuel avant le 31 août, concours oblige Smiley biggrin )

Merci encore,
Dzana
Modifié par Dzana (12 Aug 2007 - 14:42)
Dzana a écrit :
Heu, tous vos exemples me semblent très bons et très cohérents, j'ai encore plus l'embarras du choix maintenant !

Effectivement, il n'y a pas de réponse toute faite.

Ce qui est important: avoir une structure de titres cohérente, et ne pas en changer radicalement d'une page à l'autre. Par exemple, si on met le menu avant le contenu sur la page d'accueil, on gardera cette structure pour les pages suivantes. (Note: dans mon exemple ci-dessus, je n'avais pas respecté ce principe -- qui n'est pas non plus un principe absolu, à vrai dire. C'est maintenant corrigé.)

Dzana a écrit :
comme par exemple s'il faut d'abord afficher le menu puis le contenu, ou bien le contraire

L'un ou l'autre, peu importe. Les référenceurs diront peut-être qu'il faut placer le contenu avant les liens de navigation, au moins si on a un nombre important de liens. Pourquoi pas. On peut aussi avoir des contraintes de design qui font qu'il sera plus facile de placer le menu avant le contenu dans le code HTML. Mais, quelle que soit l'option choisie, aucune n'est vraiment plus pertinente que l'autre d'un point de vue structuration de la page. Par contre, on aura tout intérêt à se pencher sur les liens d'évitement et liens d'accès rapide. À ce sujet, chercher le tutoriel qui en parle dans les tutoriels d'Alsacréations.

Dzana a écrit :
Je continue de penser qu'il ne doit y avoir qu'un seul h1 par page

Non, c'est faux. Il n'y a pas de «il ne doit...». Le titre du document est le contenu de l'élément title, pas celui du premier h1 (ou de l'unique h1) du document.
Par contre, tu peux tout à fait préférer n'avoir qu'un seul h1 par page. Et y mettre le nom du site si tu le souhaites, pourquoi pas.
Si tu veux garder un seul h1 par page, que penses-tu de la structure suivante :

Page d'accueil 

Title ... Titre du site
H1 .. titre du site
H2 ..  navigation
H2 .. titre du contenu


Autres pages

Title ... Titre du contenu - titre du site
P ... Titre du site
P ... Navigation
H1 ... Titre du contenu


Le H1 sur la page d'accueil est le titre du site, puisque la page d'accueil est censée introduire le site. Sur les autres pages, on a un rappel du titre du site sous forme de paragraphe, un peu comme le chapitre et le titre du livre sont rappelés sur toutes les pages d'un bouquin. Et dans la mesure où la navigation n'appartient pas à strictement parler au document, (sauf sur la page d'accueil) elle n'a pas besoin d'un titre.
Vos deux exemples sont très pertinents. Cependant, étant donné qu'ils proposent une structure différente pour la page d'accueil et pour les autres pages, cela oblige à utiliser deux templates différents... Mais sinon, c'est effectivement sûrement la meilleure solution.
Dzana
Lanza a écrit :
Et dans la mesure où la navigation n'appartient pas à strictement parler au document, (sauf sur la page d'accueil) elle n'a pas besoin d'un titre.

Argh.

Faudrait pas voir à raconter des bêtises, tout de même. On a dit souplesse, pas erreurs patentes, hein! Smiley lol

La navigation n'appartient pas au document: en théorie, tout à fait. La navigation devrait ne pas s'afficher directement dans la page, mais via les éléments link, avec à chaque fois un attribut rel indiquant la nature du document annexe lié.
Voilà pour la théorie. Sauf que, dans la pratique:
1 - c'est un système limité (les types de relations possibles ne couvrent pas toujours l'éventail des liens que l'on peut avoir dans un menu de navigation;
2 - très rares sont les navigateurs qui ont exploité ou exploitent ces informations.

Bref, par la force des choses, on a été plus ou moins obligé d'insérer dans le document lui-même des éléments de navigation n'appartenant pas à la logique du document.

Partant, un des meilleurs moyens de marquer un système de navigation est le suivant:
<title>Le document</title>
  <h1>Le contenu principal du document</h1>
  <h1>Les éléments de navigation n'appartenant pas au contenu principal</h1>
  <!-- l'ordre des deux h1 n'a pas d'importance -->

ou encore:

<title>Le document</title>
  <h1>Le «site»</h1>
    <h2>Le contenu principal du document</h2>
    <h2>Les éléments de navigation n'appartenant pas au contenu principal</h2>
    <!-- l'ordre des deux h2 n'a pas d'importance -->


Ceci dit, la structure proposée peut encore passer. Je la rappelle rapidement:
<title>Titre du contenu - titre du site</title>
  <p>Titre du site</p>
  <p>Les éléments de navigation n'appartenant pas au contenu principal</p>
  <h1>Titre du contenu</h1>

Dans cet exemple, la navigation est donnée comme appartenant à «Titre du contenu - titre du site» (l'élément hiérarchique le plus direct étant le <title>). Pourquoi pas. Par contre, il faudra faire attention à ne pas placer le menu de navigation en deuxième, sinon il deviendrait soumis hiérarchiquement au h1 de «Titre du contenu», ce qui serait une erreur. Si on place la navigation après le contenu, il «faut» faire précéder les éléments de navigation d'un titre de section de niveau égal à celui du contenu principal.

Mais surtout, je disais que ton affirmation était une bêtise, pour la raison suivante: un titre de section isolant le menu de navigation est un dispositif utile, notamment pour l'accessibilité. Par exemple, cela permet une identification bien plus rapide des éléments de navigation lors de la navigation par titres avec un lecteur d'écran. Plus généralement, cela permet d'isoler les éléments de navigation du reste du contenu, ce qui n'est pas une mauvaise idée (litote).


Pfiou... ce sujet est plus trollesque que je ne l'aurais cru. Smiley ravi
Modifié par Florent V. (12 Aug 2007 - 18:11)
Sujet clos
Aller à