Referencia de etiquetas

Etiqueta dfn en HTML: marcar el término definido

La etiqueta <dfn> en HTML identifica el término que se define en el contexto que la contiene. Úsala al introducir un concepto y explicar su significado, por ejemplo una palabra técnica en un tutorial o una entrada de glosario. Tú escribes la definición; <dfn> señala cuál es el término definido.

<p>Un <dfn id="atributo">atributo</dfn> aporta información adicional a un elemento HTML.</p>

«Atributo» es el término; el resto del párrafo explica su significado. El navegador normalmente muestra esa palabra en cursiva. Fíjate en que <dfn> rodea solo la palabra que se está definiendo.

Sintaxis y contexto válido

Escribe <dfn>Término</dfn>: tanto la apertura como el cierre son necesarios. Se utiliza donde se admite contenido de frase, como dentro de un párrafo <p> o un <dt>. También contiene contenido de frase: texto, una abreviatura o marcado en línea, pero no bloques como <p> ni otro <dfn>, aunque esté dentro de un elemento intermedio.

El párrafo, grupo de lista descriptiva o sección más cercano que contiene el término debe incluir su definición. Dentro de un párrafo, explica el concepto en ese párrafo. En un glosario con <dl>, puedes marcar el término en <dt> y escribir su definición en el <dd> del mismo grupo. Estas condiciones las establece el HTML Living Standard para <dfn>.

Rodea únicamente el término que introduces. En el ejemplo mínimo, envolver toda la oración en <dfn> convertiría toda la oración en el término definido. Mantener una explicación inmediata facilita entender el concepto sin buscarlo en otra parte de la página.

¿Cómo se determina el término definido?

Normalmente, el término es el texto que contiene <dfn>. Hay dos casos con title:

Si el propio <dfn> tiene title, su valor exacto es el término definido. Escribe solo el término completo, no su definición.
Si no tiene title y su único contenido es un elemento <abbr> con title, sin nodos de texto adicionales, el término es el valor de ese title. Los espacios y saltos de línea fuera de <abbr> también crean nodos de texto: conserva la forma compacta mostrada en el glosario.

En los demás casos se utiliza el contenido de texto de <dfn>. Un title de un elemento antecesor no determina el término. MDN explica estas reglas y los enlaces a definiciones.

Dfn frente a abbr y dt

Cada elemento resuelve una necesidad diferente:

<dfn> marca una aparición en la que se define un término.
<abbr> identifica una abreviatura o sigla, tanto al definirla como al mencionarla después.
<dt> identifica un término o nombre dentro de <dl>; el <dd> asociado aporta su descripción o valor. No todas esas asociaciones son definiciones: «Nivel: principiante» también puede formar un grupo.

Por eso <dfn> y <dt> no son equivalentes, pero pueden combinarse. Un <dfn> dentro de <dt> indica un término de lista que se está definiendo. Fuera de una lista descriptiva puedes usar <dfn> en un párrafo sin crear un <dt>.

Ejemplo práctico: un glosario con enlaces

Guarda este documento como glosario.html en UTF-8 y ábrelo en el navegador. No necesita servidor, archivos externos, CSS ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Glosario de HTML</title>
  </head>
  <body>
    <h1>Glosario de HTML</h1>
    <p>
      En este curso aprenderás a crear un
      <a href="#glosario-elemento">elemento HTML</a>
      y a reconocer su representación en el
      <a href="#glosario-dom">DOM</a>.
    </p>
    <dl>
      <dt><dfn id="glosario-elemento">elemento HTML</dfn></dt>
      <dd>
        Parte de un documento HTML que representa contenido
        o cumple una función, como un párrafo o una imagen.
      </dd>
      <dt><dfn id="glosario-dom"><abbr title="Document Object Model">DOM</abbr></dfn></dt>
      <dd>
        Document Object Model, o modelo de objetos del documento:
        representación del documento como un árbol de objetos
        que los programas pueden consultar y modificar.
      </dd>
    </dl>
  </body>
</html>

Lee las dos entradas: <dfn> marca cada término y el <dd> siguiente lo define. La expansión «Document Object Model» permanece visible, aunque no aparezca el tooltip de title.
Pulsa Tab hasta el enlace «elemento HTML» y actívalo con Enter. La dirección termina en #glosario-elemento. Repite con «DOM»: el destino es #glosario-dom. En una página tan corta quizá no haya desplazamiento perceptible, pero el fragmento identifica el destino.
Reduce la ventana o abre el archivo en el móvil. Comprueba que puedes leer las definiciones y la expansión de DOM sin recurrir al tooltip.

El enlace lo crea <a>; el destino lo proporciona id. Consulta la guía de <a> para profundizar en enlaces y fragmentos. Para probar el ejemplo mínimo, sustituye el contenido de <body> por su párrafo.

Si sustituyes <dfn> por un <span> con el mismo id, conservas el texto, la estructura de la lista y el destino del enlace, pero pierdes la indicación de que allí se define el término. Si eliminas las etiquetas de <dfn> sin trasladar su id a otro elemento, el enlace correspondiente pierde el destino. Quitar title de <abbr> conserva la expansión visible del <dd>, aunque el término que determina <dfn> pasa a ser «DOM».

Atributos y accesibilidad

<dfn> no tiene atributos específicos; admite los globales. id permite crear el destino de un enlace, class permite seleccionarlo para estilos y lang declara un idioma distinto del entorno. title es global, con el significado especial explicado arriba: puede aportar el término completo, pero no sustituye una definición visible.

No dependas del tooltip: acceder a title varía con el dispositivo y la tecnología de asistencia. En el glosario, la expansión y la explicación están escritas en <dd>, y los enlaces permiten llegar a ellas por teclado.

Errores frecuentes y preguntas

Marcar cada mención posterior con <dfn>: reserva la etiqueta para la instancia de definición. Después usa texto normal o un enlace al término definido.
Esconder la explicación en title: escribe la definición en el contexto visible; title del <dfn> solo debe contener el término.
Anidar <dfn> dentro de <dfn>: no está permitido. Define cada término por separado.
Usar <dfn> únicamente para obtener cursiva: elige el marcado adecuado al texto y aplica CSS si solo necesitas cambiar su apariencia.

¿Hace falta dfn en todas las listas dl? No. <dt> y <dd> ya expresan la asociación entre término y descripción; añade <dfn> cuando el grupo establece una definición.

Compatibilidad y fuentes

Compatibilidad consultada el 3 de octubre de 2026: MDN clasifica <dfn> como ampliamente disponible.

El HTML Living Standard es la referencia para significado, contenido y restricciones. MDN complementa las reglas de uso y la compatibilidad; el soporte del elemento no garantiza un tooltip accesible ni un anuncio uniforme en tecnologías de asistencia.