Acerca de `<dl>` (2021)

 (benmyers.dev)
1 puntos por GN⁺ 9 시간 전 | 2 comentarios | Compartir por WhatsApp
  • `` es un elemento HTML que representa semánticamente una lista de pares nombre–valor, adecuado para patrones de UI como amenidades, cargos desglosados o glosarios técnicos
  • Una lista de descripciones se estructura colocando nombres** y ** valores dentro de un ``, y un mismo nombre puede tener varios valores asociados
  • Cuando hace falta agrupar dt y dd relacionados para aplicar estilos, según la especificación solo un wrapper `` puede envolver el grupo
  • Si se usan solo anidados, a las tecnologías de asistencia les cuesta más reconocer el patrón de lista, mientras que aporta ventajas de navegación como cantidad de ítems, posición actual y omitir la lista
  • Incluso datos de distintas formas, como los bloques de estadísticas de Dungeons & Dragons, pueden dividirse en listas de descripciones, lo que deja clara su versatilidad

El patrón que representa ``

  • `` es un elemento HTML que representa una lista de pares nombre–valor y aporta significado semántico a un patrón que aparece repetidamente en las interfaces web
  • Estructuras donde nombre y valor van emparejados, como amenidades de un alojamiento, cargos individuales del alquiler mensual o glosarios técnicos, son candidatas típicas
  • no es un elemento aislado, sino una combinación de tres elementos:, y para formar grupos de nombre–valor
  • Antes de HTML5, `` se conocía como definition list y originalmente era un elemento para representar glosarios de términos y definiciones

Estructura básica de una lista de descripciones

  • , , ``

    • **** envuelve toda la lista de descripciones, de forma parecida a cómo o `` envuelven una lista completa
    • ** es el término de descripción (description term) y representa el nombre, mientras que ** es el detalle de descripción (description detail) y representa el valor
    • y antes también se conocían respectivamente como definition term y definition detail
    • La estructura básica consiste en poner un seguido de un

	Title
	Designing with Web Standards

  • Varios pares nombre–valor

    • Para agregar otros pares nombre–valor dentro de la misma lista, se colocan nuevos y a continuación

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

  • Varios valores para un mismo nombre

    • Un solo ** puede tener varios **valores
    • Permite expresar directamente estructuras donde un mismo nombre tiene varios valores asociados, como cuando un libro tiene varios autores

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

  • Wrapper para estilos

    • Cuando hace falta agrupar dt y dd relacionados con fines de estilo, se puede usar un wrapper ``
    • Según la especificación, el único elemento wrapper que puede envolver un grupo dt/dd es ``
    • Para ver con más detalle la estructura permitida y las restricciones, se puede consultar la documentación de `` en MDN o la especificación HTML

		Title
		Designing with Web Standards

		Author
		Jeffrey Zeldman
		Ethan Marcotte

Por qué hace falta semántica

  • Los grupos nombre–valor pueden construirse visualmente solo con `` anidados, pero para el navegador o las tecnologías de asistencia es más difícil reconocerlos como un patrón de lista
  • La elección de elementos semánticos puede decidirse según si, al reconocer ese patrón, la computadora puede ofrecer beneficios reales al usuario
  • Si se usa ``, quienes usan lectores de pantalla pueden navegar con más facilidad una lista de grupos nombre–valor
    • Pueden saber la cantidad de grupos nombre–valor dentro de la lista
    • Pueden identificar en qué posición se encuentran dentro de la lista actual
    • Si no les interesa, pueden omitir toda la lista como si fuera un solo bloque
  • En una estructura de anidados, cada nombre y valor se procesa como un nodo de texto independiente, pero aporta significado estructural a la misma información
  • Estas ventajas realmente se ofrecen al usar `` en la mayoría de las combinaciones de navegador/lector de pantalla
  • Aun así, como el soporte de todavía no es totalmente generalizado, si la experiencia de fallback como nodos de texto independientes no es suficiente, también se podría optar por otro elemento como hasta que el soporte mejore

Ejemplo de bloque de estadísticas de Dungeons & Dragons

  • El bloque de estadísticas de Dungeons & Dragons es un ejemplo con muchos pares nombre–valor, y dentro de un mismo bloque pueden encontrarse varios candidatos para listas de descripciones
  • Se pueden separar en listas de descripciones los valores básicos como Armor Class, Hit Points y Speed; las puntuaciones de habilidad como STR y DEX; la información de competencia como Senses, Languages y Challenge; y también Traits y Actions
  • Incluso listas visualmente distintas, como una lista de habilidades y otra de ataques, pueden representarse ambas con el patrón de lista de descripciones
  • Para distinguir varias listas de descripciones o vincularlas con un título, se pueden usar aria-label y aria-labelledby
  • Este marcado es solo una de las formas posibles y muestra lo versátil que es el patrón ``, al poder aplicarse a conjuntos de datos de formas diferentes

Lecturas relacionadas

