DROPCODING BLOG

¿Qué es la etiqueta DT en HTML y cómo usarla? (con ejemplo)

En el último capítulo, hablamos sobre la etiqueta dl en HTML. Hoy, quiero presentarte una etiqueta que se complementa con esta: la etiqueta dt.

Esta etiqueta se utiliza junto con la etiqueta dd, que ya hemos visto también anteriormente. Sé que puede sonar un poco complicado, pero te aseguro que esta etiqueta dt es muy fácil de usar, como verás a continuación.

Como siempre, antes de pasar a la acción, recuerda que este episodio forma parte del diccionario HTML, donde encontrarás cada una de estas etiquetas.

Y ahora, veamos qué es la etiquta dt.

¿Qué es la etiqueta DT en HTML?

La etiqueta DT se utiliza para definir un término en una lista de definiciones. Es decir, se utiliza para indicar el nombre de la cosa que se está definiendo.

La etiqueta DT siempre debe ir acompañada de la etiqueta DD, que se utiliza para proporcionar la definición del término.

Veamos un ejemplo.

Ejemplo: Cómo funciona la etiqueta DT

Aquí, dentro del body, tenemos la etiqueta dl. Dentro de esta, usamos la dt para enmarcar el término que estamos definiendo.

<body>

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language: El lenguaje de marcado utilizado para crear páginas web.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets: Utilizado para describir la presentación de un documento escrito en HTML o XML.</dd>
</dl>

</body>

La definición de este término se coloca dentro de la dd, justo debajo. Esto se puede repetir tantas veces como queramos dentro de la dl.

Sé lo que estás pensando…

«¿Qué etiqueta más rara me está enseñando este tío?»

Y tienes razón, es una etiqueta muy específica y sirve para un propósito concreto.

Aunque su uso es más semántico que visual, tiene sus propios estilos, aunque no son muy llamativos.

Esta etiqueta se diferencia de otras listas en HTML por su semántica propia. Espero que esta lección te haya resultado útil.

Como siempre, si tienes alguna duda o sugerencia, puedes dejarla en los comentarios. ¡Nos vemos en el próximo vídeo, adiós!

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *