Plan de site Navigation
Blog & Blues Techniques et Standards de la Qualité Web

Accueil > weblog


- Lire le billet précédent - Lire le billet suivant -

L'élégance technique et sémantique au détriment de la qualité ? Exemple des listes de définition HTML.

Par Laurent Denis, le 12 juillet 2005.

Il a souvent été dit et répété qu'un code HTML "sémantique" était un gage de qualité pour une page Web. Ce qui, en réalité, peut s'avérer totalement faux à l'épreuve des faits. Une certaine approche sémantisante produit même plutôt l'effet inverse, en oubliant l'utilisateur en cours de route.

Prenons le temps d'examiner un cas concret : l'utilisation tous azimuts des très réputées listes de définition.

La mode des listes de définition

Certains éléments HTML sont définis par la spécification HTML4.01 de manière très ambiguë. C'est hélas le cas de l'élément dl, qui serait d'abord quelque-chose permettant de lier un terme et sa définition, et ensuite... à peu près tout ce qu'on voudra bien en faire : une structure de dialogues, de menus, de vignettes d'images, un pseudo-tableau de données, etc.

D'où, inévitablement, de fascinantes querelles érudites pour savoir si ceci définit bien cela, si tel usage de dt est bien correct sémantiquement, si tel ou tel bout de contenu peut légitimement être un dd, etc. On entend alors par "sémantique", en règle général, l'idée assez floue selon laquelle les éléments HTML ont un "sens" et qu'il convient de les employer conformément à celui-ci.

Fréquemment, dans l'impossibilité de trancher ces querelles théologiques, c'est en fait surtout l'attrait irrésistible des possibilité de style CSS et de comportement javascript sur ces éléments dl, dt et dd qui l'emporte : nous voici avec un magnifique menu de navigation hiérachisé en liste de définition, ou un contenu dynamisé coulissant d'une rare élégance.

Elégance... il faut reconnaître, en effet, que la liste de définition, seul élément HTML qui lie explicitement un intitulé (dt) et un contenu (dd) dans un élément parent (dl), permet de faire toutes sortes de choses avec une remarquable économie de moyens.

Mais arrêtons-nous un instant, et regardons le chemin suivi : partis d'une possibilité technique, nous sommes passés par une réflexion toujours technique (l'étape sémantisante), une tentation encore technique (l'étape CSS et javascript), pour aboutir finalement à un choix purement technique (l'élégance de la chose). Qu'avons-nous oublié en cours de route ?

L'utilisateur et l'utilité

Notre oubli est de taille : l'utilisateur, quel qu'il soit. C'est à dire, finalement, l'utilité de la liste de définition.

  • La liste de définition est manifestement utile pour le codeur, pour qui elle est économique et gratifiante ;
  • Elle peut aussi bien être utile à une machine traitant le contenu (Google definition exploite l'élément dl) que totalement inutile (Google en général s'en fiche comme de son premier paragraphe) ;
  • Mais elle peut être dommageable pour le visiteur du site dans un certain nombre de cas:
    • au mieux, elle n'apporte aucun enrichissement de son expérience du site : les navigateurs ne font aucune exploitation spécifique de cet élément.
    • au pire, elle dégrade fortement cette expérience en privant l'utilisateur des bénéfices d'un titrage cohérent sur l'ensemble de la page.

En effet, la liste de définition vient très souvent remplacer un code plus classique, moins élégant, à base de titres hn. Or, ces titres se prêtent, eux, à bien d'autres exploitations que les listes de définition : ils sont en effet, par exemple, extrayables pour constituer une table des matières, ils sont navigables dans un lecteur d'écran, etc.

Il en est de même lorsque la liste de définition vient remplacer un tableau en bonne et dûe forme.

Maîtriser les choix techniques dans une démarche de qualité

Est-ce à dire qu'il faudrait bannir les listes de définition ? Il est évident que non, et que tomber d'un excès dans l'autre ne changerait rien au problème que nous traitons ici.

Il s'agit plutôt, à mon sens :

  • D'être conscient que l'élégance du code n'est pas synonyme de qualité finale de la page pour l'utilisateur ;
  • De se méfier comme de la peste de tout emploi du mot "sémantique", cache-sexe fréquent d'une approche très floue de ce qu'est un élément structurel et de son rôle. Se souvenir que la sémantique, c'est avant tout donner une information dans l'intention de permettre son exploitation, et que le choix de tel ou tel élément doit s'appuyer sur ce qu'en feront les applications qui auront à le traiter ;
  • De raisonner, enfin, en terme d'utilité pour chacune des parties concernées : codeur, utilisateur-machine et utilisateur humain.

Ainsi, au cas par cas, on sera beaucoup plus en mesure de faire des choix maîtrisés sur l'utilisation d'une liste de définition, d'un titrage, ou d'une autre structure. Cette maîtrise plus raisonnée des choix techniques est indispensable à une démarche visant la qualité globale du document ou du service produit.

Note : Cette mode des listes de définition, qui a fait rage depuis un an, semble enfin laisser place aujourd'hui à une approche plus mesurée (à laquelle invitaient déjà d'ailleurs les premiers articles sur le sujet, tel celui de Russ Weakley mentionné ci-dessus). Les deux articles de Raphaël Goetter cités en exemples d'abus sémantisant ou technique sont donc à prendre pour ce qu'ils sont, c'est à dire le reflet de la réflexion de leur auteur il y a quelques mois... Réflexion qui n'a pas manqué d'évoluer depuis, sûrement smiley clin d'oeil

Trackbacks

Les trackbacks pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.

Commentaires

Vero, le 12 juillet 2005

En lisant ce billet et celui de 2 plus récent concernant les titres, ma vision (très néophyte) aurait tendance à "regretter" que les titres ne puissent être employés pour la navigation dans le site. Il y a un billet traitant de cette approche (à relire peut-être) mais un site est un ensemble de pages cohérent même si chacune peut être lue indépendamment ...
Il est vrai que le web apporte une autre dimension que l'approche linéaire d'un livre.
Mais la démarche d'esprit de l'auteur d'un site dans le découpage de l'information qu'il fournit s'appuie sur une structure, laquelle peut aider le visiteur, même si elle apparaît de façon hiérarchique.
J'ai peut-être l'esprit trop carré ...
smiley clin d'oeil

Laurent Denis, le 12 juillet 2005

> "un site est un ensemble de pages cohérent" : ce que peuvent tout à fait décrire les liens relatifs (<link rel=...) actuellement sous-employés (en partie faute d'implémentation dans Internet Explorer... ce qui nécessite d'offrir l'alternative indispensable smiley clin d'oeil ).

Les commentaires pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.