Vous êtes ici : Accueil > 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.
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 :
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 :
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.
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.
Bon petit résumé. Les divs et les spans sont tout de même très utiles pour faire de belles mises en page ![]()
Oui, tu as tout à fait raison. C’est pour cela que j’écrivais que ces instructions sont très utiles, du moment qu’on n’en abuse pas. J’en use évidemment, mais désactive la feuille de style de ce blog : il reste tout à fait lisible.
Il ne faudrait pas abuser du terme « sémantique » dans le cas que tu présentes très bien, mais plutôt parler de HTML bien structuré, où on utilise des balises bien adaptées au contexte et à la structure de la page. Un liste est une liste, et utiliser <ul> et <li> donne une bonne idée de la structure de cette partie du document, mais n’en précise pas le « sens », la signification.
Pour une mise au point sur ces termes consulter l’article de Got.
D’accord, le terme sémantique est un peu abusif, mais si couramment utilisé que chacun comprend cet emploi. En revanche, « bien structuré » pourrait tout autant s’appliquer à du code HTML exclusivement composé de <div> et <span>, du moment que ces instructions sont correctement imbriquées. Je voulais insister, en utilisant le mot sémantique, sur le surcroît d’information que procurent certaines balises HTML, même s’il ne s’agit pas strico sensu de la définition de ce mot en linguistique.
Note : il faudrait aussi parler (je le ferai peut-être dans un prochain article) de l’abus des instructions structurant l’information, car le problème existe également.