À propos de `<dl>` (2021)

 (benmyers.dev)
1 points par GN⁺ 9 시간 전 | 2 commentaires | Partager sur WhatsApp
  • `` est un élément HTML qui représente sémantiquement une liste de paires nom–valeur, adapté à des motifs d’interface comme les équipements d’un hébergement, les postes de facturation ou les glossaires techniques
  • Une liste de descriptions repose sur une structure qui place les noms ** et les **valeurs dans un ``, et un même nom peut avoir plusieurs valeurs
  • Lorsqu’il faut regrouper des et associés pour le style, seul un wrapper `` peut entourer le groupe selon la spécification
  • Avec seulement des imbriqués, les technologies d’assistance reconnaissent difficilement le motif de liste, alors que apporte des avantages de navigation comme le nombre d’éléments, la position actuelle ou la possibilité de sauter la liste
  • Même des données de formes différentes comme les caractéristiques, capacités et actions d’un bloc de stats de Dungeons & Dragons peuvent être réparties en listes de descriptions, ce qui montre bien sa polyvalence

Le motif représenté par ``

  • `` est un élément HTML qui représente une liste de paires nom–valeur et donne un sens sémantique à un motif récurrent dans les interfaces web
  • Les structures où un nom et une valeur vont ensemble, comme les équipements d’un hébergement, les différents postes d’un loyer mensuel ou un glossaire technique, sont des candidates typiques
  • n’est pas un élément autonome : le groupe nom–valeur est formé par l’association de trois éléments,, et
  • Avant HTML5, `` était appelé definition list et servait à l’origine à représenter un glossaire de termes et définitions

Structure de base d’une liste de descriptions

  • , , ``

    • **** enveloppe l’ensemble de la liste de descriptions, un peu comme ou `` enveloppe une liste complète
    • ** désigne le terme de description (description term), c’est-à-dire le nom, et ** le détail de description (description detail), c’est-à-dire la valeur
    • et étaient auparavant connus respectivement comme definition term et definition detail
    • La structure de base consiste à placer un après un

	Title
	Designing with Web Standards

  • Plusieurs paires nom–valeur

    • Pour ajouter d’autres paires nom–valeur dans une même liste, on place simplement un nouveau suivi d’un nouveau

	Title
	Designing with Web Standards
	Publisher
	New Riders Pub; 3rd edition (October 19, 2009)

  • Plusieurs valeurs pour un même nom

    • Un même peut avoir plusieurs **valeurs**
    • Cela permet de représenter directement une structure où un même nom porte plusieurs valeurs, par exemple lorsqu’un livre a plusieurs auteurs

	Title
	Designing with Web Standards
	Author
	Jeffrey Zeldman
	Ethan Marcotte
	Publisher
	New Riders Pub; 3rd edition (October 19, 2009)

  • Wrapper pour le style

    • Lorsqu’il faut regrouper des et associés à des fins de style, on peut utiliser un wrapper ``
    • Selon la spécification, le seul élément wrapper autorisé pour entourer un groupe / est ``
    • Pour plus de détails sur la structure autorisée et ses contraintes, voir la documentation MDN sur `` ou la spécification HTML

		Title
		Designing with Web Standards

		Author
		Jeffrey Zeldman
		Ethan Marcotte

Pourquoi la sémantique est importante

  • Il est possible de créer visuellement des groupes nom–valeur avec de simples `` imbriqués, mais il est alors difficile pour le navigateur ou les technologies d’assistance de reconnaître ce motif de liste
  • Le choix d’un élément sémantique peut se décider selon un critère simple : est-ce que le fait que l’ordinateur reconnaisse ce motif apporte un avantage concret à l’utilisateur ?
  • Avec ``, les utilisateurs de lecteurs d’écran peuvent naviguer plus facilement dans une liste de groupes nom–valeur
    • Ils peuvent connaître le nombre de groupes nom–valeur dans la liste
    • Ils peuvent savoir où ils se trouvent dans la liste actuelle
    • Ils peuvent ignorer toute la liste comme un seul bloc si elle ne les intéresse pas
  • Dans une structure de imbriqués, chaque nom et chaque valeur sont traités comme des nœuds de texte indépendants, alors que donne un sens structurel à la même information
  • Cet avantage est effectivement fourni avec `` dans la plupart des combinaisons navigateur/lecteur d’écran
  • Cela dit, comme la prise en charge de n’est pas encore universelle, on peut choisir d’autres éléments comme tant que le support n’a pas progressé, si une expérience de repli où les données sont traitées comme des nœuds de texte indépendants n’est pas suffisante

