Una publicación de blog con todos los elementos HTML

 (patrickweaver.net)
5 puntos por GN⁺ 2023-08-14 | 1 comentarios | Compartir por WhatsApp
  • Patrick Weaver, mientras estudiaba accesibilidad web, experimentó con HTML semántico aplicando más de 100 etiquetas HTML en páginas reales de su sitio personal basado en Eleventy
  • El objetivo inicial era no quedar trabado en el futuro al escribir por culpa del CSS de elementos poco familiares, pero completar esta única publicación le llevó un año y medio
  • Tomando como referencia la lista de elementos HTML de MDN Web Docs, revisó elementos estructurales como , , , , y
  • Elementos menos conocidos como , , , , y revelan usos concretos como direccionalidad, anotaciones de pronunciación, salida de programas, saltos de línea, interacción y Web Components
  • Entre el significado de HTML y su implementación real quedan rastros de compatibilidad, como soporte de navegadores, generación de sitios estáticos, reproducción de video en Safari y comportamiento de etiquetas obsoletas

Punto de partida y objetivo del experimento

  • Después de aprender más sobre accesibilidad web, empezó a revisar elementos HTML poco usados y a incorporarlos en su sitio personal
  • El sitio está hecho con Eleventy, envuelve el cuerpo de las publicaciones del blog con y agregó a la plantilla de layout
  • Ya había ajustado los estilos de y para los pies de imagen, y también le interesó implementar footnotes o sidenotes relacionados con Recurse
  • Decidió probar todos los elementos en una sola publicación tomando como referencia la lista de elementos HTML de MDN Web Docs
    • El objetivo era que, al escribir en el futuro, las actualizaciones de CSS no se retrasaran por elementos que no hubiera usado antes
    • En la práctica, corregir estilos y plantillas para esta única publicación le llevó un año y medio
  • Hay elementos como `` que son difíciles de insertar directamente en el cuerpo de un artículo, pero organizó la página para que, vista en patrickweaver.net, todos los elementos aparezcan en algún lugar

Estructura del documento y elementos de metadatos

  • `` no requirió cambios especiales, pero confirmó que no siempre recuerda atributos lang como lang="en"
  • `` no le era familiar antes de escribir esta publicación, y luego lo agregó a la plantilla de layout junto con enlaces relativos
    • Surgieron algunos problemas con el desarrollo local y los enlaces relativos, pero se resolvieron fácilmente
    • , , , y `` ya eran elementos conocidos y presentes en el sitio
  • Al leer la documentación de `` encontró atributos como onbeforeprint y onblur
    • onbeforeprint se relacionaba con una función que antes había resuelto de una forma más indirecta
    • onblur le pareció usado principalmente para pop-ups molestos

Secciones de contenido y jerarquía de títulos

  • Pensaba que `` era solo para direcciones postales, pero descubrió que también puede usarse para direcciones de email y enlaces
  • La plantilla de publicaciones del blog ya usaba ``, y después de leer la documentación evaluó si también podía encajar en todas las páginas del sitio
  • En el área de footnotes usa ``
    • `` representa una parte relacionada indirectamente con el contenido principal del documento
    • Deja abierta la posibilidad de darle estilo como sidenote en el futuro
  • El diseño del sitio originalmente no tenía ``, pero lo agregó en esta publicación
  • Solo usaba `` en la parte superior de la página, pero confirmó que se pueden usar varios y lo aplicó también al área de encabezado de cada publicación del blog
  • También reorganizó la jerarquía de títulos
    • Antes usaba el nombre del sitio como , el nombre de la sección como y el título del artículo como ``
    • Después de leer la documentación y los consejos de W3C, cambió para que el objetivo de `` varíe según la página y dejó los estilos a cargo de clases
    • Consideró que esta forma se ajusta mejor a la separación de responsabilidades entre HTML y CSS
  • Tras iniciar el experimento a comienzos de 2022 y antes de publicarlo en el verano de 2023, y se agregaron a la documentación de MDN
    • se usa para agrupar el título de una sección con el subtítulo
    • `` es un elemento semántico que representa la entrada de búsqueda, no los resultados de búsqueda
    • Como es un sitio generado estáticamente y no genera resultados de búsqueda en el servidor, el ejemplo necesita JavaScript
    • A 2023, no vio `` ni en la búsqueda del encabezado de MDN ni en google.com
  • fue una de las curiosidades iniciales que motivaron esta exploración, y después de leer la lista de MDN agregó al menú superior
  • También incluyó `` en la publicación, pero al escribir mezclando Markdown y HTML le resulta difícil mantener visualmente clara la anidación, así que no está seguro de usarlo con frecuencia en otros lugares

