Etiqueta HTML <dt>
La etiqueta <dt> indica un término en una lista de descripción. Descripción, atributos y ejemplos de la etiqueta.
La etiqueta <dt> (abreviatura de description term, anteriormente definition term) indica el término que se define dentro de una lista de descripción. Es una de las tres etiquetas que conforman dicha lista, junto con <dl> y <dd>:
<dl>envuelve toda la lista (la lista de descripción).<dt>nombra un término, como una palabra en un glosario o una etiqueta de metadatos.<dd>proporciona la descripción o el valor del término precedente.
Usa una lista de descripción cuando el contenido sea naturalmente un conjunto de pares nombre/valor: un glosario, preguntas y respuestas de una FAQ, metadatos clave/valor o definiciones de términos. Para contenido ordenado o con viñetas, utiliza otro tipo de lista — consulta la descripción general de listas HTML.
Reglas de estructura
El elemento <dt> tiene dos requisitos que debes cumplir para obtener un marcado válido y accesible:
<dt>debe ser hijo directo de<dl>. No puede aparecer por sí solo fuera de una lista de descripción (o, en HTML moderno, dentro de un único<div>contenedor directamente dentro del<dl>).<dt>debe ir antes que su<dd>. Cada grupo comienza con uno o más términos (<dt>), seguidos de una o más descripciones (<dd>). Un<dd>describe el o los elementos<dt>que lo preceden.
La etiqueta <dt> va en pares: el contenido se escribe entre la etiqueta de apertura <dt> y la de cierre </dt>.
Ejemplo de la etiqueta HTML <dt>:
Etiqueta HTML <dt>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<dl>
<dt>Hypertext</dt>
<dd>A system of text pages that have cross-references.</dd>
<dt>Hyperlink</dt>
<dd>A part of a hypertext document that references another item.</dd>
</dl>
</body>
</html>Resultado
Múltiples términos y múltiples descripciones
Un grupo de descripción no se limita a un término y una descripción. Puedes combinar varios elementos <dt> y <dd> dentro del mismo grupo.
Varios <dt> para un <dd> — úsalo cuando varios términos comparten una sola definición, por ejemplo, sinónimos o grafías alternativas:
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open-source web browser developed by the Mozilla Foundation.</dd>
</dl>Varios <dd> para un <dt> — úsalo cuando un único término tiene más de un significado o valor:
<dl>
<dt>Coffee</dt>
<dd>A hot beverage brewed from roasted coffee beans.</dd>
<dd>The seeds of the coffee plant.</dd>
</dl>Un ejemplo realista: metadatos de producto
Las listas de descripción son ideales para metadatos clave/valor. Aquí cada <dt> es una etiqueta y cada <dd> es su valor:
<dl>
<dt>Product name</dt>
<dd>Mechanical Keyboard K3</dd>
<dt>Manufacturer</dt>
<dd>Keychron</dd>
<dt>Connectivity</dt>
<dd>Bluetooth 5.1</dd>
<dd>USB-C (wired)</dd>
<dt>Price</dt>
<dd>$79.99</dd>
</dl>Observa que el término Connectivity tiene dos valores <dd> — una forma clara de listar varios valores para una misma etiqueta.
Renderizado predeterminado
Los navegadores no aplican ningún estilo especial a <dt> de forma predeterminada: el término se muestra con un peso de fuente normal (sin negrita), mientras que cada <dd> siguiente aparece con sangría debajo de él. La jerarquía visual que normalmente se espera de un glosario — términos en negrita — proviene del CSS, no de los valores predeterminados del navegador.
Atributos
La etiqueta <dt> admite los atributos globales y los atributos de evento.
Cómo aplicar estilo a una etiqueta HTML <dt>
El fragmento a continuación reemplaza el renderizado predeterminado: pone los términos en negrita y les da un color distinto para que destaquen de sus descripciones.
dt {
font-weight: bold;
color: #2c3e50;
}Accesibilidad
Las listas de descripción transmiten significado más allá de su apariencia. Los lectores de pantalla reconocen la estructura <dl>/<dt>/<dd> y anuncian cada <dt> como un término junto con su descripción <dd> asociada, de modo que los usuarios escuchan el término y su valor como un par conectado. Simular el mismo aspecto con párrafos simples y CSS elimina esta relación. Usa una lista de descripción real siempre que el contenido sea genuinamente un conjunto de pares término/descripción.