Hoy hablaremos sobre un elemento HTML que quizás no conozcas: la etiqueta DFN. Ésta es una de esas etiquetas que pueden pasar desapercibidas pero que tienen un valor semántico para nuestras páginas web.
Además, es posible que cuando descubras para que sirve la etiqueta DFN tengas un pequeño «déjà vu». Ya que su función es parecida a la de otras etiquetas de este lenguaje, como por ejemplo la etiqueta abbr o la etiqueta dd.
Por último, comentarte que este capítulo forma parte de la serie del diccionario HTML de dropcoding, donde podrás encontrar todas y cada una de las etiquetas de este lenguaje.
También recordarte que tienes la sección de comentarios por si tienes cualquier duda.
¿Qué es la etiqueta DFN en HTML?
Por si no te habías dado cuenta, la sigla DNF es la abreviatura de «Definition Element».
En pocas palabras la etiqueta DFN es un herramienta que utilizamos en HTML para proporcionar la definición de un término.
La primera vez que mencionamos un término específico en una página, podemos envolverlo en una etiqueta DFN para indicar que estamos definiendo ese término en el contexto dado.
Cómo funciona dfn en HTML (ejemplo)
Vamos como siempre, con un ejemplo práctico.
Imagínate que estás escribiendo un párrafo sobre frutas y quieres definir la palabra «fruta». Aquí es donde brilla la etiqueta DFN.
<body>
<div class="container">
<p>
Una <dfn>fruta</dfn> es una parte madura de una planta con flores que contiene semillas.
</p>
</div>
</body>Puedes insertarla directamente en el párrafo, y visualmente, la palabra «fruta» aparecerá en cursiva, destacándola como un término definido.
Y esto no es todo. La etiqueta DFN puede ser aún más completa, cuando se combina con otras etiquetas como DL, DT o DD para crear una lista de definiciones.
Esto no solo mejora la estructura de tu contenido sino que también enriquece la semántica de vuestra página web (Aunque a decir verdad, esto es un poco redundante).
Y así es como la etiqueta DFN puede jugar un papel crucial en la claridad y la semántica de tu HTML. Es una etiqueta simple, pero pude ser útil en algunos casos.
Espero que este pequeño tutorial te haya sido útil y te anime a utilizar la etiqueta DFN en tus futuros proyectos.
Si tenéis alguna pregunta o queréis compartir cómo habéis utilizado la etiqueta DFN en vuestro propio trabajo, dejad un comentario abajo. ¡Hasta la próxima!