Surlignage

Vous êtes ici : Accueil > Bonnes pratiques > HTML sémantique

Bonnes pratiques

HTML sémantique

J’évoquais dans mon précédent articles un code atteint de divite aiguë. Bien que ce terme et celui de spanite soient assez courants, ils nécessitent quelques explications pour ceux qui ne seraient pas accoutumés au jargon informatique.

Sémantique 1

Comme tous les langages – naturels ou informatiques – le HTML est porteur de sens. Étant essentiellement destiné à structurer de l’information, la plupart de ses « mots » donnent des indications sur la nature du contenu qu’ils encadrent. Prenons par exemple une liste de pays (Allemagne, Belgique, France, Italie). En HTML, une telle liste s’écrit :

  1. <ul>
  2. <li>Allemagne</li>
  3. <li>Belgique</li>
  4. <li>France</li>
  5. <li>Italie</li>
  6. </ul>

Les mots <ul> et </ul> marquent le début et la fin de la liste. Chaque ligne de cette liste est encadrée par <li> et </li>. L’intérêt de cette notation est que n’importe quel logiciel qui comprend le HTML sait qu’il s’agit d’une liste et l’affiche, l’imprime ou la récite en conséquence.

Le langage HTML possède aussi des mots qui n’ont pas de portée sémantique. Ils sont très utiles, mais ne donnent aucune précision sur la nature du contenu qu’ils encadrent. Je peux, par exemple, écrire la liste précédente de la manière suivante :

  1. <div>
  2. <span>Allemage</span>
  3. <span>Belgique</span>
  4. <span>France</span>
  5. <span>Italie</span>
  6. </div>

Les instructions <div> et </div> délimitent un bloc d’information, sans plus de précision. Quant aux instructions <span> et </span>, elles encadrent du contenu linéaire (une suite de mots par exemple). Lorsqu’un logiciel rencontre une telle structure, il n’a aucune idée de ce qu’elle représente : pour lui, ce n’est plus une liste, mais un bloc anonyme d’information morcelé en unités plus petites. C’est un exemple de HTML non sémantique.

Divite et spanite

Certains développeurs se soucient d’utiliser au maximum les instructions HTML porteuses de sens. Le code qu’ils produisent est aisément compréhensible, aussi bien par d’autres développeurs que par un navigateur web ou un lecteur d’écran.

D’autres informaticiens font presque exclusivement usage des instructions div et span et s’appuient entièrement sur une feuille de style pour que l’information soit présentée correctement. C’est ce que l’on nomme divite et spanite, comme s’il s’agissait de maladies.

Cette pratique pose de nombreux problèmes. On peine à comprendre leur code par manque de précision sur le type de données qu’il contient. Si pour une raison quelconque la feuille de style qui définit la manière de présenter l’information n’est pas utilisable, les données sont affichées de manière brute, sans aucune mise en forme.

Les lecteurs d’écran (logiciels utilisés par les malvoyants, qui lisent à haute voix ce qu’affiche l’écran) sont incapable d’interpréter et d’énoncer correctement un contenu dont ils ignorent la nature. Les moteurs de recherche tels que Google ou Yahoo, s’appuient en partie sur la sémantique du HTML pour analyser le contenu d’un site et l’indexer efficacement.

Faire un usage abusif de div et span, c’est oublier que le HTML est un langage possédant une grammaire, une syntaxe et des mots porteurs de sens, dont l’emploi permet d’être aisément compris de tous. C’est comme si, pour parler, l’on se contentait d’énumérer une suite de mots, sans construction syntaxique, sans conjugaison ni accord.

  • 1 Comme il est très justement remarqué dans un commentaire, l’emploi du terme sémantique est un abus de langage si l’on se réfère à la définition précise de ce mot en linguistique. Il est cependant fréquemment employé en informatique avec le sens qui lui est donné ici. Quant au web sémantique, il s’agit d’une toute autre question, d’une portée bien plus vaste, dont je parlerai peut-être un jour.

Mis en ligne le 09/03/2007 | Poster un commentaire

4 commentaires sur HTML sémantique :

Poster un commentaire :

Utilisation du formulaire : Les champs précédés d'un astérisque (*) sont obligatoires. Le HTML est autorisé dans le corps du message (<a href>, <strong>, <em>). Les lignes vides sont transformés en sauts de paragraphes et les URL sont converties en liens.

Modération : La modération étant activée, votre commentaire peut ne pas être immédiatement affiché. Les commentaires déplacés, injurieux ou publicitaires seront supprimés.

Articles récents :

Derniers commentaires :

Archives :

Rubriques :

Abonnement (syndication) :

Je soutiens :