Structuration des titres sur un site

Bonjour,

sur la plupart des blogs ou sites, on a habituellement <h1> pour le titre du site, commun à toutes les pages. Ensuite arrive la liste des articles de la page, généralement en h2. Ce qui fait que lorsque l'on écrit les paragraphes dans l'article et que l'on a besoin de mettre un autre titre, on se doit d'utiliser h3 (si évidemment on ne veut pas donner l'impression de changer de sujet et dans ce cas là, autant écrire un nouvel article mais bon, ça dépend de ce que l'on veut faire). Bref, jusque là tout va à peu près bien.

Maintenant, si l'on regarde d'autres sites (Le monde, webRankInfo...) la structuration est différente. On peut par exemple ne pas avoir de titre pour le titre du site.
h1 est alors directement utilisé soit pour les titres des articles, soit pour le titre de la catégorie des articles.

Il est vrai qu'ils mettent l'accent sur les articles et non sur leur propre nom de boîtes (vu qu'ils sont connus j'imagine). Bref, je m'interroge donc
et j'aimerais avoir vos réflexions.
Modifié par Newzic (29 Jan 2010 - 15:16)

Bonjour,

<avis personnel>
Autant il me semble que pour la page d'accueil, le <h1> peut-être envisager pour le titre du site, autant je pense que pour les pages internes, ce n'est pas une bonne idée. Mettre l'accent sur le contenu de la page semble quand même être ce qui est le plus logique, non ?
</avis personnel>

Disons que la mise en exergue de l'intitulé de l'article ou de la catégorie par un h1 est essentiellement motivée par des soucis de référencement.

Cela dit, il n'est pas interdit d'insérer plusieurs éléments h1 dans une même page Web, à partir du moment où la hiérarchie des titres de section est respectée. D'ailleurs, il n'est pas exclu qu'avec l'arrivée du HTML 5 et de son élément section, certains soient tentés par la multiplication des h1.

Corinne S. a écrit :
Bonjour,

<avis personnel>
Autant il me semble que pour la page d'accueil, le <h1> peut-être envisager pour le titre du site, autant je pense que pour les pages internes, ce n'est pas une bonne idée. Mettre l'accent sur le contenu de la page semble quand même être ce qui est le plus logique, non ?
</avis personnel>

+1 C'est ce que je fais en général (quand je peux)

+1 également concernant la multiplicité des h1, tant que c'est justifié et logique.
Modifié par Laurie-Anne (29 Jan 2010 - 15:31)

Bonjour,

Structures possibles:

