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
|
---
title: Définir des termes avec HTML
slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML
tags:
- Beginner
- Guide
- HTML
- Learn
translation_of: Learn/HTML/Howto/Define_terms_with_HTML
---
<div class="summary">
<p>HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.</p>
</div>
<table class="learn-box nostripe standard-table">
<tbody>
<tr>
<th scope="row">Prérequis :</th>
<td>Vous devez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
</tr>
<tr>
<th scope="row">Objectifs :</th>
<td>Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.</td>
</tr>
</tbody>
</table>
<p>Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :</p>
<blockquote>
<dl>
<dt>Bleu (<em>adjectif</em>)</dt>
<dd>La couleur du ciel lors d'un temps clair.<br>
<em><q>Le ciel est bleu.</q></em></dd>
<dd>Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.<br>
<em><q>Un steak bleu s'il vous plaît.</q></em></dd>
</dl>
</blockquote>
<p>Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :</p>
<blockquote>
<p><em><dfn>Firefox</dfn></em> est le navigateur web créé et développé par la Fondation Mozilla.</p>
</blockquote>
<p>Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.</p>
<h2 id="Comment_écrire_un_description_informelle">Comment écrire un description informelle</h2>
<p>Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.</p>
<p>On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <code><dfn></code> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :</p>
<pre class="brush: html"><p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p>
</pre>
<div class="note">
<p><strong>Note :</strong> On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe <a href="/fr/Apprendre/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">des éléments HTML tout indiqués</a>.</p>
</div>
<h3 id="Cas_spécifique_les_abréviations">Cas spécifique : les abréviations</h3>
<p>En ce qui concerne les abréviations, il est préférable <a href="/fr/Apprendre/HTML/Howto/Mark_abbreviations_and_make_them_understandable">de les identifier séparement</a> grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.</p>
<pre class="brush: html"><p>
<dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
est un langage de description utilisé pour structurer des documents sur le Web.
</p></pre>
<div class="note">
<p>La spécification HTML <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element">met en avant l'attribut <code>title</code></a> pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut <code>title</code> ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également <a href="http://www.w3.org/TR/html/dom.html#attr-title">ce qui est noté dans les spécifications</a>.</p>
</div>
<h3 id="Améliorer_l'accessibilité">Améliorer l'accessibilité</h3>
<p>{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <code><dfn></code> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">aria-discribedby</a></code> pour associer, formellement, un terme à sa définition :</p>
<pre class="brush: html"><p>
<span id="ff">
<dfn aria-describedby="ff">Firefox</dfn>
est le navigateur web créé et développé par la Fondation Mozilla.
</span>
Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a>
</p></pre>
<p>Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. <code>aria-describedby</code> peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <code><dfn></code>). <code>aria-describedby</code> utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.</p>
<h2 id="Comment_construire_une_liste_de_descriptions">Comment construire une liste de descriptions</h2>
<p>Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).</p>
<div class="note">
<p>Les listes de descriptions <a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">ne doivent pas être utilisées pour retranscrire des dialogues</a>. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici <a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">quelques recommandations pour retranscrire un dialogue dans un document web</a>.</p>
</div>
<p>Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.</p>
<h3 id="Un_exemple_simple">Un exemple simple</h3>
<p>Voici un exemple simple qui dresse une liste de descriptions de plats :</p>
<pre class="brush: html"><dl>
<dt>jambalaya</dt>
<dd>
une entrée à base de riz qui contient généralement
du poulet, des saucisses, des fruits de mer et des
épices
</dd>
<dt>sukiyaki</dt>
<dd>
une spécialité japonaise à base de fines tranches de
viande, de légumes, de nouilles et qui est cuite dans
un sauce soja et du saké
</dd>
<dt>chianti</dt>
<dd>
un vin italien, sec, originaire de Toscane
</dd>
</dl>
</pre>
<div class="note">
<p>La structure de base qu'on voit dans cet exemple alterne les termes (<code><dt></code>) et leurs descriptions (<code><dd></code>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.</p>
</div>
<h3 id="Améliorer_l'aspect_visuel">Améliorer l'aspect visuel</h3>
<p>Voici comment un navigateur affichera la liste précédente :</p>
<p>{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}</p>
<p>Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :</p>
<pre class="brush: css">dt {
font-weight: bold;
}
</pre>
<p>Cela permettra d'obtenir le résultat suivant :</p>
<p>{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}</p>
<h2 id="En_savoir_plus">En savoir plus</h2>
<ul>
<li>{{htmlelement("dfn")}}</li>
<li>{{htmlelement("dl")}}</li>
<li>{{htmlelement("dt")}}</li>
<li>{{htmlelement("dd")}}</li>
<li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">Comment utiliser l'attribut <code>aria-describedby</code></a></li>
</ul>
|
