La Etiqueta DT

La etiqueta <dt> (description term) se utiliza dentro de una lista de definiciones (<dl>) para marcar el término que será descrito. Es esencial para crear estructuras semánticas en glosarios, FAQs, metadatos y otros contenidos que requieran pares término-descripción.

Sintaxis básica

<dl>
  <dt>Término a definir</dt>
  <dd>Descripción del término</dd>
</dl>

Casos de uso comunes

Glosario técnico

<dl>
  <dt>API</dt>
  <dd>Interfaz de Programación de Aplicaciones.</dd>
  
  <dt>JSON</dt>
  <dd>Formato de intercambio de datos basado en texto.</dd>
</dl>

Preguntas frecuentes (FAQ)

<dl>
  <dt>¿Cómo crear una cuenta?</dt>
  <dd>Haz clic en "Registrarte" y completa el formulario.</dd>
  
  <dt>¿Dónde ver mis pedidos?</dt>
  <dd>Accede a la sección "Historial de compras".</dd>
</dl>

Especificaciones de producto

<dl>
  <dt>Color</dt>
  <dd>Negro mate</dd>
  
  <dt>Batería</dt>
  <dd>Duración de 24 horas</dd>
</dl>

Atributos clave

Atributo	Descripción
id	Identificador único para enlazar o manipular con CSS/JavaScript
class	Clase CSS para aplicar estilos específicos
title	Texto informativo adicional (se muestra como tooltip)

Accesibilidad

• Lectores de pantalla: Reconocen <dt> como un término de definición.

Buenas prácticas:

• Un <dt> debe tener al menos un <dd> asociado.

• No usar <dt> fuera de <dl>:

<!-- Incorrecto -->
<dt>Término suelto</dt>

<!-- Correcto -->
<dl>
  <dt>Término correcto</dt>
  <dd>Descripción adecuada</dd>
</dl>

Estilización con CSS

Personaliza la apariencia del término y su descripción:

dt {
  font-weight: bold;
  color: #2c3e50;
  margin-top: 1rem;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
}

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

Errores comunes

Usar <dt> sin <dd>

<!-- Incorrecto -->
<dl>
  <dt>Término sin descripción</dt>
</dl>

Anidar elementos no permitidos

<!-- Incorrecto -->
<dt>
  <div> <!-- No se permiten elementos de bloque dentro de <dt> -->
    Término complejo
  </div>
</dt>

Confundir con <li>

<!-- Incorrecto -->
<ul>
  <dt>Término en lista no ordenada</dt> <!-- Usar <li> -->
</ul>

Ejemplos avanzados

Múltiples términos para una descripción

<!-- Incorrecto -->
<ul>
  <dt>Término en lista no ordenada</dt> <!-- Usar <li> -->
</ul>

Lista de definiciones con metadatos

<dl class="metadatos">
  <dt>Autor:</dt>
  <dd>Gabriel García Márquez</dd>
  
  <dt>Publicación:</dt>
  <dd>1967</dd>
</dl>

Buenas prácticas

Orden lógico: Colocar <dt> antes de <dd>.

Jerarquía semántica:

• Usar un <dt> por concepto único.

• Agrupar términos relacionados con múltiples <dt> antes de un <dd>.

Evitar contenido extenso en <dt>:

<!-- Incorrecto -->
<dt>Definición de inteligencia artificial según la RAE...</dt>

<!-- Correcto -->
<dt>Inteligencia artificial</dt>
<dd>Definición según la RAE...</dd>

Comparación con elementos similares

Elemento	Uso	Ejemplo
<dt>	Término en lista de definiciones	<dt>SEO</dt>
<th>	Encabezado de tabla	<th>Precio</th>
<li>	Ítem en listas no semánticas	<li>Item 1</li>

Conclusión:

La etiqueta <dt> es clave para:

• Definir términos en listas estructuradas.
• Mejorar la semántica y accesibilidad del contenido.
• Organizar información técnica o explicativa de manera clara.

¡Úsala siempre que necesites relacionar un concepto con su descripción!