Votre avis sur des balises H1 H2 et H3

[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

[Dadou]

Grave non, mais tu ne respectes pas la sémantique, ton motif est purement visuel

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]

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]

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]

La règle exacte : ne pas insérer des balises de type bloc dans les hx

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 ...

:?:

Je crois que Dadou a été très clair. A moins que j'ai rien compris à ton problème....

[Dadou]

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 :

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

[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.