La Etiqueta DL

La etiqueta <dl> (description list) se utiliza para crear listas de definiciones, donde cada elemento consta de un término (<dt>) y su descripción correspondiente (<dd>). Es ideal para glosarios, FAQs, metadatos o cualquier lista que requiera pares término-descripción.

Sintaxis básica

<dl>
  <dt>Término 1</dt>
  <dd>Descripción del término 1</dd>
  
  <dt>Término 2</dt>
  <dd>Descripción del término 2</dd>
</dl>

Casos de uso comunes

Glosario técnico

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para crear páginas web.</dd>
  
  <dt>CSS</dt>
  <dd>Lenguaje para estilizar documentos HTML.</dd>
</dl>

Preguntas frecuentes (FAQ)

<dl>
  <dt>¿Cómo restablezco mi contraseña?</dt>
  <dd>Visita la página de recuperación e ingresa tu correo electrónico.</dd>
  
  <dt>¿Cuál es el plazo de entrega?</dt>
  <dd>Entre 3 a 5 días hábiles.</dd>
</dl>

Metadatos de productos

<dl>
  <dt>Marca</dt>
  <dd>TechCorp</dd>
  
  <dt>Peso</dt>
  <dd>1.5 kg</dd>
</dl>

Atributos clave

Elemento	Descripción
<dl>	Contenedor principal de la lista de definiciones
<dt>	Término a definir (description term)
<dd>	Descripción del término (description details)

Accesibilidad

Lectores de pantalla: Reconocen la estructura término-descripción.

Buenas prácticas:

• Usar un <dt> seguido de al menos un <dd>.

• Evitar estructuras complejas dentro de <dt> o <dd> (como listas anidadas).

• Agrupar términos relacionados:

<dl>
  <dt>JavaScript</dt>
  <dd>Lenguaje de programación para interactividad web.</dd>
  <dd>Creado por Brendan Eich en 1995.</dd> <!-- Múltiples descripciones -->
</dl>

Estilización con CSS

Personaliza la apariencia para mejorar la legibilidad:

dl {
  margin: 1rem 0;
  border-left: 3px solid #3498db;
  padding-left: 1rem;
}

dt {
  font-weight: bold;
  color: #2c3e50;
  margin-top: 1rem;
}

dd {
  margin-left: 1.5rem;
  color: #666;
}

Errores comunes

Usar para listas no semánticas

<!-- Incorrecto -->
<dl>
  <dt>Inicio</dt>
  <dt>Contacto</dt> <!-- ¡No es una lista de navegación! -->
</dl>

<!-- Correcto -->
<ul>
  <li><a href="/">Inicio</a></li>
  <li><a href="/contacto">Contacto</a></li>
</ul>

Estructura incorrecta

<!-- Incorrecto -->
<dl>
  <dd>Descripción sin término</dd> <!-- ¡Falta <dt>! -->
</dl>

Anidación inválida

<dl>
  <dt>Término</dt>
  <div> <!-- ¡No se permite <div> dentro de <dl>! -->
    <dd>Descripción</dd>
  </div>
</dl>

Ejemplos avanzados

Lista de definiciones anidadas

<dl>
  <dt>Frontend</dt>
  <dd>
    Parte visible de una aplicación web.
    <dl>
      <dt>Tecnologías comunes</dt>
      <dd>HTML, CSS, JavaScript</dd>
    </dl>
  </dd>
</dl>

Lista con múltiples términos y descripciones

<dl>
  <dt>Python</dt>
  <dt>Ruby</dt>
  <dd>Lenguajes de programación orientados a objetos.</dd>
</dl>

Comparación con otras listas

Tipo	Uso	Ejemplo
<dl>	Términos y descripciones	Glosarios, FAQs
<ul>	Listas no ordenadas	Menús, items sin orden
<ol>	Listas ordenadas	Pasos, rankings

Conclusión:

La etiqueta <dl> es esencial para:

• Organizar información en pares término-descripción.
• Mejorar la semántica y accesibilidad del contenido.
• Crear estructuras claras para datos técnicos o explicativos.

¡Úsala para listas que requieran una relación clara entre conceptos y sus definiciones!