Pour la Sémantique, par Jeremy Keith (12 novembre 2011)

Divya Manian, l’une des plus brillantes baroudeuses du Web, à qui l’on doit HTML5 Boilerplate, a publié un article sur le site Smashing Magazine intitulé Vains efforts sémantiques (Our Pointless Pursuit Of Semantic Value [lien : https://www.smashingmagazine.com/2011/11/our-pointless-pursuit-of-semantic-value/] ). Je crains être sur la même ligne que le commentaire de Patrick qui dit que le titre agressif, le ton conflictuel et les arguments à l’emporte-pièce du début de ce papier desservent la compréhension du message qu’il veut faire passer.

Mais si l’on fait abstraction de la violence de l’expression et que l’on s’intéresse au sujet principal de l’article, c’est assez limpide : ne vous attardez pas sur la sémantique au détriment d’autres aspects importants du développement web. Dans un commentaire, Divya précise son point de vue :
« Le message de cet article est : la sémantique n’est pas inutile mais ce n’est pas la peine de couper les cheveux en quatre sur des détails. »
L’exemple concret des divs et des balises structurantes est néanmoins problématique. Il existe réellement une différence entre une div et une section ou article (ou aside ou nav). Je ne parle pas seulement de différence sémantique (une div ne donne aucun sens au contenu qu’elle englobe alors qu’une balise section est destinée à regrouper des contenus ayant le même thème), mais également de différences pratiques.
Une balise section n’est pas neutre quant à la structure résultante d’un document donné (une div au contraire, le sera). La nouvelle structure de l’algorithme du HTML sera plus simple pour les futures technologies d’assistance et les searchbots (comme d’autres commentateurs l’ont signalé) mais cela a déjà des effets pratiques aujourd’hui sur l’affichage par défaut de certains navigateurs.
Si on télécharge le document que j’ai placé sur https://gist.github.com/1360458 et qu’on l’ouvre dans la dernière version de Safari, Chrome ou Firefox, on note qu’un même élément (h1) est stylisé différemment suivant qu’il s’intègre dans une balise div ou une balise section (grâce aux déclarations css –moz-any et –webkit-any dans la feuille de style par défaut des navigateurs).

C’est donc un exemple de différence effective qu’il existe entre div et section.

Mais à part ça, je suis assez d’accord avec la conclusion « en cas de doute, div s’impose ». Je vois de bien trop nombreux document où chaque div a été remplacée par une balise section ou article ou nav ou aside. Mais les raisons qui m’amènent à cette conclusion sont totalement opposées au raisonnement de Divya. Alors qu’elle affirme qu’il n’y a véritablement pas de différence entre employer une balise div et utiliser des balises structurantes, c’est l’opposé qui est le cas : la structure du document en est complètement modifiée.

Donc, si vous utilisez section ou article ou aside ou nav sans en comprendre les conséquences, le résultat pourrait se révéler bien pire qu’en se contentant de privilégier div.
Je suis également d’accord avec le fait qu’il faille trouver un équilibre dans la sémantique originelle du HTML. Son pouvoir provient essentiellement du fait qu’il s’agit d’un nombre d’éléments sémantiques limité – mais universellement compris par les navigateurs. Si nous avions une balise pour tous les types de contenus possibles, le langage serait inefficace. De mon point de vue, je ne suis pas convaincu que nous ayons besoin d’une balise section et d’une balise article : la sémantique de ces deux éléments est si proche qu’ils sont presque identiques.

Et c’est pour quoi, aujourd’hui, le moment est venu pour les développeurs web de penser à la sémantique. Les spécifications sont encore en cours et notre voix collective compte. Si nous voulons que le html soit composé d’éléments sémantiques adaptés, nous devons prendre le temps d’analyser les effets de chaque nouvel élément qui pourrait être utilisé pour structurer notre contenu.

C’est pourquoi, je vais continuer de réfléchir avant de choisir des balises et des noms de classe tout comme je m’escrime sur des détails graphiques ou la ponctuation d’un texte ou la manière de coder mon JavaScript.

Jeremy Keith est un auteur et web developpeur qui vit et travaille à Brighton en Angleterre. Il est également l’auteur de HTML5 pour les Web designers chez Eyrolles dont la version mise à jour a été publiée en français en juillet 2016.
Titre original : Pursuing semantic value
Traduction française : Norbert Naigeon

On peut consulter la version originale sur le blog de l’auteur
http://adactio.com/journal/4999/
ou sur le site Smashing Magazine
https://www.smashingmagazine.com/2011/11/pursuing-semantic-value/