On le sait, il convient de structurer son document HTML à l’aide de différents niveaux de titres. Une récente étude prouve d’ailleurs la grande utilité de cette pratique puisque plus de 50% des utilisateurs utilisant un lecteur d’écran naviguent au sein de la page à l’aide de cette structure.
Il nous est offert un jeu de titres allant du niveau 1 au niveau 6 qu’il convient d’ordonner de manière logique sans sauter de niveau.
Mais il n’est absolument pas précisé que le titre de niveau 1 doit être unique. En fonction du choix fait sur ce point, nous allons voir que dans la pratique cela a beaucoup de répercussions sur l’accessiblité de votre document ainsi que son référencement.
Je décide de n’utiliser qu’un seul titre de niveau 1…
… et je place ce titre de niveau 1 sur le logo
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 1</title>
</head>
<body>
<div id="page">
<div id="tete">
<h1>Titre (notre logo)</h1>
</div>
<hr />
<div id="corps">
<div id="menu" style="float:left;width:20%;">
<h2>Sous-titre numéro 1</h2>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="contenu" style="float:left;width:80%;">
<h2>Sous-titre numéro 2</h2>
<p>Contenu de l’article.</p>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 1 :
- respecte la syntaxe HTML ;
- respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
- n’est pas idéalement optimisée pour un bon référencement (outre pour une page d’accueil).
… et je place ce titre de niveau 1 sur le descriptif principal de notre article
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 2</title>
</head>
<body>
<div id="page">
<div id="tete">
<p>Notre logo</p>
</div>
<hr />
<div id="corps">
<div id="menu" style="float:left;width:20%;">
<h2>Sous-titre numéro 1</h2>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="contenu" style="float:left;width:80%;">
<h1>Titre (descriptif principal de notre article)</h1>
<p>Contenu de l’article.</p>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 2 :
- respecte la syntaxe HTML ;
- ne respecte pas la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres (puisque le titre de niveau 2 apparaît avant le titre de niveau 1).
- est idéalement optimisée pour un bon référencement.
… et je place ce titre de niveau 1 sur le descriptif principal de notre article… et je ruse ensuite par CSS !
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 3</title>
</head>
<body>
<div id="page">
<div id="tete">
<p>Notre logo</p>
</div>
<hr />
<div id="corps">
<div id="contenu" style="float:right;width:80%;">
<h1>Titre (descriptif principal de notre article)</h1>
<p>Contenu de l’article.</p>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="menu" style="float:left;width:20%;">
<h2>Sous-titre numéro 1</h2>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 3 :
- respecte la syntaxe HTML ;
- respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
- est idéalement optimisée pour un bon référencement ;
- respecte également la linérarisation du document car :
Je décide d’utiliser plusieurs titre de niveau 1…
… et je place un de ces titres de niveau 1 sur le logo
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 4</title>
</head>
<body>
<div id="page">
<div id="tete">
<h1>Titre (notre logo)</h1>
</div>
<hr />
<div id="corps">
<div id="menu" style="float:left;width:20%;">
<h1>Sous-titre numéro 1</h1>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="contenu" style="float:left;width:80%;">
<h1>Titre (descriptif principal de notre article)</h1>
<p>Contenu de l’article.</p>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 4 :
- respecte la syntaxe HTML ;
- respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
- n’est pas idéalement optimisée pour un bon référencement.
… et je place un de ces titres de niveau 1 sur le descriptif principal de notre article
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 5</title>
</head>
<body>
<div id="page">
<div id="tete">
<p>Notre logo</p>
</div>
<hr />
<div id="corps">
<div id="menu" style="float:left;width:20%;">
<h1>Titre</h1>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="contenu" style="float:left;width:80%;">
<h1>Titre (descriptif principal de notre article)</h1>
<p>Contenu de l’article.</p>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 5 :
- respecte la syntaxe HTML ;
- respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
- n’est pas idéalement optimisée pour un bon référencement.
… et je place un de ces titres de niveau 1 sur le descriptif principal de notre article… et je ruse là encore par CSS !
Nous obtenons donc une structure de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple 6</title>
</head>
<body>
<div id="page">
<div id="tete">
<p>Notre logo</p>
</div>
<hr />
<div id="corps">
<div id="contenu" style="float:right;width:80%;">
<h1>Titre (descriptif principal de notre article)</h1>
<p>Contenu de l’article.</p>
</div>
<hr style="position:absolute;left:-999em;" />
<div id="menu" style="float:left;width:20%;">
<h1>Titre</h1>
<ul>
<li><a href="#">Lien numéro 1</a></li>
<li><a href="#">Lien numéro 2</a></li>
</ul>
</div>
</div>
<hr style="clear:both;" />
<div id="pied">
<p>Pied de page.</p>
</div>
</div>
</body>
</html>
Notre structure d’exemple numéro 6 :
- respecte la syntaxe HTML ;
- respecte la règle d’accessiblité qui demande d’organiser de manière logique nos niveaux de titres ;
- n’est pas idéalement optimisée pour un bon référencement ;
- respecte également la linérarisation du document car :
Conclusion
Seuls l’exemple 1 (dans le cas d’une page d’accueil) et l’exemple 3 (dans les autres cas) garantissent l’accessiblité et le référencement de notre page.
Il est donc nécessaire parfois d’utiliser quelques astuces CSS pour ordonner correctement vos informations.
Bien qu’il soit tout à fait possible d’utiliser plusieurs titres de niveau 1 dans une page, cette pratique n’est pas conseillée pour un bon référencement. Il convient alors d’être attentif à la bonne hiérarchisation de l’information, si besoin avec l’aide de l’outil proposé par le W3C :