Page 1 sur 2

Les balises H1, H2, H3...

MessagePosté: Mar 27 Mar 2007 11:52
de Yatooweb
Dans un précédent post j'avais expliqué brièvement comment utiliser les balises Hx (voir le point n° 4 du post Astuces W3C), j'aborderais ici un peu plus précisement l'utilisation.

Définition
Les balises Hx sont des balises d'en-têtes, elles vont de H1 à H6 (H1 étant la plus importante).
Les balises Hx sont importantes pour le référencement, certes, mais ce n'est pas une raison pour insérer toute une série de mots clés dans un <H1> ! Bien au contraire ! Une balise d'en-tête mal employée ne vous sera d'aucune utilité.

Limite de caractères
Je vois encore des sites qui insérent tout un paragraphe dans un <H1>, <H2> ou <H3> pensant ainsi augmenter le poids du texte. Hé non ça ne marche pas comme ça ! La sémantique veut que les balises Hx ne soit que des en-têtes, autrement dit des titres. On limitera donc le nombre de caractères de ces balises à 60 caractères environ.

Le contenu
Comme je viens de le préciser, ce sont des titres, ils doivent donc résumer le paragraphe qui va suivre. La balise H1 sera assez ressemblante au titre de la page car tout comme la balise TITLE, elle résume le contenu de la page complète et ne sera présente qu'une seule fois. Pour remplir vos balises vous devez penser aux mots clés important du paragraphe et les insérer dans vos en-têtes. Evitez trop de répétitions entre chaque en-tête.

A la place de:
Code: Tout sélectionner
<h1>Les animaux domestiques</h1>
<h2>Les animaux domestiques - Les Chiens</h2>
<h2>Les animaux domestiques - Les Chats</h2>

On préférera:
Code: Tout sélectionner
<h1>Les animaux domestiques</h1>
<h2>Les Chiens</h2>
<h2>Les Chats</h2>

Eventuellement:
Code: Tout sélectionner
<h1>Les animaux domestiques</h1>
<h2>Les Chiens domestiques</h2>
<h2>Les Chats domestiques</h2>


Exemple d'utilisation
Ci-dessous je vous présente un exemple, c'est dans ce sens que vous devez construire vos pages web.

Code: Tout sélectionner
<html>
<head>
<title>Listes des animaux domestiques en France</title>
</head>
<body>
<h1>Les animaux domestiques</h1>
<p>Dans ce dossier nous vous présenterons les différents animaux domestiques autorisés en France.</p>
<h2>Les Chiens</h2>
<p>Le chien est un mammifère domestique de la famille des canidés, proche du loup.</p>
<h3>Le Berger allemand</h3>
<p>Le berger allemand est une race de chiens tirant son nom de son pays d'origine, l'Allemagne.</p>
<h3>Le Golden Retriever</h3>
<p>Le Golden Retriever est une race de chien relativement moderne mais très populaire.</p>
<h2>Les Chats</h2>
<p>Le chat est un mammifère carnivore de la famille des félidés.</p>
<h3>Abyssin</h3>
<p>Le chat de race Abyssin, aussi appelé Bunny Cat (chat lapin) est une race de chat à poil court originaire d'Asie.</p>
<h3>American Curl</h3>
<p>L'American Curl est une race de chat, d'origine récente et peu représentée.</p>
</body>
</html>

MessagePosté: Mar 27 Mar 2007 15:00
de david96
Très bon tuto sur l'élément <h.>

En fait en résumé <h1>Titre de l'article</h1>
<h2>2e niveau du titre article</h3>
<h3>3e niveau du titre article</h3>
etc...

Comme toi j'ai vu des webmestres utiliser l'élément <h.> afin de mettre en avant des mots clefs ! Inutile de dire qu'il est très mauvais de l'exploiter ainsi !

Bien ce mettre dans la tête que ces éléments servent avant tout pour hiérarchiser les niveaux d'un contenu.

Une sémantique clair apporte énormément pour le référencement.

Sinon pour mettre en avant des mots clefs dans le contenu, il y'a l'élément <strong> ou encore les classes importés d'un fichier CSS.

MessagePosté: Jeu 14 Juin 2007 11:13
de fabricus
Bonjour,

J'aurai bien aimé mettre des balises <H1> sur mon site pour les différentes formules que je propose (annonces express, annonces classiques, offres en images, annuaire immobilier) mais l'utilisation de ces balises entraînent un affichage en très gros caractères qui n'est pas du tout adapté à ma mise en page.

Je ne comprends pas que l'on dise que ces balises servent à préciser l'importance du texte qui y est inséré car en fait elles définissent, à mon sens, une grosseur de caractères et au niveau <H1> c'est vraiment impressionnant...

Je ne vois vraiment pas comment on peut employer ces balises pour réaliser une page cohérente et personnellement je n'ai pu utiliser que <H4> pour mettre en avant les titres de mes rubriques.

Mais peut-être n'ai-je rien compris ?

Cordialement,

Pierre

MessagePosté: Jeu 14 Juin 2007 12:02
de Yatooweb
Il faut définir une taille de police avec l'élément font-size:

<h1 style="font-size:14px;">Mon titre</h1>


:wink:

MessagePosté: Ven 15 Juin 2007 15:52
de david96
Pour que ce soit général à tous le site, le mieux est de le spécifier dans un fichier CSS :D
Genre :

Code: Tout sélectionner
h1 {
font-size : 120%;
text-align : center;
margin : 0px;
}
etc...
:D

Astuces Balises H1/2/3...

MessagePosté: Mar 30 Oct 2007 09:46
de Michel Leconte
Une question qui se pose souvent est la suivante:

Lorsqu'on a un positionement quelque peu different d'une page donnee vis-a-vis de la phrase visee, comment fait-on pour aligner ces elements sans en diluer l'impact?

