<dfn> : l'élément de définition

Exemple interactif

<p>
  Un <dfn id="def-validator">validateur</dfn> est un programme qui vérifie les
  erreurs de syntaxe dans du code ou des documents.
</p>

dfn {
  /* Ajoutez vos styles ici */
}

Attributs

Cet élément inclut uniquement les attributs universels.

L'attribut title possède un sens particulier, comme noté ci-après.

Notes d'utilisation

L'utilisation de l'élément <dfn> présente certains aspects peu évidents. Nous les examinons ici.

Indiquer le terme à définir

Le terme à définir est identifié selon ces règles :

1. Si l'élément <dfn> possède un attribut title, la valeur de l'attribut title est considérée comme étant le terme défini. L'élément doit toujours contenir du texte, mais ce texte peut être une abréviation (peut-être en utilisant <abbr>) ou une autre forme du terme.
2. Si le <dfn> contient un seul élément enfant et n'a pas de contenu textuel propre, et que l'élément enfant est un élément <abbr> avec un attribut title lui-même, alors la valeur exacte du <abbr> de l'élément title est le terme défini.
3. Sinon, le contenu textuel de l'élément <dfn> est le terme défini. Ceci est illustré dans le premier exemple ci-dessous.

Liens vers des éléments de type <dfn>

Si vous incluez un attribut id sur l'élément <dfn>, vous pouvez ensuite créer un lien vers celui-ci en utilisant des éléments <a>. Ces liens doivent être des utilisations du terme, l'objectif étant que le lecteur puisse accéder rapidement à la définition du terme s'il ne la connaît pas déjà, en cliquant sur le lien du terme.

C'est ce que montre l'exemple sous Liens vers les définitions ci-dessous.

Exemples

Voyons quelques exemples de divers scénarios d'utilisation.

Identification simple d'un terme

Dans cet exemple, on utilise simplement l'élément <dfn> afin d'identifier l'emplacement du terme défini au sein de sa définition.

HTML

<p>
  L'élément HTML de définition (<strong><dfn>&lt;dfn&gt;</dfn></strong
  >) est utilisé afin d'indiquer le terme en cours de définition dans la phrase.
</p>

L'élément <dfn> n'ayant ici pas d'attribut title, c'est le contenu textuel qui représente le terme que l'on définit.

Résultat

Liens vers des définitions

Pour ajouter des liens vers les définitions, créez le lien comme d'habitude, avec l'élément <a>.

HTML

<p>
  L'élément de définition (<strong
    ><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong
  >) est utilisé afin d'indiquer le terme en train d'être défini dans le
  contexte d'une phrase.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine
  voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.
  Scrupulum, inquam, abeunti;
</p>

<p>
  C'est pourquoi nous avons décidé d'utiliser l'élément
  <code><a href="#definition-dfn">&lt;dfn&gt;</a></code> pour ce projet.
</p>

On voit ici que l'élément possède désormais un attribut id avec la valeur "definition-dfn". Cet attribut permet d'utiliser l'élément comme cible d'un lien. Plus bas, on crée un tel lien avec un élément <a> dont l'attribut href vaut "#definition-dfn", ce qui permet de remonter à la définition.

Résultat

Utiliser les abréviations et les définitions

Dans certains cas, on souhaite utiliser l'abréviation d'un terme lorsqu'on le définit. Pour cela, on peut utiliser <dfn> et <abbr> de la façon suivante :

HTML

<p>
  Le <dfn><abbr title="Télescope Spatial Hubble">TSH</abbr></dfn> est l'un des
  instruments scientifiques les plus productifs jamais construits. Il est en
  orbite depuis plus de 20 ans, scrutant le ciel et renvoyant des données et des
  photographies d'une qualité et d'un niveau de détail sans précédent.
</p>

<p>
  En effet, le <abbr title="Télescope Spatial Hubble">TSH</abbr> a sans doute
  fait plus pour faire avancer la science que tout autre appareil jamais
  construit.
</p>

On notera que l'élément <abbr> est imbriqué dans l'élément <dfn>. L'élément <abbr> indique que le terme est une abréviation (« HST ») et indique le détail de cette abrévation (« Hubble Space Telescope ») grâce à son attribut title. L'élément <dfn> indique quant à lui que c'est bien ce terme abrégé qu'on est en train de définir.

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les éléments liés aux listes de définitions : <dl>, <dt>, <dd>
• L'élément <abbr>