<title>Titre de la page</title>
    <h1>Nom du site</h1>
        (Contenu possible ici.)
        <h2>Titre de l'article</h2>
        (Contenu de l'article.)

<title>Titre de la page</title>
    <p>Nom du site</p>
    (Contenu possible ici.)
    <h1>Titre de l'article</h1>
    (Contenu de l'article.)

<title>Titre de la page</title>
    <h1>Nom du site</h1>
    (Contenu OBLIGATOIRE ici. Deux HN de même niveau qui se suivent = bug.)
    <h1>Titre de l'article</h1>
    (Contenu de l'article.)

J'aime pas trop la première possibilité, et j'aime mieux les deux suivantes.
Modifié par Florent V. (02 Feb 2010 - 18:09)

Florent V. a écrit :
... J'aime pas trop la première possibilité, et j'aime mieux les deux suivantes.

La première est pourtant celle utilisée par Alsacréations !! (chez OpenWeb aussi)
La seconde est effectivement souvent rencontrée (d'où ce post).
La troisième me dérange, 2 titres de même niveau, c'est comme si un livre avait 2 titres sur sa pochette dont le second serait le titre du premier chapitre...
Modifié par Newzic (29 Jan 2010 - 19:19)

Newzic a écrit :
La première est pourtant celle utilisée par Alsacréations !! (chez OpenWeb aussi)

C'est parce que Alsacréations et Openweb ont été codés par des incompétents.

Newzic a écrit :
La troisième me dérange, 2 titres de même niveau, c'est comme si un livre avait 2 titres sur sa pochette dont le second serait le titre du premier chapitre...

Sauf que ta page n'est pas une couverture de livre. Ce serait plutôt un chapitre. Avec une table des matières incluse (menu de navigation), et des contenus périphériques, et puis aussi...
Euh en fait ta page n'est pas un livre ou un élément de livre. Faut arrêter les analogies foireuse, hein!

En complément:
- Le H1 n'est pas le titre de la page. C'est le TITLE.
- Un H1 est un titre de section. Si ta page a plusieurs sections de premier niveau, tu as plusieurs H1 correspondants. L'idée selon laquelle une page ne devrait avoir qu'un seul H1 et que le H1 représente «le titre le plus important de la page» est fausse.
- Si tu as toute une partie avec nom du site, navigation, outils divers, etc., ben ça peut faire une section de premier niveau distincte de ton article. Donc H1 pour cette première section, H1 pour l'article.
Modifié par Florent V. (30 Jan 2010 - 13:47)

Florent V. a écrit :
C'est parce que Alsacréations et Openweb ont été codés par des incompétents.

Heeeuuu ... Si tu veux engager la discussion avec concepteurs d'Alsa, à toi l'honneur

Florent V. a écrit :
Sauf que ta page n'est pas une couverture de livre. Ce serait plutôt un chapitre. Avec une table des matières incluse (menu de navigation), et des contenus périphériques, et puis aussi...
Euh en fait ta page n'est pas un livre ou un élément de livre. Faut arrêter les analogies foireuse, hein!

En effet, une page d'un site n'est pas un élément d'un livre. Mais l'arborescence des titres de ta page peut être comparée à une table des matières (en terme de structure), qui est elle aussi une arborescence des titres.

Florent V. a écrit :
En complément:
- Le H1 n'est pas le titre de la page. C'est le TITLE.
- Un H1 est un titre de section. Si ta page a plusieurs sections de premier niveau, tu as plusieurs H1 correspondants. L'idée selon laquelle une page ne devrait avoir qu'un seul H1 et que le H1 représente «le titre le plus important de la page» est fausse.
- Si tu as toute une partie avec nom du site, navigation, outils divers, etc., ben ça peut faire une section de premier niveau distincte de ton article. Donc H1 pour cette première section, H1 pour l'article.

Vrai, vrai et vrai. Surtout le second point, sur lequel je suis entièrement d'accord !

Par contre, comment traiterais-tu, sémantiquement, le cas d'école où un menu niveau 2 reprendrait comme "titre" l'intitulé du menu niveau 1 correspondant ? Comme un titre de section (donc <h1>) distinct de l'article développé dans la page (lui-aussi en <h1> probablement) ?
Modifié par Ladytron (02 Feb 2010 - 15:59)

Ladytron a écrit :
Par contre, comment traiterais-tu, sémantiquement, le cas d'école où un menu niveau 2 reprendrait comme "titre" l'intitulé du menu niveau 1 correspondant ?

Pas bien compris le cas d'école. Un exemple, please?

PS: exemples ci-dessus mis à jour pour éviter les confusions.
Modifié par Florent V. (02 Feb 2010 - 18:10)

Florent V. a écrit :

Pas bien compris le cas d'école. Un exemple, please?

PS: exemples ci-dessus mis à jour pour éviter les confusions.

Un exemple ? En voici un (pour les besoins de la question), voir ici sur mon compte Free, illustrant mes propos.
Cela devrait être plus clair
Modifié par Ladytron (02 Feb 2010 - 19:45)

Donc là tu as:

Navigation de premier niveau
H1: Titre de la rubrique
    Navigation dans la rubrique
H1: Titre de l'article
    Contenu de l'article

Dans le meilleur des mondes tu aurais:

H1: Navigation
    H2: Rubriques
        Navigation de premier niveau
    H2: Rubrique actuelle: Titre de la rubrique
        Navigation dans la rubrique
H1: Titre de l'article
    Contenu de l'article

Sinon tu peux aussi avoir:

Navigation de premier niveau
H1: Titre de la rubrique
    Navigation dans la rubrique
    H2: Titre de l'article
        Contenu de l'article

Mais j'aime pas des masses cette solution.

Comme on n'est pas dans un monde idéal et que j'aime pas la troisième solution, ben on peut se contenter de la première je suppose.
Il y aurait aussi la possibilité d'utiliser la deuxième solution (très structurée) et de cacher certains titres. Je sais pas trop quoi penser de cette possibilité. Les contenus masqués c'est une piste glissante, avec les risques d'inaccessibilité quand c'est mal fait, les problèmes lors du développement et des évolutions du site (comme c'est masqué, on ne s'en occupe pas et les titres deviennent incohérents...). Mais c'est intéressant quand même.

Au final, pour moi il n'y a pas de structure «parfaite», et on perd un peu son temps à se demander si tel titre devrait être un H2 ou s'il faut faire remonter d'un niveau. Tant que le plan du document a une cohérence, je pense que ça suffit.

C'est très juste. J'en arrive à penser comme toi, au final.

Corinne S. a écrit :
Bonjour,

<avis personnel>
Autant il me semble que pour la page d'accueil, le <h1> peut-être envisager pour le titre du site, autant je pense que pour les pages internes, ce n'est pas une bonne idée. Mettre l'accent sur le contenu de la page semble quand même être ce qui est le plus logique, non ?
</avis personnel>

Comment faire alors dans une boutique en ligne dans laquelle on utilise un template qui contient le <h1> et qui, donc, va se trouver répété sur chaque page ?
Par exemple dans une page de la boutique je serais bien tenté de mettre un second <h1> pour le nom d'un produit. Je sais qu'avoir deux <h1> n'est pas un souci mais est-ce que pour le référencement ce deuxième <h1> ne risque pas de perdre de sa valeur ?

pan a écrit :
Comment faire alors dans une boutique en ligne dans laquelle on utilise un template qui contient le <h1> et qui, donc, va se trouver répété sur chaque page ?
Par exemple dans une page de la boutique je serais bien tenté de mettre un second <h1> pour le nom d'un produit. Je sais qu'avoir deux <h1> n'est pas un souci mais est-ce que pour le référencement ce deuxième <h1> ne risque pas de perdre de sa valeur ?

Du point de vue de l'accessibilité, il peut y avoir plusieurs h1, à partir du moment où la hiérarchie des titres de section est correcte.

Du point de vue du référencement, il n'y a pas que l'élément h1 à prendre en compte pour donner plus de poids à certains mots-clés : l'élément title joue aussi un rôle capital. Autrement dit, ne néglige pas d'insérer le nom du produit dans l'élément title, et en premier lieu.

pan a écrit :
Comment faire alors dans une boutique en ligne dans laquelle on utilise un template qui contient le <h1> et qui, donc, va se trouver répété sur chaque page ?

Il est également possible de ne pas mettre le titre du site (pas le title) dans un h1.

pan a écrit :
Par exemple dans une page de la boutique je serais bien tenté de mettre un second <h1> pour le nom d'un produit. Je sais qu'avoir deux <h1> n'est pas un souci mais est-ce que pour le référencement ce deuxième <h1> ne risque pas de perdre de sa valeur ?

Normalement, non, très peu d'impact.

pan a écrit :
Comment faire alors dans une boutique en ligne dans laquelle on utilise un template qui contient le <h1> et qui, donc, va se trouver répété sur chaque page ?

Eh bien si les outils que tu utilises ne te permettent pas de faire les choses bien, alors les outils que tu utilises ne te permettent pas de faire les choses bien, et tu peux en conclure que les outils que tu utilises ne te permettent pas de faire les choses bien.

Je sais pas si je suis clair?
Modifié par Florent V. (20 Feb 2010 - 15:03)

pan a écrit :

Comment faire alors dans une boutique en ligne dans laquelle on utilise un template qui contient le <h1> et qui, donc, va se trouver répété sur chaque page ?
Par exemple dans une page de la boutique je serais bien tenté de mettre un second <h1> pour le nom d'un produit. Je sais qu'avoir deux <h1> n'est pas un souci mais est-ce que pour le référencement ce deuxième <h1> ne risque pas de perdre de sa valeur ?

Franchement, du point de vue qualité, avoir:

<h1>Site</h1>
<h2>Produit</h2>

Ou avoir:

<h1>Site</h1>
<h1>Produit</h1>

Ou avoir

<blop>Site</blop>
<h1>Produit</h1>

Ou avoir

<h1>Site</h1>
<blop>Produit</blop>

...est indifférent. Ce n'est pas sur cette question que cela s'évalue. Cela s'évalue au vue du contenu précis et du détail du code.
Modifié par Laurent Denis (21 Feb 2010 - 14:24)

Laurent Denis a écrit :


Franchement, du point de vue qualité, avoir:

<h1>Site</h1>
<h2>Produit</h2>

Ou avoir:

<h1>Site</h1>
<h1>Produit</h1>

Ou avoir

<blop>Site</blop>
<h1>Produit</h1>

Ou avoir

<h1>Site</h1>
<blop>Produit</blop>

...est indifférent. Ce n'est pas sur cette question que cela s'évalue. Cela s'évalue au vue du contenu précis et du détail du code.

Ok c'est clair, je vois ce que tu veux dire.
Merci