Hierarchie de titres

Bonjour à tous !

Voilà une question qui me pose très souvent problème lors de l'intégration d'une maquette graphique d'un site internet : la place du H1.

En effet, en générale, la structure du site est la suivante :

http://nsa27.casimages.com/img/2011/10/03/111003111942716199.png

Et du coup, je ne sais pas ou mettre le H1 ! Dans la logique il est à la place du "titre principal" mais dans les titres de rubrique, je pense mettre également des titres <hx>.

Donc je me retrouve avec des h2 dans ma colonne de gauche et un h1 et des h2... dans la colonne centrale...

Du coup, avez-vous la bonne solution ? Car la question revient à chaque début de projet !

Merci à vous !
Modifié par Zulie494 (03 Oct 2011 - 11:18)

Merci pour ta réponse Patidou.

En mettant le h1 sur le titre site, ne se pénalise-t-on pas au niveau référencement, puisque le titre est donc le même sur toutes les pages ?

Non pas du tout, j'ai un vieux billet inachevé qui est toujours bien classé dans Google et même des photos.
Modifié par Patidou (03 Oct 2011 - 12:35)

Commencer par h1 et continuer sans faire de saut genre h1 puis h4, tout pareil que Patidou sinon.

Zulie494 a écrit :
En mettant le h1 sur le titre site, ne se pénalise-t-on pas au niveau référencement, puisque le titre est donc le même sur toutes les pages ?

C'est le cas de 50% des sites (ou 90 ?) donc tu ne pénaliseras pas ton site par rapport aux autres
Par contre il faut que l'élément title soit le "titre principal" de ton schéma (plus le nom du site) sans quoi là oui tu te pénaliserais à avoir 10, 1000 ou 100.000 fois le même title !

Merci pour vos réponses

Moi ça me choque toujours un peu d'avoir des pages toutes structurées ainsi:

Nom du site
    Titre d'un bloc de navigation
    Titre d'un autre bloc de navigation
    Et encore un autre bloc de navigation pour la route
    Titre du contenu principal de la page
        Avec éventuellement des sous-titres
    Titre d'une invitation à la navigation ou autre contenu périphérique

Ce n'est pas faux, mais la structure résultante ne correspond pas à la structure réelle de la page, qui ressemble plutôt à ça:

Titre du contenu principal de la page
    Avec éventuellement des sous-titres
Ici tout le «chrome» du site web
    Titre d'un bloc de navigation
    Titre d'un autre bloc de navigation
    Et encore un autre bloc de navigation pour la route
    Titre d'une invitation à la navigation ou autre contenu périphérique

(Le fait qu'une partie du chrome du site web se trouve au dessus ou à gauche du contenu principal ne signifie pas que ce chrome se trouve nécessairement plus haut dans le plan du document, hein.)

Les éléments sectionnant en HTML5 permettent justement de refléter dans le code la structure réelle (sous réserve que les besoins de mise en page ne viennent pas la perturber, mais c'est une autre problématique...). Avec quelques limites:
- Le plan du document est un arbre, concept qui convient assez peu aux applications... et à une bonne partie des sites de manière générale.
- Il n'y a pas de mécanisme pour donner un label non visible (métadonnée) à une section.

Une idée comme ça: le «nom du site» jouant souvent le rôle de lien de retour à la vue principale du site (accueil), ça peut être pertinent de l'inclure dans un NAV global avec tout le reste de la navigation. Genre:

<article>
    Titre du contenu principal de la page
        Avec éventuellement des sous-titres
</article>
<nav>
    Nom du site
        Titre d'un bloc de navigation
        Titre d'un autre bloc de navigation
        Et encore un autre bloc de navigation pour la route
        Titre d'une invitation à la navigation ou autre contenu périphérique
</nav>

Mais de manière générale je crois qu'il n'y a pas vraiment de solution idéale, même HTML5 garde une orientation «document unique» avec des patchs à coup de <nav>, <section> et autre <aside> qui aident mais ne résolvent pas tout à fait le problème.

Partant de là, s'il y a des raisons solides en SEO de faire des choses fausses comme ceci, ça ne me choque pas spécialement:

    <h2>Nom du site</h2>
        <h3>Titre d'un bloc de navigation</h3>
        <h3>Titre d'un autre bloc de navigation</h3>
        <h3>Et encore un autre bloc de navigation pour la route</h3>
<h1>Titre du contenu principal de la page</h1>
    <h2>Avec éventuellement des sous-titres</h2>
        <h3>Titre d'une invitation à la navigation ou autre contenu périphérique</h3>

PS: tous mes exemples sauf le dernier sont des représentations en pseudo-code, hein.
Modifié par fvsch (06 Oct 2011 - 16:52)

fvsch a écrit :
Partant de là, s'il y a des raisons solides en SEO de faire des choses fausses comme ceci, ça ne me choque pas spécialement:

    <h2>Nom du site</h2>
        <h3>Titre d'un bloc de navigation</h3>
        <h3>Titre d'un autre bloc de navigation</h3>
        <h3>Et encore un autre bloc de navigation pour la route</h3>
<h1>Titre du contenu principal de la page</h1>
    <h2>Avec éventuellement des sous-titres</h2>
        <h3>Titre d'une invitation à la navigation ou autre contenu périphérique</h3>

Pour l'expert Accessiweb que je suis, c'est d'autant plus choquant que la hiérarchie des titres n'est pas pertinente (on ne commence pas par un h1) et est donc invalidée en cas d'audit d'accessibilité.

Derrière tout ça le fameux troll de un unique ou plusieurs h1. La deuxième, mon colonel .

Victor BRITO a écrit :
Pour l'expert Accessiweb que je suis, c'est d'autant plus choquant que la hiérarchie des titres n'est pas pertinente (on ne commence pas par un h1) et est donc invalidée en cas d'audit d'accessibilité.

Ouais mais bon si Accessiweb c'était de l'accessibilité ça se saurait. </vendredÿ>

Plus sérieusement, oui c'est un plan de document faux, mais si les UA ne sont pas fichues d'utiliser correctement un tel plan (faux mais cohérent et compréhensible) c'est un peu leur faute.

<vendredÿ>

fvsch a écrit :
Ouais mais bon si Accessiweb c'était de l'accessibilité ça se saurait. </vendredÿ>

Alors, toi...
</vendredÿ>

Patidou a écrit :
h1 sur le titre du site dans le bandeau, h2 sur le titre principal (puis h3, h4 ,etc), h2 dans les rubriques. C'est la structures générale (et largement éprouvée) qu'on utilise sur les blogs (voir mon site).

Vraiment très intéressant la réflexion de ce topic ! Je suis justement à la recherche d'une structure (avec quelques limitations quand même : je ne veux pas rééditer tous les articles déjà postés !). Celle proposée par Patidou me semble intéressante, je l'ai adopté pour l'instant mais ça me choque un peu de voir le h2 de l'article au même niveau que celui des blocs de navigation.

Victor et fvsch, si vous êtes toujours là, qu'en pensez-vous ?
Modifié par Olivier C (10 Nov 2011 - 12:26)

Olivier C a écrit :
Victor et fvsch, si vous êtes toujours là, qu'en pensez-vous ?

Les solutions pragmatiques, c'est bien.
Un plan du document avec le nom du site en H1, la navigation en H2 et le titre du contenu principal de la page en H2, c'est cohérent.
Go for it.

fvsch a écrit :

Les solutions pragmatiques, c'est bien.
Un plan du document avec le nom du site en H1, la navigation en H2 et le titre du contenu principal de la page en H2, c'est cohérent.
Go for it.

Merci beaucoup