Observaciones obtenidas de elementos de contenido de texto

  • Antes había usado `` en tweets incrustados, pero en esta publicación agregó un estilo para citas independientes
    • Antes de revisar la documentación en detalle no conocía el atributo cite de ni el elemento
  • , y fueron elementos que descubrió tarde, y le pareció extraño que sea relativamente menos conocido que y
    • y tienen margin por defecto, pero en el margin está en
  • `` tiene mala reputación en la web moderna por su uso excesivo, pero al principio en este sitio se usaba poco
    • Al aparecer elementos que quería estilizar en conjunto, creció hasta unos 20 usos
    • Esto muestra que en sitios sin muchas “sections” genéricas quizá no hagan falta muchos ``
  • y fueron elementos tempranos que agregó al migrar artículos desde Medium para expresar semánticamente pies de imagen
    • Según la documentación, `` puede usarse no solo para imágenes, sino también para ilustraciones, diagramas y fragmentos de código
    • Considera que actualmente hay muchos bloques de código donde podría usarse ``
  • Al ver en la documentación que `` se define como una separación semántica y no como una línea horizontal visual, revisó su estilo
    • Puso un emoji en hr:after, pero necesita comprobar cómo se comporta con lectores de pantalla
  • fue un elemento que vio por primera vez, y le sorprendió que haya sobrevivido hasta HTML5 dado que el navegador básicamente lo trata como
  • La documentación de `` tenía menos guía de la esperada y dejó la pregunta de si un texto que no es largo “realmente es un párrafo”
  • Pensaba que `` era solo para bloques de código, pero confirmó que también puede usarse para mostrar espacios en blanco significativos

