Petite introduction à l'importance de la sémantique.

Qu'on s'y entende bien : tenter de résumer en quelques lignes la sémantique serait comme de vouloir expliquer à un aveugle un panorama somptueux avec trente mots.
La notion de sémantique se construit au fur et à mesure des expériences, s'apprend souvent sur le tas et se conceptualise difficilement.

Mais qu'importe, je vais ici tenter d'en faire une présentation. Je n'ai ni la prétention, ni l'ambition d'en faire plus, mais j'espère que le peu que j'en dirai sera compréhensible.

Avant de définir la notion même de sémantique, un petit saut dans le temps me semble utile.

Back in the 90's

Au début du Web, les pages Internet étaient mises en forme en HTML. Ce langage mélange dans un même fichier style et contenu : autrement dit, le nom des balises indiquait non pas la fonction, mais la façon dont le texte devait être mis en forme. <b> demandait au navigateur de mettre le texte en gras (bold), <i>de le mettre en italique (italic), <u> de le souligner (underline).
À priori, rien à redire : tout comme le fait un logiciel de traitement de texte type Word, on contrôle parfaitement ce que l'on fait. Ou en tout cas, on en a l'impression… car les problèmes surgissent rapidement.

Imaginons donc un site communautaire sur lequel de multiples auteurs rédigent des articles. Certains aiment mettre leurs titres en gros, d'autre les soulignent et les graissent… rapidement, on assiste à un foisonnement de style pour une même fonction.

En quoi cela pose-t-il un problème ?
D'abord, le lecteur est perdu entre les titres, sous-titres et sous-sous-titres qui ne sont pas forcément cohérents entre eux (l'un les mettra en orange clignotant, l'autre non).
Ensuite, l'auteur doit appliquer de multiples balises pour afficher un unique titre. S'il a choisi de mettre en orange, gras et souligné, chacun de ses titres sera codé lourdement : <font color="orange"><b><u>Mon titre</u></b></font>. On le voit : c'est moche (plus de balises que de contenu), peu fonctionnel (il est facile de faire une faute en tapant les multiples balises), peu évolutif (si un jour, le Webmaster décide de passer son site en fond orange, tous les titres deviendront illisibles [orange sur orange] et l'auteur devra modifier manuellement chacun des titres de chacun de ses articles pour corriger le problème).
Enfin, les moteurs de recherche ou les personnes souffrant de problèmes d'accessibilité qui passent par là auront du mal à suivre l'article de façon cohérente et à le découper en sections.

Bref, une catastrophe à tous les points de vue !

Zorro est arrivé !

Se rendant compte de ces problèmes, « on » inventa le xHTML : une évolution du langage HTML qui se voulait plus « sémantique » (on y arrive ! ).
Sémantique, cela signifie qu'une balise ne code pas pour de la mise en forme mais pour une idée, une représentation abstraite. Exit les balises bold, bienvenue à la balise emphase ! Exit les combinaisons tordues, bienvenue à la balise titre ! Ces balises n'indiquent pas la façon dont le contenu doit être présenté, mais la fonction du contenu à l'intérieur du texte.
Le lecteur attentif se posera immédiatement la question : comment met-on en forme un titre abstrait ? Très bonne question… qui trouve sa réponse avec un seul mot : CSS.
CSS est un nouveau langage qui permet de « thémer » ses balises en dehors du texte : un unique fichier externe pour tout le site contient l'intégralité des informations pour la mise en forme. Le webmaster précisera par exemple que les balises titres de premier niveau (il y en a six, qui permettent ainsi d'avoir la structure hiérarchique habituelle titre / chapitre / sous chapitre / partie / paragraphe / sous paragraphe) seront affichées graissés, soulignées et en orange. Vous ne voyez pas le changement ? Et pourtant, il est primordial ! Une unique balise peut renfermer plusieurs informations d'affichage. Et toutes ces informations sont centralisées au même endroit : en modifiant un unique fichier, on modifie toutes les occurrences de la balise sur le site. Pas besoin d'ouvrir manuellement chaque page pour la reconfigurer, seul le fichier principal de configuration compte. Miraculeux, non ? C'est un rêve qui devient réalité : la forme (le CSS) séparée du fond (le HTML), le contenu distinct du contenant.

Mais il n'y a pas que le webmaster à sauter d'allégresse ! Les visiteurs sont heureux aussi. (Moins de code à charger, puisqu'il suffit de récupérer une seule fois le fichier de mise en forme pour l'ensemble du site. )

Le véritable point fort de la sémantique

C'est tout ? Mais alors, la sémantique, c'est juste pour les fainéants qui ont la flemme d'ouvrir leurs pages ! Et puis réduire le débit, on s'en fiche ! On a tous de l'ADSL maintenant…

