En HTML5, el elemento <dfn> se utiliza para marcar la definición de un término. La abreviación "dfn" viene de "definition" en inglés. Su propósito es indicar que el contenido del elemento es el término que está siendo definido en el contexto del documento. Aunque en muchas implementaciones no verás efectos visuales inmediatos, es importante para la accesibilidad y la semántica del documento.
<dfn>El elemento <dfn> tiene los atributos globales comunes a todos los elementos HTML, que incluyen:
<dfn> en HTML5El uso principal del elemento <dfn> es marcar la primera aparición de un término o una palabra técnica en un documento, para que quede claro cuál es su definición. Veamos algunos ejemplos sencillos de uso:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso del elemento dfn</title>
</head>
<body>
<p>En matemáticas, un <dfn>trapezoide</dfn> es un cuadrilátero que tiene al menos un par de lados paralelos.</p>
</body>
</html>En este ejemplo, la palabra "trapezoide" está marcada como un término definido dentro del texto. Esto ayuda a los lectores y a las herramientas de accesibilidad a entender que "trapezoide" es un término con una definición específica en este contexto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo con atributos globales</title>
<style>
.termino-definido {
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<p>En física, <dfn id="entropia" class="termino-definido" title="Medida del desorden de un sistema">entropía</dfn> es una medida del desorden o la aleatoriedad de un sistema.</p>
</body>
</html>En este ejemplo, el término "entropía" está marcado con el elemento <dfn> y se le han añadido algunos atributos globales: id, class y title. La clase "termino-definido" aplica estilos CSS específicos para hacer que el término se muestre en negrita y en color azul, y el atributo title proporciona información adicional que aparece como un tooltip cuando el usuario pasa el cursor sobre el término.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contexto de definición más complejo</title>
</head>
<body>
<p>El término <dfn>hipervínculo</dfn> se refiere a un enlace que permite a los usuarios navegar de un documento a otro con un simple clic. Los <dfn>hipervínculos</dfn> son esenciales para la navegación en la web, ya que conectan diferentes recursos y facilitan el acceso a la información.</p>
</body>
</html>En este caso, se define la primera aparición del término "hipervínculo", y aunque se use nuevamente en la misma sección, el contexto ya está claro para el lector.
En resumen, el uso adecuado del elemento <dfn> mejora la semántica del documento HTML, proporcionando a los usuarios y a las herramientas de accesibilidad información clara sobre las definiciones de términos específicos.