Para agrupar varios términos y descripciones, coloca uno o más elementos dt antes de uno o más elementos dd dentro de un dl. Esta guía muestra cómo elegir la agrupación adecuada, crear un pequeño glosario en TextEdit en un Mac y comprobar que las relaciones sigan siendo claras.

¿Cómo agrupa términos una lista de descripción en HTML?

Una lista de descripción representa asociaciones entre nombres y valores. Cada grupo contiene al menos un término y al menos una descripción, y todos los términos aparecen antes que las descripciones. El siguiente término que aparece después de una descripción inicia otro grupo. Estas relaciones se establecen según el orden del documento. Estándar HTML: el elemento dl

En un glosario, un término podría ser una palabra relacionada con el diseño y su descripción podría explicar esa palabra. Varios términos consecutivos pueden compartir una descripción. No hace falta repetir la misma explicación después de cada nombre alternativo. MDN: Elemento término de descripción

La pregunta práctica es qué elementos van juntos. Antes de escribir el marcado, anota en lenguaje corriente cada asociación que quieras establecer. En este ejemplo sintético, «Gap» y «Gutter» comparten una explicación, mientras que «Tile» tiene dos significados alternativos.

Relación prevista Estructura dentro de un grupo
Un término con una descripción Un dt y luego un dd
Varios términos que comparten una descripción Todos los elementos dt y luego un dd
Un término con descripciones alternativas Un dt y luego varios elementos dd
Varios términos que comparten descripciones alternativas Todos los elementos dt y luego todos los elementos dd
Una descripción que contiene varios párrafos Un dd que contiene los párrafos

Estos patrones siguen las reglas de agrupación del estándar. En particular, las descripciones separadas representan valores alternativos; los párrafos que pertenecen a un mismo valor se mantienen dentro del mismo dd. Estándar HTML: semántica de las listas de descripción

¿Qué descripciones deberían compartir un grupo?

Usa esta prueba para decidirlo: ¿podrían aplicarse razonablemente todas las descripciones del grupo propuesto a todos los términos de ese grupo? Si la respuesta es no, divide el contenido en grupos separados. Esta comprobación editorial se deriva del modelo de asociaciones y ayuda a detectar emparejamientos accidentales antes de que lleguen a la página.

Varios términos con una descripción compartida

Este fragmento asigna una explicación compartida a dos términos sintéticos de un glosario. Ambos términos aparecen antes de la descripción, de acuerdo con el patrón documentado por MDN para varios términos. MDN: Varios términos y una sola descripción

<dl>
  <dt>Gap</dt>
  <dt>Gutter</dt>
  <dd>The space between adjacent columns.</dd>
</dl>

No interpretes esto como dos entradas separadas cuyas descripciones se han omitido por casualidad. El ejemplo trata deliberadamente los dos nombres como un solo grupo. Si en tu propio glosario tienen significados distintos, asigna a cada nombre su propia descripción.

Un término con descripciones alternativas

Dentro del mismo grupo, una descripción puede ir seguida de otra. Aquí, el glosario inventado usa «Tile» para dos conceptos distintos. MDN: Elemento de detalles de descripción

<dl>
  <dt>Tile</dt>
  <dd>A repeating unit in a visual pattern.</dd>
  <dd>A rectangular content block in a page layout.</dd>
</dl>

Si varios nombres comparten esas mismas alternativas, coloca los términos adicionales antes de la primera descripción. No des por hecho que el primer término se empareja solo con la primera descripción y el segundo término solo con la segunda; para eso se necesitarían grupos separados. MDN documenta explícitamente la combinación de varios términos y descripciones. MDN: Varios términos y descripciones

Una descripción con varios párrafos

Si el segundo párrafo amplía la primera explicación, mantén ambos dentro de un mismo dd. Un dd admite contenido de flujo, incluidos los párrafos. Así se conserva una sola descripción y se permite una estructura interna fácil de leer. MDN: Resumen técnico del elemento de detalles de descripción

<dl>
  <dt>Canvas</dt>
  <dd>
    <p>The working area for a composition.</p>
    <p>In this glossary, the term refers to the whole area.</p>
  </dd>
