1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
|
---
title: '<dfn> : l''élément de définition'
slug: Web/HTML/Element/dfn
tags:
- Element
- HTML
- Reference
- Web
translation_of: Web/HTML/Element/dfn
---
<div>{{HTMLRef}}</div>
<p>L'élément HTML <strong><code><dfn></code></strong> est utilisé afin d'indiquer le terme qui est en train d'être défini dans une phrase ou un paragraphe (sa définition est écrite dans son parent {{HTMLElement("p")}} ou {{HTMLElement("dt")}}/{{HTMLElement("dd")}} ou {{HTMLElement("section")}} le plus proche).</p>
<div class="note">
<p><strong>Note :</strong> Si cette phrase vous paraît absconse, n'hésitez pas à consulter les exemples ci-après.</p>
</div>
<p>Le rôle de l'élément <code><dfn></code> est purement sémantique.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Attributs">Attributs</h2>
<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a> sur <code><dfn></code>.</p>
<p>Pour cet élément, l'attribut <code><strong>title</strong></code> possède un sens particulier noté ci-après.</p>
<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation :</strong></h2>
<ul>
<li>L'élément <code><dfn></code> marque le terme étant défini. La définition du terme doit être donnée par l'élément {{HTMLElement("p")}}, ou {{HTMLElement("section")}} parent ou par un groupe de liste de définitions (généralement une paire {{HTMLElement("dt")}}, {{HTMLElement("dd")}}).</li>
<li>La valeur exacte du terme étant défini est déterminé par les règles suivantes :
<ol>
<li>Si l'élément <code><dfn></code> possède un attribut <code><strong>title</strong></code> alors le terme en question est la valeur de cet attribut. Dans ce cas, l'élément doit toujours contenir du texte mais ce dernier peut être une autre forme du terme (par exemple une abbréviation, auquel cas on utilisera un élément {{HTMLElement("abbr")}})</li>
<li>Sinon et s'il contient seulement un élément {{HTMLElement("abbr")}} avec l'attribut {{htmlattrxref("title", "abbr")}}, alors le terme en question est la valeur de cet attribut.</li>
<li>Dans tous les autres cas, le texte contenu par l'élément <code><dfn></code> est le terme qui est défini.</li>
</ol>
</li>
</ul>
<h2 id="Exemples">Exemples</h2>
<h3 id="Identification_simple_d’un_terme">Identification simple d’un terme</h3>
<p>Dans cet exemple, on utilise simplement l'élément <code><dfn></code> afin d'identifier l'emplacement du terme défini au sein de sa définition.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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></pre>
<p>L'élément <code><dfn></code> n'ayant ici pas d'attribut <code>title</code>, c'est le contenu textuel qui représente le terme que l'on définit.</p>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Identification_simple_d’un_terme", 650, 120)}}</p>
<h3 id="Liens_vers_des_définitions">Liens vers des définitions</h3>
<p>Il est possible d'utiliser l'attribut <code>id</code> afin de créer des liens avec des éléments {{HTMLElement("a")}} qui pointent vers la définition.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: 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>Negare non possum. Dat enim intervalla et relaxat. Quonam modo?
Equidem e Cn. Quid de Pythagora? In schola desinis. </p>
<p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum
est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas
bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc
agere divinius? </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></pre>
<p>On voit ici que l'élément possède désormais un attribut {{htmlattrxref("id")}} avec la valeur <code>"definition-dfn"</code>. 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 {{HTMLElement("a")}} dont l'attribut {{htmlattrxref("href", "a")}} vaut <code>"#definition-dfn"</code>, ce qui permet de remonter à la définition.</p>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Liens_vers_des_définitions", 650, 300)}}</p>
<h3 id="Combiner_les_abbréviations_et_les_définitions">Combiner les abbréviations et les définitions</h3>
<p>Dans certains cas, on souhaite utiliser l'abbréviation d'un terme lorsqu'on le définit. Pour cela, on peut utiliser <code><dfn></code> et {{HTMLElement("abbr")}} de la façon suivante :</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><p>The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn>
is among the most productive scientific instruments ever constructed.
It has been in orbit for over 20 years, scanning the sky and
returning data and photographs of unprecedented quality and
detail.</p>
<p>Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has
arguably done more to advance science than any device ever built.</p></pre>
<p>On notera que l'élément <code><abbr></code> est imbriqué dans l'élément <code><dfn></code>. L'élément <code><abbr></code> indique que le terme est une abbréviation ("HST") et indique le détail de cette abbrévation ("Hubble Space Telescope") grâce à son attribut <code>title</code>. L'élément <code><dfn></code> indique quant à lui que c'est bien ce terme abrégé qu'on est en train de définir.</p>
<h4 id="Résultat_3">Résultat</h4>
<p>{{EmbedLiveSample("Combiner_les_abbréviations_et_les_définitions", 650, 200)}}</p>
<h2 id="Résumé_technique">Résumé technique</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
<td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
</tr>
<tr>
<th scope="row"><dfn>Contenu autorisé</dfn></th>
<td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> mais sans élément {{HTMLElement("dfn")}} qui soit un descendant.</td>
</tr>
<tr>
<th scope="row"><dfn>Omission de balises</dfn></th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row"><dfn>Parents autorisés</dfn></th>
<td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>Tous les rôles sont autorisés.</td>
</tr>
<tr>
<th scope="row"><dfn>Interface DOM</dfn></th>
<td>{{domxref("HTMLElement")}}.</td>
</tr>
</tbody>
</table>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécifications</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '<dfn>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("html.elements.dfn")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Les éléments HTML en lien avec les listes de définitions :
<ul>
<li>{{HTMLElement("dl")}}</li>
<li>{{HTMLElement("dt")}}</li>
<li>{{HTMLElement("dd")}}</li>
</ul>
</li>
<li>{{HTMLElement("abbr")}}</li>
</ul>
|