Exemple de bloc de stats Dungeons & Dragons

  • Le bloc de stats de Dungeons & Dragons est un bon exemple riche en paires nom–valeur, et l’on peut y repérer plusieurs candidats à des listes de descriptions au sein d’un même bloc
  • Les valeurs de base comme Armor Class, Hit Points et Speed, les caractéristiques comme STR et DEX, les informations de maîtrise comme Senses, Languages et Challenge, ainsi que les Traits et Actions, peuvent chacune être réparties en listes de descriptions
  • Même des listes visuellement différentes, comme une liste de caractéristiques et une liste d’attaques, peuvent toutes être représentées avec le motif de liste de descriptions
  • Pour distinguer plusieurs listes de descriptions ou les relier à un titre, on peut utiliser aria-label et aria-labelledby
  • Ce balisage n’est qu’une des approches possibles, mais il montre bien que le motif `` est suffisamment polyvalent pour s’appliquer à des ensembles de données de formes très différentes

À lire aussi

2 commentaires

 
GN⁺ 6 시간 전
Avis sur Lobste.rs
  • C’est dommage que Markdown n’ait pas de liste de descriptions (description list)
    • Le Markdown façon Pandoc prend en charge les listes de descriptions avec au moins deux syntaxes
      Cela dit, la plupart des implémentations ne les prennent effectivement pas en charge. À l’inverse, le système de composition / langage de balisage Typst propose les listes de descriptions comme une syntaxe de premier ordre, comme / term: description, ce qui, à mon avis, s’accorde bien avec les listes à puces en - ou les listes numérotées automatiques en +
    • Il me semble que certaines implémentations comme Hugo, Pandoc et GFM prennent en charge une forme comme celle-ci 
      dt  
: dd  

dt  
: dd
    • Markdown peut avoir tout ce que HTML a, car c’est un sur-ensemble de HTML
    • https://www.djot.net/ prend en charge les listes de descriptions. Plus important encore, Djot n’est pas un sur-ensemble de HTML, donc il peut aussi être utilisé en dehors des navigateurs avec leur prise en charge lourde de HTML
  • Personnellement, c’est l’un de mes cinq éléments préférés de tous les temps
    • Clairement dans le haut du classement avec <details>. J’aimerais qu’il y ait davantage de ces éléments interactifs
  • On peut aussi mettre plusieurs <dt> dans une même entrée. Cela peut servir à représenter des choses comme des synonymes dans une liste de type dictionnaire
    Pour le styliser en CSS, il vaut mieux se familiariser avec le sélecteur de frères adjacents
    Référence : https://developer.mozilla.org/en-US/docs/…
 