C'est vrai (encore que modifier manuellement des dizaines de milliers de pages soit lassant). Mais attendez, il reste un as dans la manche de la sémantique… et cet as, c'est Google !

Car quand Big-G visite votre site, s'il croise une balise « titre principal » (<h1>, pour header1), il sait que cela correspond à une information capitale de la page. Inversement, s'il rencontre une balise petit (small), il saura que le contenu présenté ici est annexe et pas forcément utile ou primordial sur cette page.
Si deux pages présentent le même mot clé, l'un dans une balise h1 et l'autre dans une balise small, il est probable que le premier soit affiché en priorité dans la liste. Logique, puisque le webmaster informe que ce mot clé est la raison d'être de la page, tandis que le deuxième signale que le mot clé est présenté en annexe, et donc pas forcément traité explicitement dans le reste de la page.

À ce point là, vous devriez avoir compris que la sémantique correspond à toutes les informations au-delà du texte.

Aller plus loin que le xHTML de base

Tout va très bien dans le meilleur des mondes ? Hé non, car HTML n'implémente pas forcément toutes les balises nécessaires.

Un exemple concret s'impose. Si vous lisez des périodiques, vous aurez remarqué que leurs représentations des siècles en chiffres romains n'est pas écrit en capitales, mais en petites capitales (small-caps, un exemple est présent ici). Comment reproduire cet effet ? xHTML n'offre malheureusement pas de balises toutes prêtes nommée <century> !
Pas de panique, il y a une solution… qui passe par des éléments « vides de sens », neutres. On les nomme <span> et <div>.
Si je place un texte dans une balise span, il ne se passera rien. Le lecteur ne saura même pas que la balise est présente : elle est entièrement transparente.
En fait, ces balises sont utilisées avec un attribut spécial que l'on appelle class (et que l'on peut appliquer à n'importe quelle balise, j'y reviendrais).
Ces classes sont libres, c'est-à-dire que vous pouvez choisir vous même comment vous les nommez et comment vous les utilisez.

Nous pouvons donc définir une classe century qui mettra en petites majuscules et ajoutera automatiquement un ^e derrière. Tout cela est possible avec les règles CSS, et il suffira de marquer <span class="century">XIX</span> pour obtenir le rendu voulu. Et si un jour on décide de remplacer le ^e par un ^ème, cela ne posera aucun problème, puisque cette information sémantiquement vide n'est pas codée directement dans le texte, mais dans le style.

Comme je le disais, on peut aussi classer une balise normale ; ce qui permet par exemple de designer différemment le premier sous titre de chaque section, ou de définir différents types d'emphase (mot important, mot traduit, mot étranger… ). Les possibilités sont presques infinies !

L'utilisation de la sémantique permet donc de garder un contenu cohérent et facilement éditable, sans pour autant sacrifier à la mise en forme du texte.

Dangers à éviter

Attention cependant, deux écueils se présentent à l'éditeur de contenu « sémantique ».

Le premier, c'est de vouloir abuser des bonnes choses. Après tout, si Google apprécie les titres, pourquoi ne pas mettre tout mon texte en titre ? Il suffit de dire dans le CSS que la balise titre doit s'afficher comme du texte normal, et l'utilisateur n'en saura rien… et j'aurais floué Google. Dans le concept, c'est vrai… dans la pratique, des générations de webmasters s'y sont tentés et Google n'est pas bête ; il sait détecter une utilisation abusive. De plus, si vous procédez ainsi, du contenu secondaire sera mis en avant dans les résultats de recherche au détriment du vrai contenu : bref, vous y perdez plus que ce que vous y gagnez.

Seconde idée, encapsuler sans réfléchir. Je mets mon article dans une boîte qui contient deux articles qui est dans une boîte avec tous les articles que je place dans une boîte qui contient le contenu de la colonne centrale de mon site, laquelle boîte est doublée avec une classe différente que je place dans une boîte englobant l'intégralité de mon site que je place dentre les balises body. Stop ! On peut effectivement obtenir ce type d'architecture si votre contenu est complexe, mais préférez toujours une structure simple et concise. Dans la même optique, minimisez le nombre de tableaux : sémantiquement, un tableau permet de représenter des données, pas de paramétrer la façon dont ces données doivent être affichées ! C'est le cheval de bataille des webmasters modernes : éradiquer l'ennemi <table> lorsqu'il est utilisé pour faire un design en colonnes (menu à gauche, contenu au milieu, informations à droite par exemple).

En conclusion

Voilà qui clôt cette introduction sommaire au problème complexe de la sémantique.
J'espère que dorénavant, vous saurez réfléchir au texte, mais aussi aux informations implicites qu'il doit transporter avec lui. Plus que Google, c'est l'ensemble de vos lecteurs qui le ressentira et l'appréciera !