Optimisation HTML : les tags H1, …, H6 (1ère partie)
Samedi 17 novembre 2007Nous abordons aujourd’hui notre premier volet sur l’optimisation des balises H1 à H6. Ceux pour qui HTML ne veut rien dire trouveront une courte introduction (le minimum nécessaire à connaître) dans notre précèdent article Le HTML pour le référencement.
Les tags H1 à H6, Kezako ?
Lorsqu’on examine le code HTML de la Faq HTML4SEO (clic droit + Afficher la source dans Internet Explorer), on y trouve le bout de code suivant,
Ce code permet d’afficher plusieurs titres dans la page. Ci-dessous le résultat.
Le chiffre de la balise (de 1 à 6) va croissant avec le niveau de détail du titre. Les titres en H1 sont les plus importants, donc les plus visibles (en général avec la taille de police la plus grande et éventuellement une couleur différente de celle du reste du texte), alors que les tags H6 sont les moins importants.
Les tags H1 à H6 selon la norme HTML 4.01
La norme HTML 4.01 nous dit que :
- chaque document HTML peut (non obligatoire) contenir un ou plusieurs titres H1 à H6,
- chaque titre H1 à H6 nécessite obligatoirement une balise ouvrante <Hn> et une balise fermante </Hn>,
- il existe 6 niveaux de titrages, l’élément H1 étant le plus important et H6 le moins important,
Voici un exemple d’éléments H1, H2 et H3 correctement formé :
<HTML>
<HEAD>
... éléments d'en-tête ...
</HEAD>
<BODY>
... introduction du document ...
<H1>Les poissons d’eau douce</H1>
... ici une courte introduction sur les poissons d’eau douce ...
<H2>En Europe</H2>
... ici un texte présentant les spécificités de ces poissons en Europe ...
<H3>En Europe du nord</H3>
... détails sur les poissons d’Europe du nord ...
<H3>En Europe de l’ouest</H3>
... détails sur les poissons d’Europe de l’est ...
...
<H2>En Asie</H2>
... ici un texte présentant les spécificités de ces poissons en Asie ...
...
<H1>Les poissons d’eau de mer</H1>
...
</BODY>
</HTML>
Le respect de la hiérarchie des balises de titre H1 à H6 n’est pas obligatoire d’après la norme mais il est fortement recommandé. Dans le précédent exemple, les titres sont correctement hiérarchisés.
A éviter,
<H1>Les éléphants d’Afrique</H1>
...
<H3>En Afrique du sud</H3>
...
<H2> Les éléphants d’Asie</H2>
...
<H3>En Asie du sud-est</H3>
...
Notez que le niveau d’importance de la balise ouvrante doit être strictement le même que celui de la balise fermante.
Voici un exemple de titre valide :
<H1>Les castors lapons</H1>
Le titre suivant n’est pas valide et risque même de destructurer toute la mise en page du document :
<H1>Les castors lapons</H2>
Quelle importance ont les balises H1 à H6 ?
Les balises H1 à H6 dans le corps d’une page web
Les balises H1 à H6 sont probablement les plus importantes de l’ensemble du texte d’une page web. Après la balise TITLE, la balise H1 semble la plus importante pour le référencement. Lorsqu’ils sont bien choisis, les titres introduisent le contenu qui les suit (et d’une certaine manière, en sont représentatifs). Ils fournissent donc les termes les plus pertinents pour identifier le document.
Les balises H1 à H6 entre elles
Pour les moteurs de recherche, les balises H1 à H6 n’ont pas toutes la même importance. Les balises H1, les plus importantes parmi les titres, le sont aussi pour le référencement. Plus on augmente de niveau de titre (H2, H3, H4, H5 et H6), moins son contenu sera considéré par les moteurs de recherche. Le contenu d’une balise H1 sera donc plus important que celui d’une balise H2, lui-même plus important qu’une balise H3 et ainsi de suite jusqu’à H6. Les efforts d’optimisation devront donc se concentrer en priorité sur les titres en H1, puis en H2, etc …
