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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
|
---
title: '<abbr> : l''élément d''abréviation'
slug: Web/HTML/Element/abbr
tags:
- Acronym
- Definitions
- Element
- HTML
- HTML text-level semantics
- HTML:Flow content
- HTML:Palpable Content
- HTML:Phrasing content
- Reference
- Web
- abbr
- abbreviation
- semantics
translation_of: Web/HTML/Element/abbr
browser-compat: html.elements.abbr
---
{{HTMLRef}}
L'élément HTML **`<abbr>`** (**abréviation** en français) représente une abréviation ou un acronyme ; l'attribut facultatif [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title) peut fournir une explication ou une description de l'abréviation. S'il est présent, `title` doit contenir cette description complète et rien d'autre.
{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
<table class="properties">
<tbody>
<tr>
<th scope="row">
<dfn
><a href="/fr/docs/Web/Guide/HTML/Content_categories"
>Catégories de contenu</a
></dfn
>
</th>
<td>
<a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux"
>Contenu de flux</a
>,
<a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9"
>contenu phrasé</a
>,
<a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_tangible"
>contenu tangible</a
>.
</td>
</tr>
<tr>
<th scope="row"><dfn>Contenu autorisé</dfn></th>
<td>
<a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9"
>Contenu phrasé</a
>.
</td>
</tr>
<tr>
<th scope="row"><dfn>Omission de balises</dfn></th>
<td>
Aucune, la balise d'ouverture et la balise de fermeture sont
obligatoires.
</td>
</tr>
<tr>
<th scope="row"><dfn>Parents autorisés</dfn></th>
<td>
Tout élément acceptant du
<a href="/fr/docs/Web/Guide/HTML/Content_categories#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">Interface DOM</th>
<td>
<a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>
</td>
</tr>
</tbody>
</table>
## Attributs
Cet élément n'a pas d'autres attributs que les [attributs universels](/fr/docs/Web/HTML/Global_attributes).
On notera que l'attribut **`title`** possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.
Chaque élément `<abbr>` est indépendant, rattacher un titre à l'un ne l'associe pas aux abréviations identiques qui suivent.
## Notes d'utilisation
### Cas d'usage généraux
Il n'est pas obligatoire d'utiliser `<abbr>` pour toutes les abréviations d'un document mais voici quelques cas où cet élément s'avère pertinent :
- Lorsqu'une abréviation est utilisée et qu'on souhaite fournir une définition ou une explication en dehors du contenu du document, on utilisera `<abbr>` avec un attribut [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title) adéquat.
- Lorsqu'une abréviation fait partie d'un jargon ou d'un vocabulaire qui risque d'être inconnu du lecteur, un élément `<abbr>` avec un attribut `title` explicatif pourra être utilisé.
- Lorsqu'on souhaite bénéficier de la sémantique liée à l'abréviation (par exemple pour les manipuler en script ou les mettre en forme avec des feuilles de style), on pourra utiliser `<abbr>` pour identifier ces contenus.
- Lorsqu'on souhaite définir des termes qui sont des abréviations, on pourra utiliser une combinaison de `<abbr>` et de [`<dfn>`](/fr/docs/Web/HTML/Element/dfn). Voir ci-après pour un exemple.
### Grammaire
Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut **`title`** devrait correspondre à celui du contenu de l'élément `abbr`. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).
## Mise en forme par défaut
Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne (`display: inline`) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :
- Certains navigateurs tels qu'Internet Explore lui appliquent la même mise en forme qu'à un élément [`<span>`](/fr/docs/Web/HTML/Element/span).
- Opera, Firefox et d'autres navigateurs souligne l'abréviation avec une ligne de points.
- D'autres navigateurs ne soulignent pas le texte mais l'écrivent en petites majuscules. Pour éviter ce comportement, on pourra utiliser la règle CSS `font-variant: none`.
## Exemples
### Baliser une abréviation pour marquer la sémantique
On peut baliser une abréviation sans fournir de description ou de définition, il suffit d'utiliser `<abbr>` sans attribut.
#### HTML
```html
<p>
Nous allons voir le <abbr>HTML</abbr> qui sert à construire
des pages web.
</p>
```
#### Résultat
{{EmbedLiveSample("marking_up_an_abbreviation_semantically", "100%", 80)}}
### Mettre en forme des abréviations
CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.
#### HTML
```html
<p>Avec <abbr>CSS</abbr>, on peut mettre en forme les éléments.</p>
```
#### CSS
```css
abbr {
font-variant: all-small-caps;
}
```
#### Résultat
{{EmbedLiveSample("styling_abbreviations", "100%", 80)}}
### Fournir une description
On peut ajouter un attribut [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title) afin de fournir une description de l'abréviation ou de l'acronyme.
#### HTML
```html
<p>Et là je lui ai répondu <abbr title="Laugh Out Loud">LOL</abbr>.</p>
```
#### Résultat
{{EmbedLiveSample("providing_an_expansion", "100%", 80)}}
### Définir une abréviation
Il est possible d'utiliser l'élément `<abbr>` avec [`<dfn>`](/fr/docs/Web/HTML/Element/dfn) afin de formellement définir une abréviation.
#### HTML
```html
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
</dfn> est un langage de balise qui permet de créer la structure
et d'organiser la sémantique d'une page web.</p>
<p>Une <dfn id="spec">spécification</dfn>
(<abbr title="spécification">spec</abbr>) est un document qui décrit,
de façon détaillée comme une technologie ou une API fonctionne et comment
l'utiliser.</p>
```
#### Résultat
{{EmbedLiveSample("defining_an_abbreviation", "100%", 160)}}
## Accessibilité
C'est une bonne pratique que d'épeler l'acronyme ou l'abréviation lorsqu'elle est utilisée pour la première fois. Cela permet au lecteur de mieux comprendre le terme, notamment si celui-ci est technique ou appartient à un jargon spécifique.
#### Exemple
```html
<p>JavaScript Object Notation (<abbr>JSON</abbr>) est un format léger
d'échange de données.</p>
```
Cela peut servir aux personnes qui découvrent ces concepts pour la première fois ou pour les personnes souffrant de troubles cognitifs.
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [Utiliser l'élément `<abbr>`](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations)
|
