Pourquoi, comment respecter la sémantique des balises et structurer votre page correctement ?

par Philippe | Publié dans Optimisations |  | 

L'Histoire de l'écrit nous enseigne que le texte est découpé en éléments distincts (titre, sous-titre, paragraphe, note, etc.) et que la typographie introduit des valeurs de force (gras, italique, souligné, etc.) pour attirer l'attention du lecteur.
Comment, pour le Web, mettre en page son texte pour remplir ce double objectif que d'être bien compris par l'internaute et par les moteurs de recherche ?

---

L'utilisation des balises HTML semble encore prêter à confusion. Dans cet article, je fais un tour d'horizon des différentes familles de balises, et j'explique ensuite comment organiser et présenter ses pages par un marquage approprié pour ces 2 types de « lecteurs » : votre visiteur et le moteur de recherche.

Le jeu des 4 familles de balises HTML

Les balises d'indications

HTML ne permet pas de faire de la sémantique au sens littéral du terme. Les moteurs ne sont que de simples robots. Ils ne parlent pas notre langue et ne disposent pas d'une intelligence pour comprendre le sens des mots. Les balises d'indication que l'on nomme donc improprement « sémantiques » ne permettent pas de spécifier le sens des mots, mais d'indiquer la caractéristique ou le rôle du mot ou du groupe de mots (syntagme) encadré par ces balises dans le contexte du document : par exemple, les citations [blockquote], [cite], les extraits de code informatique [code], les passages en emphase [em], [strong], les abréviations [abbr]...

Les balises de fonctions

Associées aux CSS, ces balises servent à la mise en page, à l'application de styles à des éléments donnés, à la gestion des fonctionnalités de l'hypertexte et des interactions : créer un lien [a], des formulaires [form], positionner un bloc [div], modifier le style d'une portion de texte [span], définir un style de guillemets entourant une citation [q]...

Les balises de structure

Le marquage d'un document par ces balises va définir la division des différents éléments du texte. On y trouve bien sûr les titres [Hn], les paragraphes [p], les tables de données [table] ou bien, les listes [ul], [ol], etc. Un marquage avec ces balises permet aux navigateurs textuels de comprendre la structure logique du document et d’en extraire l’information.

Les balises typographiques

Dernière famille, les balises typographiques ne servent qu'à appliquer un effet visuel à un vocable ou un syntagme qu'elles encadrent : pour attirer l'attention du lecteur en mettant en gras [b] un passage ou un mot seul, mettre un terme qui le nécessite en italique [i], ou pour afficher une partie de texte en caractères de type « machine à écrire » [tt].

Optimiser vos pages avec des balises diplomatiques

Marquer ses pages Web avec les balises appropriées constitue un élément primordial de la réussite un site Web.
Il faut que celui-ci soit utilisable pour qu'il soit utilisé. L'utilisation pertinente des balises va donc permettre à ces 2 cibles de lecteurs, les internautes et les robots des moteurs de recherche, de comprendre la structure de votre document, de lire correctement votre texte et d'y trouver l'information qu'ils cherchent :

1. Pour le lecteur le temps de lecture supplémentaire par rapport à un document imprimé est estimé, selon des études, à plus de 25 %. Pour en faciliter la lecture le texte devra être structuré à l'aide de paragraphes et des titres de différents niveaux. La mise en page devra aérer le texte pour le rendre le plus lisible possible. L'enrichissement typographique va mettre en valeur des portions de texte pour le lecteur.
2. Les robots des moteurs de recherche vont d'abord lire le texte pour en extraire la structure hiérarchique, puis le contenu. Le code et la feuille de style, enfin, seront examinés pour déjouer les intentions de webmestres sans scrupules qui cherchent à les tromper.

C'est la sémantique-tique du rédacteur...

Comment plaire alors aux lecteurs et aux moteurs de recherche me demandera le lecteur impatient ? Eh bien tout simplement en utilisant les balises que les uns et les autres affectionnent :
Vous voulez plaire au lecteur ? Les balises de fonctions pour la mise en page sont là pour mettre en valeur le contenu.
Vous voulez insister sur un point particulier ? C'est l'affaire des balises typographiques.
Vous voulez renforcer le « poids » d'une page sur une thématique donnée pour le moteur de recherche ? Vous allez faire appel à ces balises d'indication.

Prenons un exemple avec ce texte et son code  :

<h1>Le rédacteur Web</h1>
<p><strong>Le rédacteur Web</strong> (Homo textus) est
un <strong>mammifère</strong> omnivore de l'ordre des hominidés, 
qui écrit des textes devant son ordinateur en se signalant par 
des volutes de fumée qui s'échappent du foyer de sa pipe.<br />
Le rédacteur Web est considéré, à raison, comme un <strong>
obsédé textuel</strong>.</p>

L'intention de l'auteur est de faire mémoriser par le lecteur 5 mots :
« rédacteur Web » « mammifère » « obsédé textuel »
Ce dernier retiendra donc qu'un rédacteur Web est un mammifère obsédé textuel.

Mais ce marquage pose 2 problèmes :

1. Les moteurs de recherche ne saisissent ni l'humour, ni le second degré. Comment lui indiquer les mots qu'il doit retenir ?D'autant plus que dans la famille des balises d'indication [joke] n'existe pas. ↓
2. « Homo textus » utilise la balise [em] pour le passage en italique car c'est une convention que de mettre en italique un terme d'une autre langue.
   Or, cette balise est une balise d'indication pour dire au moteur que c'est un mot important. Comment lui dire ne pas le relever ?

L'auteur va jouer au « jeu des 4 familles » et composer son texte pour que celui-ci soit retenu par le lecteur ET le moteur :

1. Dans la famille balises d'indications, je veux le ([em] et le [strong]
2. Dans la famille des balises typographiques, le ([b] et le [i])

Il va définir un style de police normal pour les 2 balises d'indication :

1. strong {font-weight:normal}
2. em {font-style:normal}

puis refaire son marquage :

<h1>Le rédacteur Web</h1>
<p><strong><b>Le rédacteur Web</b></strong> (<i>Homo textus</i>) 
est un <b>mammifère</b> omnivore de l'ordre des hominidés, 
qui <strong>écrit des textes</strong> devant son <strong>
ordinateur</strong> en se signalant par des volutes de fumée 
qui s'échappent du foyer de sa pipe.<br />
Le rédacteur Web est considéré, à raison, comme un <b>
obsédé textuel</b>.</p>

L'aspect visuel sera exactement le même, mais le robot retiendra de ce texte :
« rédacteur web » « écrit des textes » « ordinateur »
L'objectif est atteint.

Raffinements techniques

Pour bien maîtriser l'aspect visuel des balises il est préférable de définir le style dans la CSS associée. En outre, le W3C¹ préconise d'utiliser la balise [span] (voir aussi à ce sujet l'article d'Alsacréations) :

On va donc définir les styles suivants :

1. strong {font-weight:normal}
2. em {font-style:normal}
3. .gras {font-weight:bold}
4. .italique {font-style:italic}

Pour ce code HTML :

<p>Dans cet exemple le <strong>marquage</strong> donne plus 
de <em><span class="italique">sens</span></em>.<br /> 
Eh oui, <strong><span class="gras">
la sémantique</span> </strong> <span class="gras">c'est mon 
truc</span>.</p>

Est-ce que ça va devenir le vôtre ?

Sources

1. Text markup : Emphasis - in HTML Techniques for Web Content Accessibility Guidelines 1.0 - W3C novembre 2000

Ils ont dit :

123456789101112