GN⁺ 9 시간 전
Réactions sur Hacker News

  • C’est incorrect : n’a pas de rôle implicite correspondant, mais on peut lui attribuer les rôles `group`, `list`, `none` ou `presentation` `aria-label` ne peut être défini que sur les éléments ayant un rôle compatible, implicite ou explicite, et même si `aria-label` est autorisé pour la plupart des rôles, ici `presentation` et `none` sautent, donc il ne reste que `group` et `list` `group` est maladroit et `list` est acceptable, donc la conclusion est qu’il faut **retirer `aria-label`** ou ajouter `role="list"`. Dans ce cas, les enfants ont aussi besoin de `role="listitem"` Ce que l’article a raté, c’est qu’il peut y avoir non pas un seul, mais plusieurs à la suite. L’exemple de la spécification est bon : https://html.spec.whatwg.org/multipage/grouping-content.html... Ce n’est pas une paire nom-valeur, mais un groupe nom-valeur

    • Je ne savais pas du tout. Par curiosité, tu mettrais role="listitem" sur l’élément qui enveloppe et ? `role="listitem"` semble autorisé sur, mais quand plusieurs sont groupés ensemble, ça ne paraît pas très exact, et je ne sais pas non plus si ça casserait la manière dont est interprété comme terme à l’origine
    • Mon ancien article préféré de HTML5 Doctor reste celui-ci : https://html5doctor.com/element-index/

  • Ce ne sera pas populaire ici, mais ma vie est devenue plus simple depuis que je n’essaie plus d’utiliser du HTML sémantique. Le design est simplement mauvais Chaque fois que j’ai essayé d’utiliser , je l’ai regretté au final. Parce qu’il faut plusieurs niveaux de wrappers, ou des séparateurs entre sections, ou des icônes, ou un titre qui s’étend sur plusieurs paires clé-valeur Il y a une certaine souplesse, mais elle est très loin de suffire pour vraiment prendre en charge le concept généralisé qu’il prétend représenter. Bien sûr, j’utilise encore des éléments correspondants comme , `` quand il y a un bénéfice observable, mais si ça ne colle pas exactement au modèle de données et qu’il faut tout surcharger, ce n’est pas un choix pratique Si 99 % des usages contournent l’API, ce n’est probablement pas si controversé de dire que c’est la faute de l’API

    • En tant qu’utilisateur quotidien de lecteur d’écran, je suis totalement d’accord Ce serait mieux pour tout le monde si le W3C abandonnait son discours idéologique sur la pureté sémantique et adoptait une approche plus pragmatique. Au lieu de se demander si l’API est sémantiquement pure, il faudrait regarder ce que les développeurs veulent faire, quelles astuces ils utiliseront même si on s’y oppose, et comment rendre cela possible de la manière la plus bénéfique pour tout le monde Les ARIA live regions en sont l’exemple parfait. Ce que les développeurs veulent réellement, c’est document.speakText. Ce qu’ils ont réellement, c’est une API étrange qui lit le texte d’une page quand celui-ci change. Il faut faire le pont entre les deux, et même bien implémenté c’est difficile et proche du bricolage. Mais au moins, la méthode des live regions est sans doute du HTML sémantiquement pur
    • On dirait plutôt que c’est la faute du CSS. Puisque display:contents permet de supprimer les wrappers, je pense qu’on devrait aussi introduire un moyen de grouper des éléments comme s’ils avaient un ancêtre commun :wrap(dt, dt+dd) {border: solid 1px}
    • J’ai un ressenti similaire à propos de HTTP. Ce protocole correspond parfaitement à des stockages de ressources comme S3. GET, PUT et DELETE ont tous du sens, et les codes d’état HTTP ont précisément été conçus pour cet usage Mais en tant que développeur web, la plupart du temps on ne construit pas un stockage de ressources. C’est quelque chose de très générique qu’on crée une fois pour que des millions d’applications l’utilisent. Quand quelqu’un écrit du code qui interagit avec HTTP, la plupart du temps il fait des appels de procédure à distance Avec GraphQL, gRPC ou un autre système d’appel de procédure à distance, on évite tout cela entièrement. On envoie tout en POST vers un endpoint unique et on ajoute une couche d’abstraction supplémentaire, de sorte qu’il n’est pas nécessaire de renvoyer des erreurs 4XX/5XX pour chaque situation très spécifique à l’application Les auteurs des RFC sont clairement allés un peu trop loin. 402 Payment Required, 407 Proxy Authentication Required, 508 Loop Detected donnent l’impression de tentatives pour injecter dans le socle du web des fonctionnalités spécifiques à certaines applis ou à certains types de déploiement Je ne comprends pas pourquoi les besoins spécifiques des auteurs de RFC sont implémentés dans les fondations du web, alors que les miens m’obligent à trouver quelques recouvrements fortuits et à entasser tous les éléments spécifiques à l’application dans 400 Bad Request ou 500 Internal Server Error. Chaque fois que je vois une web app utiliser réellement plus que le strict minimum de codes d’état HTTP, ça me fait lever les yeux au ciel. Ça devrait être au niveau de la couche applicative. Ce protocole n’a pas été conçu pour vous, mais pour des applications LAMP stack qui servaient principalement des ressources statiques

  • Petit cours d’histoire des listes. Si on regarde le manuel IBM DCF/GML de 1985 ci-dessous, DL-DT-DD existait déjà avant le web Dans ce document de plus de 40 ans, on trouve non seulement les Definition lists (DL), mais aussi les Glossary lists (GL), Ordered lists (OL), Unordered lists (UL) et Simple lists (SL) ibm :: 370 :: DCF :: SH35-0050-2 Document Composition Facility Generalized Markup Language Implementation Guide Rel 3 Mar85 https://archive.org/details/bitsavers_ibm370DCFSpositionFaci...

    • GML remonte à 1969, et SGML aux années 1970. En interne, on utilisait quelque chose appelé BookMaster, qui ressemblait un peu à un prédécesseur du HTML Au lieu de ``, c’était :p., au lieu de `

  • c’était:li.`. À l’époque où TBL développait HTML et HTTP vers 1990-1991, il y avait aussi une tentative appelée HyTime, une application SGML axée sur l’hypermédia. HTML l’a supplantée assez vite Pour Charles Goldfarb, qui a porté GML/SGML, voir https://en.wikipedia.org/wiki/Charles_Goldfarb, et pour SGML voir https://en.wikipedia.org/wiki/Standard_Generalized_Markup_La...

    • Il me semble que l’IBM Generalized Markup Language a évolué en SGML (Standard Generalized Markup Language), et que SGML était beaucoup utilisé au CERN, où Tim Berners-Lee travaillait sur HTML. HTML en est largement dérivé Ce qui est intéressant avec HTML, c’est qu’une certaine forme de langage de balisage a circulé pendant des décennies, puis Berners-Lee y a ajouté les hyperliens
    • Ce n’est pas plutôt une description list maintenant ?

  • Le tout premier site web utilisait beaucoup `` https://info.cern.ch/hypertext/WWW/TheProject.html https://info.cern.ch/ est une sorte de landing page qui donne le contexte et l’orientation du véritable premier site web

  • Tous les toolkits GUI natifs sont morts, et maintenant des gens peuvent écrire de longues dissertations sur un seul élément HTML. Je me demande si c’est vraiment du progrès

  • Je viens d’apprendre qu’avant HTML5, on appelait ça une definition list, et qu’à l’origine `` ne devait servir qu’à représenter des glossaires faits de termes et de définitions. J’ai donc utilisé le mauvais nom pendant 10 ans

    • Donc b veut maintenant dire “bring attention to”. Génial
    • Tu n’es pas seul. C’est la deuxième fois que je vois ça cette semaine, et au début j’ai cru à une erreur
    • Je viens juste d’apprendre que le nom a changé, de definition list
    • Je n’ai pas envie de vérifier en quelle année HTML5 a été standardisé. Il y a de bonnes chances que ça fasse plus de 10 ans ;)

  • Bon article. Pour pinailler sur un détail minime, l’élément small ne devrait pas être utilisé pour les sous-titres ; pour cet usage, il faudrait l’élément hgroup L’élément small représente un commentaire annexe, comme du texte en petits caractères. Les petits caractères servent généralement aux clauses de non-responsabilité, aux avertissements, aux restrictions légales et au copyright. Ils sont aussi parfois utilisés pour satisfaire des exigences d’attribution ou de licence (https://html.spec.whatwg.org/multipage/text-level-semantics....)

  • Il y a une note utile sur la qualité de prise en charge de `` par les lecteurs d’écran : https://adrianroselli.com/2025/01/updated-brief-note-on-desc...

  • Le dernier exemple avec une fiche de caractéristiques de JdR me fait me demander si imbriquer `` est aussi légal Par exemple, peut-on faire quelque chose comme Actions ... ?

  • J’aime bien . Au moins, autrefois, les tables semblaient plus souvent détournées de leur usage pour imiter , et la lourdeur du balisage des tables est pire qu’un tas de div

    • Si on omet les balises fermantes inutiles, ce n’est pas si pénible first second what ever Je trouve ça plus simple et plus propre que n’importe quelle syntaxe de tableau Markdown
    • Oui. Mais forcer les tables à imiter `` faisait quand même partie des mauvais usages de tables les moins graves
    • J’ai toujours considéré `` comme l’équivalent d’une seule ligne de table