2 comentarios

 
GN⁺ 6 시간 전
Opiniones de Lobste.rs
  • Es una pena que Markdown no tenga listas de descripción (description list)
    • El Markdown al estilo Pandoc sí soporta al menos dos sintaxis para listas de descripción
      Aunque es cierto que la mayoría de las implementaciones no lo soportan. En cambio, Typst, que es un sistema de composición tipográfica/lenguaje de marcado, ofrece las listas de descripción como sintaxis de primera clase, como / term: description, así que creo que combina bien también con las listas con viñetas - y las listas numeradas automáticas +
    • Recuerdo que algunas implementaciones como Hugo, Pandoc y GFM soportan una forma como esta 
      dt  
: dd  

dt  
: dd
    • Markdown puede tener todo lo que tiene HTML, porque es un superconjunto de HTML
    • https://www.djot.net/ soporta listas de descripción. Más importante aún, Djot no es un superconjunto de HTML, así que puede usarse también fuera de navegadores con soporte inflado de HTML
  • Personalmente, es uno de mis elementos favoritos de todos los tiempos, fácilmente dentro del top cinco
    • Junto con <details>, sin duda está entre los mejores. Ojalá hubiera más elementos interactivos como este
  • También se pueden poner varios <dt> en una sola entrada. Puede servir para expresar cosas como sinónimos en una lista tipo diccionario
    Al darle estilo con CSS, conviene familiarizarse con el selector de hermanos adyacentes
    Referencia: https://developer.mozilla.org/en-US/docs/…
 
