Etiqueta HTML <dfn>
La etiqueta HTML <dfn> marca la instancia definitoria de un término. Aprende cómo se diferencia de <i>/<em>, con ejemplos de title, <abbr> e id.
La etiqueta HTML <dfn> marca la instancia definitoria de un término — el lugar en tu texto donde ese término se introduce y explica. Los navegadores renderizan su contenido en cursiva por defecto, pero la etiqueta tiene que ver con el significado, no con la apariencia: le indica al navegador, los motores de búsqueda y las tecnologías de asistencia "aquí es donde se define esta palabra."
¿Por qué usar <dfn> en lugar de <i> o <em>?
Es tentador recurrir a <i> o <em> para poner un término en cursiva, pero esas etiquetas no aportan información sobre qué significa el texto:
<i>es puramente estilística — texto en cursiva sin semántica especial.<em>marca énfasis de entonación (un cambio en la entonación al hablar), no una definición.<dfn>es semántica y legible por máquinas: identifica explícitamente el término que se está definiendo. Los lectores de pantalla pueden anunciarlo como una definición, y las herramientas pueden construir glosarios a partir de él.
Por lo tanto, cuando la cursiva existe porque un término se está definiendo por primera vez, usa <dfn>. Cuando solo quieres cursiva o énfasis, usa <i> o <em>.
Sintaxis
La etiqueta <dfn> viene en pares — el contenido se escribe entre las etiquetas de apertura <dfn> y de cierre </dfn>.
La etiqueta <p> circundante, el par <dt>/<dd>, o la etiqueta <section> actúa como el contexto de definición del término: el término definido por <dfn> debe explicarse dentro de ese mismo bloque.
Ejemplo básico de la etiqueta HTML <dfn>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><dfn>HTML</dfn> (HyperText Markup Language) — the standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the HTML language.</p>
</body>
</html>
Cómo se identifica el término definido
El navegador decide qué palabra está definiendo un <dfn> siguiendo estas reglas, en orden:
- Si
<dfn>tiene un atributotitle, el valor detitlees el término que se está definiendo. El texto visible puede ser entonces una abreviatura (usando con frecuencia<abbr>). - Si
<dfn>tiene exactamente un hijo — un elemento<abbr>con un atributotitle— y<dfn>no tiene otro contenido de texto, entonces eltitledel<abbr>es el término que se está definiendo. - De lo contrario, el contenido de texto visible de
<dfn>es el término que se está definiendo.
Ejemplo con un atributo title
Aquí el valor de title se trata como el término completo que se está definiendo, mientras que el texto visible permanece breve:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Mouse over to see the definition.</p>
<dfn title="HyperText Markup Language">HTML</dfn>
</body>
</html>El tooltip de title solo aparece al pasar el ratón por encima, por lo que es invisible para los usuarios de teclado y pantalla táctil. Nunca pongas información esencial únicamente en title — acompaña el término con texto explicativo visible, o usa <abbr> para que la expansión esté disponible semánticamente.
Ejemplo con la etiqueta <abbr>
Combinar <dfn> con <abbr> es un patrón común y accesible: <dfn> marca la instancia definitoria, y <abbr> proporciona la expansión completa mediante su title.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Mouse over to see the definition.</p>
<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>
</body>
</html>Enlazar de vuelta a una definición con un id
Si añades un id a un <dfn>, puedes enlazarlo desde cualquier lugar de la página con un elemento <a> usando un fragmento (#). Esto permite a los lectores saltar directamente al lugar donde se define un término:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
<dfn id="ajax-def">AJAX</dfn> is a technique for updating parts of a
web page without reloading the whole page.
</p>
<p>Later on, we mention <a href="#ajax-def">AJAX</a> again — click the
link to jump back to its definition.</p>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| title | text | Proporciona la definición completa o la forma expandida del término. Cuando está presente, reemplaza el término predeterminado y se muestra como tooltip al pasar el ratón. |
La etiqueta <dfn> también admite los Atributos Globales y los Atributos de Evento.
Cómo aplicar estilos a una etiqueta HTML <dfn>
dfn {
color: #0056b3;
font-weight: bold;
}