</dl>

Crea un ejemplo completo en TextEdit en tu Mac

Empieza con un archivo nuevo para poder examinar el resultado sin modificar un documento existente. En TextEdit, selecciona Archivo > Nuevo y luego Formato > Convertir en texto sin formato. Apple indica que este es el punto de partida para crear un archivo HTML. Apple: Trabajar con documentos HTML en TextEdit en Mac

Pega el documento completo que aparece a continuación. Combina las tres decisiones anteriores en un pequeño glosario. Cada grupo tiene su propio contenedor div, una estructura compatible que permite aplicar estilos o atributos a todo el grupo. MDN: Agrupar conjuntos de nombres y valores

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layout glossary</title>
</head>
<body>
  <h1>Layout glossary</h1>
  <dl>
    <div>
      <dt>Gap</dt>
      <dt>Gutter</dt>
      <dd>The space between adjacent columns.</dd>
    </div>
    <div>
      <dt>Tile</dt>
      <dd>A repeating unit in a visual pattern.</dd>
      <dd>A rectangular content block in a page layout.</dd>
    </div>
    <div>
      <dt>Canvas</dt>
      <dd>
        <p>The working area for a composition.</p>
        <p>In this glossary, the term refers to the whole area.</p>
      </dd>
    </div>
  </dl>
</body>
</html>

Selecciona Archivo > Guardar, asigna al archivo el nombre layout-glossary.html y haz clic en Guardar. Si TextEdit te pregunta qué extensión usar, selecciona Usar .html. Estos son los pasos documentados por Apple para guardar un archivo HTML escrito manualmente. Apple: Crear un archivo HTML

Abre el archivo guardado en tu navegador. Compara el texto que muestra con las tres asociaciones previstas: «Gap» y «Gutter» comparten una explicación; «Tile» tiene dos descripciones; «Canvas» tiene una descripción con dos párrafos. Usa esta comparación para comprobar las relaciones que querías establecer entre los contenidos, aunque el espaciado predeterminado del navegador sea distinto del diseño que prefieres.

Conserva la agrupación al editar

HTML admite grupos de términos y descripciones directamente dentro de dl o grupos envueltos en elementos div. Elige una estructura y úsala en toda la lista. En la versión con contenedores que aparece arriba, mantén los términos y las descripciones de cada grupo directamente dentro de su contenedor; no los envuelvas en contenedores separados. Estándar HTML: modelo de contenido de las listas de descripción

Al revisar el ejemplo, sigue esta breve lista de comprobación:

  1. Busca el grupo que quieres modificar.
  2. Mantén todos sus términos antes de sus descripciones.
  3. Decide si el nuevo texto explicativo es otro valor o un párrafo más del valor actual.
  4. Añade un grupo completo cuando introduzcas un término que no esté relacionado.
  5. Guarda el documento y vuelve a cargar la vista previa en el navegador.

Por ejemplo, añadir «Panel» entre las dos descripciones de «Tile» interrumpiría la relación prevista: la descripción siguiente pertenecería al grupo recién iniciado. En su lugar, coloca el término nuevo y su descripción en su propio contenedor. Esto sigue la regla del estándar según la cual un término que aparece después de una descripción inicia otro grupo. Estándar HTML: algoritmo de agrupación

Si TextEdit vuelve a abrir el archivo como texto con formato, selecciona Archivo > Abrir, elige el documento, haz clic en Mostrar opciones y selecciona Ignorar comandos de texto enriquecido antes de abrirlo. Para los archivos futuros, selecciona Mostrar los archivos HTML como código HTML en lugar de texto con formato en TextEdit > Ajustes > Abrir y guardar. Apple: Ver un documento HTML como código

Al revisar el resultado final, céntrate en el significado: identifica los términos, identifica las descripciones que comparten y confirma que los saltos de párrafo no se conviertan accidentalmente en valores separados. Una vez que las asociaciones sean correctas, el glosario estará listo para el estilo visual que necesite tu documento.

Fuentes