GN⁺ 9 시간 전
Comentarios de Hacker News

  • Esto está mal: no tiene un rol implícito correspondiente, pero sí se le pueden asignar los roles `group`, `list`, `none`, `presentation` `aria-label` solo puede definirse en elementos que tengan un rol compatible, ya sea implícito o explícito, y aunque `aria-label` está permitido en la mayoría de los roles, aquí `presentation` y `none` quedan fuera, así que solo quedan `group` y `list` `group` se siente raro y `list` es aceptable, así que la conclusión es **quitar `aria-label`** o agregar `role="list"`. Entonces los hijos también necesitarían `role="listitem"` Lo que el artículo pasó por alto es que no solo puede haber un, sino varias seguidas. El ejemplo de la especificación es bueno: https://html.spec.whatwg.org/multipage/grouping-content.html... Esto no es un par nombre-valor, sino un grupo de nombre-valor

    • No sabía esto para nada. Me da curiosidad: ¿le pondrías role="listitem" al elemento que envuelve y ? `role="listitem"` parece estar permitido en , pero cuando se agrupan varios juntos no parece del todo correcto, y tampoco tengo claro si eso rompería la forma en que se interpreta originalmente como término
    • El viejo artículo de HTML5 Doctor sigue siendo el que más me gusta: https://html5doctor.com/element-index/

  • Esto no será popular aquí, pero mi vida mejoró cuando dejé de intentar usar HTML semántico. El diseño simplemente no es muy bueno Cada vez que intenté usar , terminé arrepintiéndome. Porque hacía falta varios niveles de wrappers, o separadores entre secciones, o íconos, o un encabezado que abarcara varios pares clave-valor Tiene cierta flexibilidad, pero está muy lejos de poder manejar de verdad la idea generalizada que dice representar. Claro, sigo usando elementos equivalentes como , `` cuando aportan beneficios observables, pero si no encaja exactamente con el modelo de datos y además hay que sobrescribirlo todo, no es una opción práctica Si el 99% de los usos evita la API, probablemente no sea tan polémico decir que el problema es la API

    • Como alguien que usa lector de pantalla todos los días, estoy totalmente de acuerdo Sería mejor para todos si el W3C dejara la tontería ideológica de la pureza semántica y adoptara un enfoque más pragmático. Más que preguntarse si la API es semánticamente pura, debería mirar qué quieren hacer los desarrolladores, qué trucos van a usar aunque se les opongan, y cómo permitir eso de la manera más beneficiosa para todos ARIA live region es un ejemplo perfecto. Lo que los desarrolladores realmente quieren es document.speakText. Lo que en realidad tienen es una API extraña que lee el texto de la página cuando cambia. Hay que conectar esas dos cosas, y aunque se implemente bien, sigue siendo difícil y medio hacky. Pero bueno, al menos el enfoque de live region será HTML semánticamente puro
    • Entonces eso suena más bien a culpa de CSS. Así como display:contents permite eliminar wrappers, también debería introducirse una forma de agrupar elementos como si compartieran un ancestro común :wrap(dt, dt+dd) {border: solid 1px}
    • Siento algo parecido con HTTP. Este protocolo encaja muy bien con un almacén de recursos como S3. GET, PUT y DELETE tienen todo el sentido, y los códigos de estado HTTP parecen hechos exactamente para ese uso Pero como desarrollador web, la mayor parte del tiempo no estás construyendo un almacén de recursos. Eso es algo muy genérico: se hace una vez y luego lo usan millones de apps. Cuando alguien escribe código que interactúa con HTTP, la mayor parte del tiempo está haciendo llamadas a procedimientos remotos Si usas GraphQL, gRPC u otro sistema de llamadas a procedimientos remotos, te saltas todo eso por completo. Mandas todo por POST a un solo endpoint y agregas otra capa de abstracción, así no hace falta devolver errores 4XX/5XX para cada situación tan específica de la aplicación Está claro que quienes escribieron los RFC se pasaron un poco. 402 Payment Required, 407 Proxy Authentication Required, 508 Loop Detected parecen intentos de meter funciones específicas de cierta app o cierto tipo de despliegue en la base misma de la web No entiendo por qué las necesidades concretas de quienes escribieron los RFC se implementan en la base de la web, mientras que yo tengo que encontrar alguna coincidencia medio accidental y meter todos los elementos específicos de mi app dentro de 400 Bad Request o 500 Internal Server Error. Cada vez que veo una web app usando de verdad más que el mínimo indispensable de códigos de estado HTTP, no puedo evitar poner los ojos en blanco. Eso debería ir en la capa de aplicación. Este protocolo no fue hecho para ti, sino para apps del stack LAMP que en su mayoría servían recursos estáticos

  • Clase de historia de listas. Si ves el manual de DCF/GML para mainframe IBM de 1985 más abajo, DL-DT-DD ya existía desde antes de la web En un documento de hace más de 40 años aparecen no solo las Definition lists (DL), sino también Glossary lists (GL), Ordered lists (OL), Unordered lists (UL) y 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 se remonta a 1969, y SGML a los años 70. Internamente usaban algo llamado BookMaster, que también parecía una especie de precursor de HTML En vez de ``, era :p., y en vez de `

  • era:li.`. Por la época en que TBL desarrollaba HTML y HTTP, entre 1990 y 1991, también hubo un intento llamado HyTime, una aplicación SGML enfocada en hipermedia. HTML la desplazó bastante rápido Para Charles Goldfarb, que impulsó GML/SGML, ver https://en.wikipedia.org/wiki/Charles_Goldfarb, y para SGML ver https://en.wikipedia.org/wiki/Standard_Generalized_Markup_La...

    • Entiendo que el Generalized Markup Language de IBM evolucionó hacia SGML (Standard Generalized Markup Language), y que SGML se usaba bastante en el CERN donde Tim Berners-Lee estaba trabajando en HTML. HTML derivó en gran medida de ahí Lo interesante de HTML es que alguna forma de lenguaje de marcado anduvo dando vueltas durante décadas, hasta que Berners-Lee le agregó hipervínculos
    • ¿Ahora no se llama description list?

  • El primer sitio web del mundo usa mucho `` https://info.cern.ch/hypertext/WWW/TheProject.html https://info.cern.ch/ es una especie de landing page que da contexto y dirección sobre el verdadero primer sitio web

  • Los toolkits GUI nativos están todos muertos, y ahora la gente puede escribir ensayos larguísimos sobre un solo elemento HTML. No sé si eso cuenta como progreso

  • Antes de HTML5 esto se llamaba definition list, y recién ahora me entero de que originalmente `` solo pretendía representar glosarios con términos y definiciones. Llevo 10 años llamándolo mal

    • Y ahora b significa “bring attention to”. Qué cosa
    • No eres el único. Esta es la segunda vez que veo esto esta semana, y la primera pensé que era un error
    • Recién ahora me entero de que le cambiaron el nombre a definition list
    • No quiero revisar en qué año se estandarizó HTML5. Seguro ya pasaron más de 10 años ;)

  • Buen artículo. Como observación muy menor, el elemento small no debería usarse para subtítulos; para eso debería usarse el elemento hgroup El elemento small representa comentarios secundarios, como texto pequeño. El texto pequeño suele incluir descargos, advertencias, restricciones legales y copyright. A veces también se usa para cumplir requisitos de atribución o licencia (https://html.spec.whatwg.org/multipage/text-level-semantics....)

  • Hay una nota útil sobre qué tan bien los lectores de pantalla soportan ``: https://adrianroselli.com/2025/01/updated-brief-note-on-desc...

  • Viendo el último ejemplo de la hoja de atributos de DnD, me pregunto si también es legal anidar `` Por ejemplo, ¿se puede hacer algo como Actions ...?

  • Me gusta . Al menos antes, parecía que las tablas se usaban mal más seguido como , y la incomodidad del marcado de tablas es peor que tener varios div

    • Si omites las etiquetas de cierre innecesarias, no es tan incómodo first second what ever Me parece más simple y limpio que cualquier sintaxis de tablas de Markdown
    • Sí. Pero forzar una tabla a imitar `` era de hecho uno de los usos incorrectos menos malos de las tablas
    • Siempre pensé en `` como si fuera una sola fila de una tabla