Hoy toca ver una etiqueta un poco inusual y seguramente no hayas oído hablar nunca de ella. La verdad es que es una etiqueta rara de narices.
Estoy hablando de la etiqueta dd en HTML. Y a continuación, te voy a explicar qué es esta etiqueta y para qué sirve.
Recuerda que esta lección forma parte del diccionario de etiquetas HTML de Dropcoding. Y si tienes cualquier duda o sugerencia puedes dejarla en los comentarios y te responderé.
¿Qué es la etiqueta dd en HTML?
La etiqueta dd en HTML se utiliza para describir un término. Es decir, para hacer una definición.
Normalmente, la etiqueta dd se emplea justo después de la etiqueta dt, que se encarga de señalar el nombre del término descrito.
Y ojo, porque normalmente la etiqueta dd junto con la etiqueta dt suelen estar dentro del elemento dl.
Sí, lo sé, puedes hacerte un poco de lío, por eso vamos a ver un ejemplo en el editor.
Como siempre aquí tienes el vídeo donde lo explico al detalle, por si le quieres echar un vistazo 😏.
Y ahora, vamos con el ejemplo en el ditor.
Ejemplo de uso Etiqueta DD
Fíjate que dentro del body empezamos con la etiqueta dl. Esta etiqueta es la que englobaría todas las definiciones, que ya la veremos en otro vídeo.
<body>
<dl>
<dt>Café</dt>
<dd>Bebida hecha a partir de granos de café tostados</dd>
<dt>Leche</dt>
<dd>Líquido nutritivo producido por las glándulas mamarias de las hembras de los mamíferos</dd>
</dl>
</body>Luego tenemos la palabra descrita, que sería en este caso «café», y por último tenemos la etiqueta dd que sirve para definir ese término, que en este caso es café. Entonces, aquí dentro de la etiqueta dd tendríamos toda la definición: en este caso, «bebida hecha a partir de granos de café tostados». Fácil, ¿no?
Pues se puede repetir y hacer un listado de definiciones.
Simplemente tienes que poner la primera etiqueta dt con el término a definir y luego la etiqueta dd para hacer la definición. Vamos a ver cómo queda en el navegador.
Si te fijas, primero aparece el término a describir y fíjate que la definición aparece con una indentación. Lo ideal es que pongas tus propios estilos para este tipo de definiciones. Y de esta manera quedaría un poquito mejor.
Recuerda que esto tiene su importancia a nivel semántico, no solamente a nivel visual.
Ah, por cierto, otra cosa que casi se me olvida: la etiqueta dd hace referencia a la sigla «Definition Description», que en español sería algo así como «término de definición». Bueno, más o menos.
Espero que te haya sido de utilidad esta pequeña lección del diccionario HTML.
Recuerda que si tienes cualquier duda o cualquier sugerencia, puedes dejarla en los comentarios. Nos vemos en la próxima lección. ¡Adiós!