Version complète: sur le forum Webmaster Hub : Votre avis sur des balises H1 H2 et H3
Webmaster Hub > Promotion de Sites Internet > Techniques de Référencement
rvdani
Bonjour à tous,

Je voudrais avoir votre avis sur la structure des balises H1, H2 et H3 qui se présentent comme suit:

un H1 (composé de 2 ou 3 mots)
un H3 présenté comme le chapeau d'un article
deux ou trois H2 (composés de 2 ou 3 mots)

En fait je me demandais surtout si le nombre de caractère de la balise H2 est limité, pour avoir choisi de mettre la balise H3 juste après H1. Et donc d'éviter d'avoir la structure suivante :

un H1 (2 ou 3 mots)
un H2 (présenté comme le chapeau d'un article)
deux ou trois H3 (2 ou 3 mots) ou pas de H3 du tout

Merci d'avance pour vos réponses.
SpeedAirMan
Bonjour,

les balises hn sont pour les titres normalement, pas pour les autres éléments.
La suite logique devrait être h1, h2, h3 etc. (et non h1, h4, h3, h2)

A ta place, je mettrai le chapeau dans un blockquote (Jakob Nielsen utilise la balise blockquote pour son chapeau sur useit.com je crois).
Sebastien
Les <hx>, c'est pour les titres uniquement. Un chapô peut éventuellement utiliser <strong> ou <em>.
captain_torche
Pour un chapeau, je verrai plutôt une balise <p> toute bête. Une emphase (em ou strong) ne devrait pas se faire sur un paragraphe entier.
N'est-ce pas un usage détourné de blockquote que de l'utiliser pour un résumé ?
yuston
Ce que je comprends pas c'est pourquoi utiliser ces balises pour le référencement? OK ça permet d'accentuer deux trois mots donc le référencement, mais c'est une conséquence directe du but primaire de ces balises, à savoir structurer une page (comme dans un livre). Donc est-ce que tu vois écrire tout un résumé de ton article comme un sous-titre?
ASC
N'oublies pas un point important pas de balises HTML dans tes <hx> surtout.
Ex. : interdiction d'utiliser ==>

<h1><div style="[...]">blabla <span>truc</span></div></h1>

Ca parait évident pour certains mais on le voit tellement souvent.

ASC.
Dadou
Ce que j'en pense, sémantiquement c'est pas correct, tu ne met pas un h3 avant un h2.

rvdani
OK j'ai compris

Merci pour votre aide.

rvdani.
Nullette
Bonjour,
Je respecte la sémantique et l'ordre des titres, cependant il m'arrive parfois de mettre une balise h3, après un h1, tout simplement parce que à certains endroits la taille du h2 indiquée dans la feuille de style est trop grande par rapport à l'importance du paragraphe.
Je ne sais pas si c'est grave.
Peut-être faudrait-il que j'ajoute un style supplémentaire dans la feuille css r_question6161.gif
Dadou
Grave non, mais tu ne respectes pas la sémantique, ton motif est purement visuel

CITATION
Il ne doit pas y avoir de trou dans la hiérarchie de titres.

Sources : http://rgaa.dgme.fr/index.php/front/web/po...de_controle/3_5
Nullette
Ok. Merci Dadou.
Je vais ajouter un style dans ma feuille css.
petit-ourson
CITATION(ASC @ mercredi 22 octobre 2008 à 12:29) *
N'oublies pas un point important pas de balises HTML dans tes <hx> surtout.
Ex. : interdiction d'utiliser ==>

<h1><div style="[...]">blabla <span>truc</span></div></h1>

Ca parait évident pour certains mais on le voit tellement souvent.

ASC.

Autant ça pose problème avec le <div> mais pas avec les <span>.
Dadou
La règle exacte : ne pas insérer des balises de type bloc dans les hx
rikew
CITATION(ASC @ mercredi 22 octobre 2008 à 12:29) *
N'oublies pas un point important pas de balises HTML dans tes <hx> surtout.
Ex. : interdiction d'utiliser ==>

<h1><div style="[...]">blabla <span>truc</span></div></h1>

Ca parait évident pour certains mais on le voit tellement souvent.

ASC.


Je ne vois vraiement pas où est le problème ....
Perso je met des span, des div, des a, des select ...
evidement pas de h2, h3, p ...
yuston
CITATION(Dadou @ mercredi 22 octobre 2008 à 17:05) *
La règle exacte : ne pas insérer des balises de type bloc dans les hx

CITATION(rikew @ mercredi 22 octobre 2008 à 21:22) *
Je ne vois vraiement pas où est le problème ....
Perso je met des span, des div, des a, des select ...
evidement pas de h2, h3, p ...


r_question6161.gif r_question6161.gif r_question6161.gif
Je crois que Dadou a été très clair. A moins que j'ai rien compris à ton problème....
Dadou
CITATION(rikew @ mercredi 22 octobre 2008 à 21:22) *
Je ne vois vraiement pas où est le problème ....
Perso je met des span, des div, des a, des select ...
evidement pas de h2, h3, p ...


Bien sûr les navigateurs arrivent à l'interpréter mais ce n'est pas imbriqué correctement.
winclick
Pour ma part j'utilise les <hX> de la sorte :

CODE
h2 {
text-indent:-5000px;
font-size:0px;
width:300px;
height:25px;
margin: 0px;
margin-left: 5px;    
background-repeat:no-repeat;
}

<h2 style="background-image:url('images/montitre.gif')">Mon titre</h2>


Cela me permet de remplacer le titre part une image ... je ne pense pas que ce soit pénalisant pour le ref si ? Il faudrait une démonstration concrète...
captain_torche
Non, ça n'est pas pénalisant pour le ref, mais pour le temps de développement !!
Tu es obligé de créer une image par titre, ce qui est relativement long.
Si c'est juste une question de police de caractère, je te conseille de t'orienter vers une version flash+javascript, comme sIFR.
winclick
Yes après ya aussi des scripts qui font çà tout seul. Donc si c'est pas pénalisant c'est bon, je voulais juste un tite confirmation smile.gif
Dudu
Ce n'est pas pénalisant pour le réf, du moins je ne crois pas.

Mais tant qu'à faire, mets tout dans la même feuille de style !
Même si tu as plusieurs <h2> (et autant d'images différentes), tu devrais pouvoir les cibler avec les sélecteurs CSS. Si vraiment ce n'est pas faisable, il te reste toujours le recours aux class.


Éparpiller les styles, certains dans un fichier .css, et certains autres dans un attribut "style", c'est la bonne recette pour s'emmeler les pinceaux quand ton site commence à devenir un peu important.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.