Je m'explique; disons que votre cible est 'vache normande', votre en-tete devrait etre 'vache normande' aussi. Hors, pour des raisons de fluidite u site et d'experience utilisateur, votre page doit s'intituler 'les montagnes corses et une vache normande'. Cela arrive souvent durant le processus de formalisation des contenus lorsque vous consultez avec un client.

Si vous mettez le titre entier 'les montagnes corses et une vache normande' en H1 alors vos mots cles sont dilues de l'ordre de 50% minimum.

Une astuce consiste a utilise un H2/3/4/5/6 defini avec la meme police/taille et a juxtaposer le h1 'vache normande' avec h2/3/4...'les montagnes corses et une' pour donner l'impression visuelle d'un titre unique.

Un autre astuce de manipulation des titres consiste a appliquer une CSS de maniere a ce qu'un H2 ou H3 soit visuellement dominant vis-a-vis d'un H1. Je n'ai en effet pas d'element me permettant de penser que les moteurs regardent les CSS pour ce genre d'information et se cantonne a la hierarchie etablie. Il se pourrait que cette operation soit trop intensive au niveau CPU pour etre pratique de leur points de vues.

J'ai aussi tendance a penser que tant que le sujet traite est tres proche, et n'induit donc pas l'utilisateur en erreur, cela ne pose pas de probleme immense aux moteurs.

MessagePosté: Mer 31 Oct 2007 00:31
de david96
Michel Leconte a écrit:Une astuce consiste a utilise un H2/3/4/5/6 defini avec la meme police/taille et a juxtaposer le h1 'vache normande' avec h2/3/4...'les montagnes corses et une' pour donner l'impression visuelle d'un titre unique.

Houlà, ceci me semble assez anarchique non ?
Si c'est pour un problème de taille, autant utiliser le CSS et définir une taille moindre pour le h1

Je ne comprend pas ce passage :
Michel Leconte a écrit:Si vous mettez le titre entier 'les montagnes corses et une vache normande' en H1 alors vos mots cles sont dilues de l'ordre de 50% minimum.

C'est à dire ?

MessagePosté: Mer 31 Oct 2007 10:51
de Michel Leconte
Effectivement le CSS peut-etre utilise pour definir la taille du H1/2/3/4 etc..
Mais le probleme n'est pas un probleme de taille a proprement parle; c' est de visuellement avoir un titre coherent vis-a-vis de l'architecture du site et pour autant avoir une page avec un titre optimise autant que possible.
C'est lie a ta question suivante, vis-a-vis du facteur de dilution des titres.
La dilution etant liee aux nombres de mots supplementaires present dans le titre et qui ne font pas parti de ta phrase cle. Anisi si la phrase cle est 'vache normande' et que le titre entier est 'les montagnes corses et une vache normande' alors au moins 4 mots seront comptabilises: 'montage, corses, vache,normande' alors que ta phrase cle n'en comporte que 2. L'impact est que ta page avec 'les montagnes corses et une vache normande' en titre sera moins performante pour la requete 'vache normande' car moins ciblee qu'une page par ailleurs en tout autre points egales mais n'utilisant que 'vache normande' comme titre.

MessagePosté: Ven 28 Mar 2008 09:18
de raolona
Si j'ai bien compris, l'utilisation des H1, H2 ... est obligatoire.

Mais, il faut les définir à l'avance dans le fichier style.css.

C'est ça ?

MessagePosté: Ven 28 Mar 2008 21:02
de le-sarde
Salut,

rien n'est "obligatoire", disont que cela est fortement conseillé.
Tout comme une fichier .css

A toi de voir.

++

MessagePosté: Mer 28 Mai 2008 23:24
de casino
Merci pour l'exemple, c'est très clair !!

MessagePosté: Mar 3 Juin 2008 00:36
de Tommyknocker
Merci pour le tutorial, ca va me permettre d'optimiser un peu le référencement de mon Site Internet

Simple, clair, efficace, au moins, on ne pourra pas dire qu'on ne sait pas utiliser les balises <hx> :D
En revanche, aux vues de certaines astuces citées dans ce thread, je me demande s'il ne serait pas plus efficace de consacrer son temps à enrichir son site avec du contenu plutôt que de vouloir jouer sur les tailles des polices...

Plus vous avez de contenu et plus vous pouvez le structurer, et donc y incorporer de balises <hx> non? :roll:

MessagePosté: Mer 11 Juin 2008 02:10
de david96
Tommyknocker a écrit:En revanche, aux vues de certaines astuces citées dans ce thread, je me demande s'il ne serait pas plus efficace de consacrer son temps à enrichir son site avec du contenu plutôt que de vouloir jouer sur les tailles des polices...

Le contenu passe avant tout, c'est clair ! :wink:

pour aller plus loin

MessagePosté: Dim 14 Sep 2008 18:32
de joomspirit
merci pour ce rappel !

Pour une image, le texte présent dans l'attribut Alt est lu par les moteurs et remplace celle-ci.

Que doit-on faire alors pour la bannière de notre site ?

Je m'explique. Doit-on mettre le titre de la page en H1 suivi de notre image de bannière, puis à l'aide des CSS "caché" le titre, ou procéder ainsi :

<h1>
<img src="ma_banniere.jpg" alt="notre titre" />
</h1>

Les deux méthodes sont valides même si la première peut-être considéré comme frauduleuse (car source d'abus), mais est-ce que l'impact du titre est le même dans les deux cas ?

MessagePosté: Dim 14 Sep 2008 18:37
de le-sarde
Salut, et bienvenu sur le forum,

penses-tu que cela vaille la peine de mettre un H1 à la bannière?

Ne serait-il pas plus justiciable de le garder pour le titre principal de la page?

++