Balise HTML <dfn>
La balise HTML <dfn> marque l'instance définissante d'un terme. Apprenez ses différences avec <i>/<em>, title, <abbr> et id.
La balise HTML <dfn> marque l'instance définissante d'un terme — l'endroit dans votre texte où ce terme est introduit et expliqué. Les navigateurs affichent son contenu en italique par défaut, mais cette balise porte un sens, pas un style : elle indique au navigateur, aux moteurs de recherche et aux technologies d'assistance « c'est ici que ce mot est défini. »
Pourquoi utiliser <dfn> plutôt que <i> ou <em> ?
Il est tentant d'utiliser <i> ou <em> pour mettre un terme en italique, mais ces balises ne transmettent aucune information sur ce que signifie le texte :
<i>est purement stylistique — du texte en italique sans sémantique particulière.<em>marque une emphase (un changement d'intonation à l'oral), pas une définition.<dfn>est sémantique et lisible par les machines : elle identifie explicitement le terme en cours de définition. Les lecteurs d'écran peuvent l'annoncer comme une définition, et des outils peuvent en extraire des glossaires.
Ainsi, lorsque l'italique existe parce qu'un terme est défini pour la première fois, utilisez <dfn>. Quand vous voulez simplement de l'italique ou de l'emphase, utilisez <i> ou <em>.
Syntaxe
La balise <dfn> fonctionne par paires — le contenu est écrit entre la balise ouvrante <dfn> et la balise fermante </dfn>.
La balise <p> environnante, la paire <dt>/<dd>, ou la balise <section> joue le rôle de contexte de définition du terme : le terme défini par <dfn> doit être expliqué dans ce même bloc.
Exemple de base de la balise 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>
Comment le terme défini est identifié
Le navigateur détermine quel mot un <dfn> définit en appliquant ces règles, dans l'ordre :
- Si
<dfn>possède un attributtitle, la valeur detitleest le terme défini. Le texte visible peut alors être une abréviation (souvent via<abbr>). - Si
<dfn>a exactement un seul enfant — un élément<abbr>avec un attributtitle— et que<dfn>ne contient pas d'autre texte, alors letitlede<abbr>est le terme défini. - Sinon, le contenu textuel visible de
<dfn>est le terme défini.
Exemple avec un attribut title
Ici, la valeur de title est traitée comme le terme complet défini, tandis que le texte visible reste court :
<!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>L'infobulle title n'apparaît qu'au survol de la souris, elle est donc invisible pour les utilisateurs au clavier ou sur écran tactile. Ne placez jamais d'informations essentielles uniquement dans title — associez le terme à un texte explicatif visible, ou utilisez <abbr> pour que le développement soit disponible de manière sémantique.
Exemple avec la balise <abbr>
Combiner <dfn> avec <abbr> est un modèle courant et accessible : <dfn> marque l'instance définissante, et <abbr> fournit le développement complet via son 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>Lier vers une définition avec un id
Si vous ajoutez un id à un <dfn>, vous pouvez y créer un lien depuis n'importe quel endroit de la page avec un élément <a> utilisant un fragment (#). Cela permet aux lecteurs de sauter directement à l'endroit où un terme est défini :
<!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>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| title | text | Fournit la définition complète ou la forme développée du terme. Lorsqu'il est présent, il remplace le terme par défaut et s'affiche sous forme d'infobulle au survol. |
La balise <dfn> prend également en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <dfn>
dfn {
color: #0056b3;
font-weight: bold;
}