Ejemplo básico

<dl class="row">
  <dt class="col-sm-3">HTML</dt>
  <dd class="col-sm-9">Lenguaje de marcado para estructurar contenido web.</dd>
  <dt class="col-sm-3">CSS</dt>
  <dd class="col-sm-9">Hoja de estilos que controla la presentación visual.</dd>
  <dt class="col-sm-3">JavaScript</dt>
  <dd class="col-sm-9">Lenguaje de programación que permite interactividad en el navegador.</dd>
</dl>

Usamos las utilidades de Bootstrap Grid (.row, .col‑sm‑3, .col‑sm‑9) para alinear los términos y sus descripciones en columnas responsivas.

Listas de definición anidadas

Se pueden anidar <dl> dentro de un <dd> para representar estructuras jerárquicas, como especificaciones técnicas de un producto.

<dl>
  <dt>Laptop XYZ</dt>
  <dd>
    <dl>
      <dt>Procesador</dt>
      <dd>Intel Core i7‑11800H</dd>
      <dt>Memoria RAM</dt>
      <dd>16 GB DDR4</dd>
    </dl>
  </dd>
</dl>

Accesibilidad (a11y)

• Los lectores de pantalla anuncian automáticamente <dt> como "término" y <dd> como "definición".
• Utiliza aria-describedby cuando la relación no sea evidente, por ejemplo en listas complejas.
• Evita mezclar <dt> con contenido que no sea texto breve; si necesitas párrafos extensos, colócalos dentro de <dd> y agrega <p> normales.

SEO y estructuración de datos

Los motores de búsqueda interpretan <dl> como contenido semántico, lo que ayuda a:

• Resaltar fragmentos de respuesta (featured snippets) cuando el término es una pregunta frecuente.
• Mejorar la densidad de palabras clave sin sobre‑optimizar, pues el <dt> actúa como encabezado implícito.

Para potenciar aún más el SEO, combina <dl> con marcado JSON‑LD de tipo FAQPage cuando la lista responde a preguntas de usuarios.

Buenas prácticas y optimización

1. Usa clases de utilidad de Bootstrap (.mb-3, .border) para espaciar y separar visualmente cada par.
2. Limita la profundidad de anidación a 2 niveles para evitar problemas de legibilidad y renderizado.
3. Escapa caracteres HTML en los valores de definición para prevenir vulnerabilidades XSS.
4. Valida tu HTML con W3C Validator para garantizar que <dt> y <dd> están correctamente anidados dentro de <dl>.

Estilado avanzado con CSS

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1rem;
}
dt {
  font-weight: 600;
  color: #2c3e50;
}
dd {
  margin-left: 0; /* reset default */
  color: #34495e;
}

Este enfoque CSS Grid elimina la necesidad de clases de Bootstrap y ofrece un control fino del alineamiento.

Compatibilidad y rendimiento

Los elementos <dl>, <dt> y <dd> están soportados en todos los navegadores modernos (Chrome, Edge, Firefox, Safari) y en versiones de IE 11+. No generan sobrecarga de renderizado; su uso es tan ligero como cualquier otra etiqueta semántica.

Solución de problemas (troubleshooting)

• Definiciones no aparecen alineadas: verifica que no haya estilos heredados como float o display:inline en dt/dd. Restablece con display:block o usa la rejilla CSS mostrada.
• Lectores de pantalla leen todo como una lista sin distinción: asegúrate de que cada dt esté seguido inmediatamente por su dd. No interrumpas la secuencia con elementos externos.
• Problemas de SEO no detectados: revisa que el dt contenga la palabra clave objetivo y que la dd proporcione contenido relevante y único.