¿A que no adivinas qué significa DL en HTML? Sí, no es fácil.
En este artículo no solo veremos qué significa esta sigla, sino que también veremos para qué sirve esta etiqueta y cómo funciona exactamente.
Además, esta es una de esas etiquetas en HTML que son muy fáciles de utilizar, de esas que me gustan a mí.
Tan solo has de tener en cuenta algunas cosas que veremos a continuación y ya está, no tiene más complicación.
Y antes de empezar, recuerda que este vídeo forma parte del diccionario HTML del canal donde vemos cada una de las etiquetas de este lenguaje.
Y ahora, vamos con la etiqueta DL.
¿Qué es DL en HTML?
Muy bien, lo primero, ¿qué es esto de la etiqueta DL? La etiqueta DL en HTML se utiliza para crear una lista de definiciones, donde se muestra un término seguido de su definición.
Esta etiqueta DL se utiliza con otros dos elementos.
Por una parte, tenemos la etiqueta DT que es para envolver el término que se va a definir, y la otra parte sería la etiqueta DD que es la definición del término.
- Etiqueta DT: Para envolver el término que se va a definir.
- Etiqueta DD: Para la definición del término.
Dentro de la etiqueta DL podemos poner tantos términos y definiciones como queramos. ¡Ojo! Tampoco te pases.
La sigla DL significa Definition List en inglés, que sería algo así como lista de definiciones.
Aquí te dejo el vídeo, donde lo explico (bastante bien).
Cómo se utiliza la etiqueta DL: Ejemplo
Muy bien, ya estamos aquí delante del editor. Y si os fijáis, aquí tenemos la etiqueta DL y dentro de esta etiqueta DL tenemos los dos elementos que hemos comentado anteriormente.
Por un lado, tenemos la etiqueta DT que sería el término a definir y luego tenemos la etiqueta DD que sería la definición.
Si os fijáis, aquí tenemos dos términos que se definen. Por un lado, tenemos la palabra café con su definición y por otro lado, tenemos la palabra té con su respectiva definición.
<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>No tiene más, como ves, es una etiqueta muy simple de utilizar.
Aquí podríamos poner todas las definiciones que quisiéramos, como hemos comentado. Es decir, podríamos hacer un montón de definiciones.
Fijaros que tiene unos estilos predefinidos muy simples y cuidado aquí porque dependiendo del navegador que estés utilizando se puede ver de una forma o de otra, pero en general se suele ver de esta forma.
Si os fijáis, la etiqueta DL englobaría todos estos elementos y dentro tendríamos cada término que se define con su definición.
Y además, otra cosa que no he dicho es que puedes anidar definiciones. Esto también es muy útil si queremos hacer, digamos, subsecciones dentro de una misma definición. Esto he dicho así queda un poquito raro, pero mira, vamos a verlo en el editor.
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language: El lenguaje de marcado utilizado para crear páginas web.
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets: Utilizado para describir la presentación de un documento escrito en HTML o XML.</dd>
<dt>JavaScript</dt>
<dd>Lenguaje de programación que permite agregar interactividad a las páginas web.</dd>
</dl>
</dd>
</dl>
Si os fijáis, aquí tenemos la etiqueta DL principal o la etiqueta DL padre, el término definido y la definición, y dentro de la definición tenemos otra etiqueta DL anidada y esto lo podríamos repetir hasta el infinito y más allá.
En fin, como has visto, esta etiqueta no solo cumple una función semántica sino que también tiene sus propios estilos. Aunque la verdad, es que estos estilos son bastante cutres, pero bueno, recuerda que como siempre puedes agregar tus propios estilos en CSS como hemos hecho en este ejemplo.
Espero que te haya resultado útil la lección de hoy y recuerda que si tienes cualquier duda o cualquier sugerencia, puedes dejarla en los comentarios.
Nos vemos en el siguiente capítulo. ¡Adiós!