Elementos semánticos de texto en línea

  • Había usado [link](#) como si fuera un placeholder, pero en realidad era un enlace que lleva al inicio de la página
  • `` le pareció probablemente la etiqueta con menor probabilidad de uso, porque la documentación de MDN la describe como “para conveniencia del autor”
  • La diferencia entre y no coincidía con su comprensión previa de que en HTML5 había reemplazado a
    • Como regla práctica, decidió usar en general para palabras y para oraciones o frases
    • Es una regla empírica que simplifica la distinción real
  • `` es un elemento para tratar texto cuya dirección puede diferir del texto circundante
    • El ejemplo son nombres, pero considera que también aplica a texto Unicode arbitrario ingresado por usuarios
    • En el futuro intentará envolver con `` las etiquetas que puedan incluir entradas arbitrarias
  • `` probablemente lo use menos porque no trabaja a menudo con idiomas RTL, pero saber manejar pequeñas cantidades de texto RTL es útil
  • tuvo una época en la que se usaba mal, como `` antes, pero considera que eso podría ser menos probable ahora que CSS es más potente
    • Como el ejemplo de la documentación es un poema, se pregunta cómo se pensó la frontera entre párrafos y líneas independientes
    • En algunos casos `` podría ser más adecuado
  • y vuelven a expresar como semántica HTML un significado que en muchos idiomas ya se representa con puntuación visible
    • El estilo por defecto de es cursiva, y agrega comillas que no están en el texto
  • se usó mucho en toda la publicación, y le dio curiosidad si el soporte Markdown de Google Docs usa; al ver el HTML del documento, comprobó que Google Docs actualmente renderiza como ``
  • En `` el ejemplo de MDN asigna un ID de producto con value al nombre del producto, por lo que le costó imaginar un caso de uso real
    • Si el ID debe mostrarse al usuario, conviene mostrarlo; si no debe mostrarse, no queda claro para quién es ese dato
    • Confirmó que `` no aparece en la W3C HTML5 specification
  • Considera extraño el nombre de `` porque no envuelve la definición en sí, sino el término dentro de una definición
    • Resumió que parece haber estado incluido solo en una propuesta de HTML 2.0 que no fue adoptada oficialmente
  • y también lo hicieron pensar en criterios de uso, como y
    • Como regla práctica, decidió usar en general para palabras y para oraciones o frases
    • Los ejemplos de la documentación usan mucho `` para llamar la atención sobre expresiones que podrían confundirse
  • `` sirve para indicar teclas del teclado, pero le interesa dónde está el límite con acciones como “Right click”
  • `` le pareció un rastro de la web de autoría bidireccional, como cuando un usuario marca un libro con resaltador
  • , y `` se usan en tipografía de Asia oriental para brindar información de pronunciación, traducción o transliteración
    • `` se usa para ocultar caracteres de paréntesis incluidos en el código fuente
  • `` es un elemento de tachado que indica texto que antes era correcto pero ahora ya no es preciso o relevante
    • Fue declarado deprecated en HTML 4.01 y su significado fue redefinido en HTML5
    • Algunos lectores de pantalla no anuncian el tachado, lo que puede causar confusión, así que agregó al sitio el CSS recomendado por MDN
  • sirve para mostrar salida de programas, y actualizó con una publicación sobre Raspberry Pi que antes resolvía con ``
  • `` se usa para renderizar texto pequeño, pero cree que en la mayoría de los casos seguirá usando CSS
  • Al leer la documentación de empezó a preguntarse por primera vez por qué se permiten estilos contradictorios como o ``
  • y quizá antes los había implementado con CSS, pero los aplicó en ejemplos de footnotes y fórmulas
  • `` parece útil para HTML semántico, así que lo aplicó a las fechas de las publicaciones del blog
    • Observó que los resultados de Google Search tampoco parecen usar ``
  • `` es un elemento sobre el que MDN advierte con firmeza que “en la mayoría de los casos no es lo que realmente se quiere usar”; marcar errores ortográficos parece ser el principal uso recomendado
  • representa semánticamente cadenas de variables matemáticas o de programación, y lo usó junto con en un ejemplo del teorema de Pitágoras
  • `` resuelve el problema de partir palabras largas, especialmente URL, en puntos específicos
    • Al insertar puntos de corte en una URL larga, el salto de línea se vuelve más legible según el ancho de pantalla
    • Incluso si una URL contiene guiones, los navegadores modernos generan puntos de corte claros
    • Las URL sin saltos de línea se envuelven en un `` desplazable aparte para que no rompan el layout

Imágenes, multimedia e incrustaciones

  • y eran elementos que no le resultaban familiares, aunque en el pasado había creado sitios tipo image map
    • Como muestra de que hoy no se usan mucho, la herramienta para depurar límites de `` era difícil de usar
    • Durante el foco con tab solo se muestra un borde de `` por vez, y el estilo no funcionaba
    • Considera que es parecido a un con forma
  • `` es una etiqueta multimedia representativa de HTML5 y ya la había usado, pero le sorprendió verla menos de lo esperado en la década de 2020
    • El reproductor de Bandcamp tiene una UI personalizada con una combinación de , y , pero usa un oculto
  • En `` revisó por primera vez el atributo srcset
    • Hizo una demo que ofrece tres imágenes diferentes según el ancho de pantalla
    • La caché del navegador y la visualización escalada influyen en el comportamiento, así que para ver el efecto puede hacer falta una ventana privada y una pantalla sin escalado o no Retina
  • y se usan menos ampliamente que ``, y el video online parece estar centralizado sobre todo en YouTube
    • El audio está más distribuido, como en los podcasts que ofrecen archivos individuales
  • `` tenía varias limitaciones
    • Cuando lo hizo como etiqueta self-closing, no se renderizó
    • En el momento de escribir, Safari posiblemente no soportaba el video porque el servidor de desarrollo no admitía el header de request “Range”
    • Le dio curiosidad si Safari podía reproducirlo en la versión alojada en GitHub Pages
    • El problema con `` se debía a que la build de Eleventy no configuraba correctamente los archivos .vtt
  • Le sorprendió que y no estén deprecated, aunque muchos de sus usos fueron reemplazados por etiquetas específicas como y
  • conserva un nombre noventero como “inline frame”, y fue declarado deprecated en HTML5
    • También comprobó que se renderiza con display: inline
  • y son elementos pensados para cambiar versiones de una imagen en situaciones diferentes
    • Creó un ejemplo que muestra un ícono de computadora con mouse/trackpad, un ícono de teléfono en pantallas táctiles y una imagen fallback si no es ninguno de los dos
  • `` le pareció un elemento experimental relacionado con vistas previas de enlaces al estilo iPad y beneficios de rendimiento como en una SPA
    • A 2023 no está activado por defecto en ningún navegador
    • Parece que antes existía una flag experimental de Chrome, pero en 2023 no estaba disponible en chrome://flags
    • Parece no estar en la HTML 5 Spec, y no queda claro por qué está incluido en la documentación de MDN

SVG, MathML y scripting

  • Le pareció interesante que la documentación de MDN agrupe y
    • `` se usa ampliamente porque herramientas como Figma y Sketch permiten prototiparlo y exportarlo con facilidad
    • `` parece ser un elemento más raro
  • Usó `` en un ejemplo donde dibuja un círculo directamente
  • Considera que `` es más bien un wrapper para elementos no HTML del namespace MathML, e incluyó solo una expresión simple
  • En 2020, en Recurse Center, había investigado a fondo el problema de dibujar líneas nítidas con ``
    • Gracias a la documentación de MDN descubrió que existe un tamaño máximo de `` según el navegador
    • En navegadores modernos, cada dimensión ronda los 32.000 píxeles
    • Reimplementó un falso con, y
  • No esperaba que `` fuera a sentirse como un elemento viejo, pero al escribir la publicación notó que en la práctica lo usa poco directamente
    • La mayor parte del JavaScript se agrupa e inserta mediante herramientas de build en una sola etiqueta ``
    • Por eso `` se siente más como boilerplate que como una etiqueta de markup
  • `` le pareció un elemento que no había incluido lo suficiente en sitios web interactivos
    • En especial en SPA minificadas/compiladas, sin `` el usuario puede ver una página en blanco
    • En esta publicación incluyó junto a todas las etiquetas

Marcas de edición, tablas, formularios e interacción

  • e fueron elementos que vio por primera vez al leer la documentación de MDN, y le parecieron elementos propios de un procesador de texto
    • También pensó en el renderizado de Google Docs, pero confirmó que nuevamente se renderiza como ``
  • `` fue usado en exceso para layout en la web temprana, pero le parece irónico que hoy, con más datos en la web, se use más bien poco
    • Como razones menciona el diseño por defecto tosco y el objetivo de mostrar en la UI web, desde otra perspectiva, datos almacenados en tablas de bases de datos
    • La publicación en sí está basada en documentos y no tiene datos tabulares reales, pero incluyó como tabla de ejemplo datos de emojis posiblemente basados en el Apple emoji set de 2023
    • No conocía ni, y no sabe si habrá muchos casos donde los use en lugar de un diseño personalizado que no sea ``
  • `` y sus elementos relacionados suelen usarse cuando el envío lleva a una página nueva, pero también son válidos para interacciones dentro de la página
    • Considera que, desde el punto de vista de accesibilidad, los elementos de formulario podrían ser los más importantes, así que intentará consultar la documentación al implementarlos en el futuro
  • y son ejemplos comunes de “se puede hacer sin JavaScript”
    • Estas UI de expandir/contraer eran funciones que antes había creado por primera vez con JavaScript o jQuery, y le resulta interesante que ahora sean fáciles con unas pocas etiquetas HTML
    • Sospecha que si hoy se propusieran para el HTML spec, quizá se retirarían al reemplazarlas por un efecto similar de CSS
  • `` era un elemento que no sabía que existía solo con HTML
    • Para que sea útil más allá del efecto de estilo, necesita JavaScript
    • Es una forma simple de crear interacciones más personalizadas que alert(), pero que se pueden estilizar con CSS

Web Components y elementos deprecated

  • Los Web Components estaban desde hacía tiempo en su lista de cosas por aprender más, y le alegró leer esa sección de MDN
  • Le sorprendió que el renderizado de Web Components requiera JavaScript y la sintaxis Class
    • Después de leer más sobre Shadow DOM, le pareció razonable porque HTML no tiene una forma incorporada de encapsulación de estilos
    • Conceptualmente le parece algo similar a ``
  • Usó Web Components con y para crear la tabla de contenidos de la publicación
    • No encontró rápidamente una forma de pasar propiedades que se usarían como atributos de elementos hijos de una plantilla, como en componentes de frameworks frontend
    • Pasó el elemento `` completo a cada hijo y configuró el href correcto dentro de `
  • `
  • También incluyó elementos HTML deprecated al final de la publicación
    • , , , y `` son ejemplos de funciones relacionadas con layout que pasaron a CSS
    • y formaban parte de la especificación de Web Components, pero no se implementaron por completo, así que no pudo implementarlos realmente
    • parece un de servidor web para listar directorios, y lo usó en un ejemplo de listado de directorios de un sitio estático de Eleventy
  • y fueron diseñados para usarse en lugar de , por lo que eran difíciles de insertar directamente en el cuerpo normal y solo los usó dentro de
  • Por la explicación de MDN de que `` no fue parte de la specification oficial, esperaba que no funcionara, pero en 2023 parecía funcionar en algunos navegadores
    • Considera que puede ser un fallback por posible confusión con ``
  • Aunque se dice que `` tuvo soporte parcial en Firefox 8~84, no logró hacer funcionar el ejemplo ni siquiera con una versión antigua instalada localmente
  • es parecido a un fallback como, pero fue declarado deprecated, y le sorprendió que `` siga en la spec
  • No le queda claro por qué era un elemento separado en vez de un atributo de
    • Cuando empezó la publicación estaba en la sección “Embedding Content” de MDN, pero al terminarla ya estaba deprecated
  • `` destaca entre los elementos deprecated porque efectivamente funciona
    • Si se usa tal cual, el resto de la página se renderiza como código fuente, así que lo envolvió con ``
  • y tenían etiquetas de cierre, por lo que podían usarse en el cuerpo para mostrar source code o texto monospace estilo teletipo
  • y eran para indicar pronunciación de caracteres de Asia oriental, pero concluye que la spec parece haberse simplificado
  • También agregó `` al revisar otras listas de etiquetas HTML, aunque no estaba en la lista de MDN
  • Una lista antigua de MDN de 2013 incluía elementos como , , y
    • `` hoy es ignorado por la mayoría de los navegadores por razones de accesibilidad
    • `` no funciona en navegadores modernos y es una función que debería resolverse con CSS
    • `` sugiere una visión de documentos web más multimedia
    • `` parece venir de un mundo sin JavaScript
  • También menciona ``, pero no lo intentó
  • Descubrió tarde que no existe una implementación HTML nativa para footnotes

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-08-14
Opiniones de Hacker News

  • Parece que el autor es demasiado joven para recordar los frames :) Iba a enlazar solo el artículo de Wikipedia (https://en.wikipedia.org/wiki/Frame_(World_Wide_Web)), pero la explicación no es muy buena. Cuando la web temprana se popularizó, los frames se usaban mucho para menús, barras laterales, encabezados siempre visibles, etc.; era común poner un encabezado fijo arriba, una barra lateral a la izquierda y el frame del contenido en el centro. Cada frame funcionaba de forma bastante independiente, con su propio historial de atrás/adelante, entre otras cosas, así que los enlaces por defecto a veces solo cambiaban ese frame. Por eso, volver atrás, avanzar y recargar no eran intuitivos, y si se cargaba contenido equivocado en un frame, era difícil recuperarse salvo entrando de nuevo desde el principio. Por suerte, CSS reemplazó la mayoría de los usos principales de los frames; desde el punto de vista del usuario, los frames eran realmente dolorosos de manejar.

    • Uno de los usos de frames que recuerdo eran los sitios índice de otros sitios. Tenían una barra lateral izquierda con varios enlaces, y el sitio correspondiente se abría en el frame de la derecha. En la época en que no había pestañas en los navegadores, era un uso bastante bueno, y revisar una lista de enlaces en un frame dentro de una sola ventana era mejor que ir y venir en el historial o administrar varias ventanas.
    • Eric Meyer, el rey de CSS, todavía mantiene su antiguo documento de referencia de CSS como una página con frames: https://meyerweb.com/eric/css/references/css1ref.html
    • Mi primer sitio web, hecho en GeoCities en los 90, también usaba frameset, y tenía exactamente la disposición descrita arriba.
    • https://tintara.tripod.com/FramesSuck.html
    • y ya no están simplemente desaconsejados: desde hace mucho son elementos obsoletos: https://html.spec.whatwg.org/dev/obsolete.html#obsolete

  • Aunque se menciona brevemente, me parece absurdo que todavía no exista una declaración CSS estándar y sencilla para ocultar algo en pantalla pero mantenerlo para los lectores de pantalla. Lo que he visto hasta ahora siguen siendo trucos con clip, mover el contenido fuera de la página, o cosas parecidas. No entiendo por qué esto no es un valor alternativo de display o una propiedad adicional. La propiedad speak, que podría resolver esto, anduvo dando vueltas en uno de los módulos teóricos de CSS, pero hasta donde sé casi no fue adoptada por implementaciones.

  • Sobre el elemento que confundió al autor: **HTML 5.2** fue retirado por el W3C en 2021 y reemplazado por el WhatWG HTML Living Standard. El estándar de WhatWG, a diferencia de HTML 5.2, no retiró y lo redefinió como “una barra de herramientas en forma de lista no ordenada de elementos li que representan comandos que el usuario puede ejecutar o activar”. La lista de elementos de Wikipedia y la información sobre versiones de HTML parecen estar desactualizadas en este punto, y sigue vivo. Dicho eso, viendo su historial de haber sido desaconsejado varias veces y que incluso navegadores recientes tuvieron confusiones al darle la semántica correcta, casi siempre conviene usar con el rol ARIA apropiado (toolbar, menu, menubar).

  • La razón por la que la mayoría de estos elementos no se usan mucho es que eran intentos antiguos de resolver problemas que ya no existen, o que, como reconoce el autor, podían resolverse mejor con CSS, o que dependían mucho de la implementación del navegador. Por ejemplo, cuando y llegaron a todos los navegadores con actualizaciones constantes, tenía expectativas, pero para que el contenido se abriera deslizándose como guiando al usuario, en lugar de desplegarse de golpe, hacía falta JavaScript. La mejor implementación que vi usaba WAAPI, y Safari incluso agregó sus propios pseudoelementos.

  • Las etiquetas / se pueden anidar. Una vez hice con eso un juego de aventura de decisiones y lo publiqué en la intranet de la empresa. Tenía un script generador que unía fragmentos, y el texto real era de apenas unas páginas, pero el HTML llegó a 5 MB. Ese día rompí muchos navegadores y al final tuve que borrarlo.

    • Suena interesante, pero no termino de entender. Me gustaría oír más sobre cómo el anidamiento de details/summary terminó en 5 MB de HTML y cómo eso rompió tantos navegadores.

  • Me recuerda a cuando aprendí HTML por primera vez, alrededor de 1995. ¿Alguien recuerda Barebones Guide to HTML de Kevin Werbach? Era un sitio que listaba prácticamente todas las etiquetas HTML y su función. Con ese material, un editor de texto y una versión temprana de Netscape Navigator, podías aprender y experimentar de inmediato.

  • Hace unos días intenté crear un agente de IA para navegar la web y me sorprendió ver que los comentarios de Hacker News están implementados como una tabla dentro de una tabla dentro de una tabla.

    • Me alegró saberlo. Hice un userContent.css para que HN fuera más fácil de leer: limité el ancho del cuerpo, puse line-height en 1.5em y agregué margen superior extra a todos los párrafos. Ahora ya no tengo que leer con esfuerzo HN mostrando 250 caracteres por línea en un navegador ancho. Cada párrafo es más legible, y la separación entre párrafos se ve más clara que el simple interlineado.

  • El HTML semántico tiene mucho potencial. Personalmente me gusta el estilo de poner las notas al pie del cuerpo en el margen derecho, con una fuente más pequeña o semitransparente, y agregar elementos desplegables / cuando hace falta. Pero para implementar realmente este tipo de estilo, parece que siempre hay que conocer CSS con bastante detalle para que funcione bien.

  • Primero, esta es una forma de aprendizaje realmente excelente y un buen ejercicio. También es divertido ver al autor intentar deducir para qué sirven esos elementos viejos y hoy en desuso que antes emocionaban cuando de pronto se podían usar. Dicho eso, desde la perspectiva de alguien que ha escrito a mano todas las versiones de HTML desde Mosaic, no me gusta que MDN les cambie el nombre de forma retroactiva, como con description list. Me gusta más el definition list de la especificación original. Para mí es más natural pensar en dl, dt y dd como “lista de definiciones”, “término que se define” y “definición”. description es un término más amplio que definition, pero si uno lo ve como definition list, es más fácil recordar que en dl hay términos (dt) y definiciones (dd). El W3 también lo llama definition list: https://www.w3.org/TR/html4/struct/lists.html#edef-DL

  • ¿Alguna vez han visto un caso real en el que se llegue hasta ``?

    • Sí. Mi primer trabajo técnico fue en una agencia de marketing hiperlocal, y pasaba la mayor parte del tiempo actualizando menús de restaurantes e información de ventas de pequeños comercios locales. Los menús de restaurantes solían volverse absurdamente profundos en su jerarquía, porque muchos restaurantes tenían demasiados platos. Para mostrar correctamente mozzarella sticks y arancini, a veces hace falta una jerarquía como Restaurant -> Menu -> Antipasti -> For Groups -> Fried -> Cheesy.
    • Sí. Aparece en especificaciones u otra documentación técnica. Por ejemplo, la propia especificación de HTML[1]. [1]: https://html.spec.whatwg.org/#link-type-next
    • Es una de esas cosas molestas. No entiendo por qué limitarlo de 1 a 6 y no permitir un atributo que especifique un tamaño arbitrario.
    • Convertí a versión web un libro enorme escrito por un antiguo profesor y jefe mío, y definitivamente usaba 6 niveles de títulos; quizá incluso necesitaba más.