5568 sujets

Sémantique web et HTML

Balises, titres et <h1,2,3,x>

Bonjour à tous.

Je suis en train de me poser une question... Est-il correct d'utiliser des balises <h1> (ou 2 ou 3 ou 4 etc etc) en dehors du corps d'une page ?

Admettons qu'une page contienne (dans l'ordre d'apparence dans le HTML) le header, le panier (e-commerce), la navigation puis le contenu avec un titre, un paragraphe, un sous titre et un autre paragraphe puis le footer.


<div id="header">Header
   <div id="panier">Panier</div>
</div>

<div id="navigation">Liens</div>

<div id="corps">
   <titre>Bonjour</titre>
   <p>et bienvenue</p>
   <sous-titre>Vous êtes chez moi</sous-titre>
   <p>mais faites comme chez vous</p>
</div>

<div id="footer">Footer</div>


Maintenant, ma question : comment doit-on baliser "Mon panier" dans #panier... Pour respecter la hiérarchie des titres, il faudrait lui mettre un <h1> seulement ce n'est pas à proprement parler le contenu important de la page.

En partant de là, est ce qu'il est préférable de conserver les balises h pour le corps uniquement ou peut-on utiliser ces balises partout, en les appliquant aux éléments que l'on souhaite en fonction de la hiérarchie des titres et les styliser selon le besoin ?

J'espère que je me suis fait comprendre, j'ai un peu de mal à verbaliser la chose... Smiley biggol

Merci d'avance !
D'un point de vue logique, rien n'empêche d'avoir:
<h1>Mon panier</h1>
<p>Infos sur le panier, lien pour passer commande...</p>

<h1>Fiche produit: Sandales promo spéciale vacances</h1>
<p>Détail de la fiche produit...</p>

C'est parfaitement valide en HTML, ça fait un plan du document correct sans «trou». Bon, pour que le plan soit juste il te faudrait un autre H1 avant ta navigation, parce que sinon ça veut dire que ta navigation appartient au panier, ce qui est faux. En suivant cette logique, il faudrait titrer la plupart des micro-contenus de l'interface globale du site, à la rigueur en masquant visuellement ces titres. Pourquoi pas.

Le problème va souvent se situer au niveau du référencement, avoir plein de titres identiques sur toutes tes pages, et en concurrence avec le H1 du contenu vraiment spécifique à la page, c'est pas une très bonne idée.

Solutions:
1. Ne pas utiliser de titres pour tous ces contenus d'interface.
2. Utiliser des titres de niveau plus faible, donc à priori des H2 voire des H3, et tant pis si on se retrouve avec un plan du site ainsi:
    <h2>Mon panier</h2>
    <h2>Navigation</h2>
    <h2>Promo exceptionnelle</h2>
<h1>Titre de la fiche produit</h1>
    <h2>Caractéristiques</h2>
    <h2>L'avis des acheteurs</h2>
    <h2>Un titre qui n'a rien à voir avec le produit</h2>
    <h2>Celui-là non plus n'est pas lié au produit</h2>

Pas terrible, mais peut-être un moindre mal.

Enfin, il y a deux pistes de solution pour ce problème:
- HTML5, avec les éléments structurant (section, article, header, footer, nav) et l'algorithme de calcul du plan du document (pas encore implémenté).
- ARIA et l'attribut role (déjà pas mal implémenté).

Laurie-Anne a écrit :
il faut respecter la hierarchie de la page complète, éléments "accessoires" compris.

Il faut, il faut... il y a d'autres impératifs qu'une structure HTML parfaitement logique. Notamment les impératifs de SEO, mais aussi les limites techniques de HTML4 (prévu pour des documents, pas des interfaces).
Modifié par Florent V. (15 Jul 2010 - 19:44)
Donc celui qui serait le plus sémantiquement correct, et pratique niveau SEO, ça reste de n'utiliser les balises hx que pour le contenu quoi, en gros...

Ouai c'est une histoire de compromis, il doit de toute façon pas y avoir de réponse absolue !
Florent V. a écrit :
    <h2>Mon panier</h2>
    <h2>Navigation</h2>
    <h2>Promo exceptionnelle</h2>
<h1>Titre de la fiche produit</h1>
    <h2>Caractéristiques</h2>
    <h2>L'avis des acheteurs</h2>
    <h2>Un titre qui n'a rien à voir avec le produit</h2>
    <h2>Celui-là non plus n'est pas lié au produit</h2>

Pas terrible, mais peut-être un moindre mal.
Cette solution (s'il n'y a pas un h1 avant (avec le nom du site, par exemple)) posera des problèmes d'accessibilité, certains lecteurs d'écran (Jaws, il me semble) ayant du mal à produire une table des matières s'il y a des sauts (faudrait que je refasse un check avec les dernières versions).
Modifié par Laurie-Anne (16 Jul 2010 - 08:19)
En fait, non, absolument pas.

Une page qui commence par un titre autre que H1 est conforme à WCAG2, même si c'est un point qui coince souvent dans le monde francophone (une des techniques WCAG en donne d'ailleurs un exemple).

Cela dit, plus généralement: on recommande du point de vue accessibilité de ne titrer que le contenu propre de la page, et de ne pas titrer les éléments de l'interface, ce qui résoud la question d'une autre manière Smiley cligne
Sujet clos
Aller à