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
|
---
title: '<em> : l''élément d''emphase'
slug: Web/HTML/Element/em
tags:
- Element
- HTML
- HTML text-level semantics
- Reference
- Web
translation_of: Web/HTML/Element/em
browser-compat: html.elements.em
---
{{HTMLRef}}
L'élément HTML **`<em>`** (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments `<em>` peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.
{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/fr/docs/Web/Guide/HTML/Content_categories"
>Catégories de contenu</a
>
</th>
<td>
<a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
>Contenu de flux</a
>,
<a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
>contenu phrasé</a
>,
<a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
>contenu tangible</a
>.
</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td>
<a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
>Contenu phrasé</a
>.
</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>
Aucune, la balise d'ouverture et la balise de fermeture sont
obligatoires.
</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>
Tout élément qui accepte du
<a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
>contenu phrasé</a
>.
</td>
</tr>
<tr>
<th scope="row">Rôle ARIA implicite</th>
<td>
<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
>Pas de rôle correspondant</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
>. Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait
l'interface
<a href="/fr/docs/Web/API/HTMLSpanElement"
><code>HTMLSpanElement</code></a
>
pour cet élément.
</td>
</tr>
</tbody>
</table>
## Attributs
Comme tous les éléments HTML, cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
## Notes d'utilisation
L'élément `<em>` est destiné aux mots dont l'accent est souligné par rapport au texte environnant, ce qui est souvent limité à un ou plusieurs mots d'une phrase et affecte le sens de la phrase elle-même.
Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément [`<i>`](/fr/docs/Web/HTML/Element/i) ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément [`<cite>`](/fr/docs/Web/HTML/Element/cite) ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément [`<strong>`](/fr/docs/Web/HTML/Element/strong) pour marquer un texte plus important que le texte qui l'entoure.
### \<i> ou \<em> ?
Lorsqu'on débute en développement web, on peut être dérouté⋅e de voir plusieurs éléments qui produisent des résultats similaires. `<em>` et `<i>` sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence ? Laquelle doit-on utiliser ?
Par défaut, le résultat visuel est le même. Cependant, la signification sémantique est différente. L'élément `<em>` représente l'accentuation de son contenu, tandis que l'élément `<i>` représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique. (Le titre d'une œuvre, comme le nom d'un livre ou d'un film, devrait utiliser `<cite>`).
Cela signifie que le choix de l'option à utiliser dépend de la situation. Ni l'un ni l'autre ne sont destinés à des fins purement décoratives, c'est à cela que sert le style CSS.
Un exemple pour `<em>` pourrait être : « _Faites_-le déjà ! », ou : « Nous _devions_ faire quelque chose à ce sujet ». Une personne ou un logiciel lisant le texte prononcerait les mots en italique avec une emphase, en utilisant l'accentuation verbale.
Un exemple pour `<i>` pourrait être : « Le _Queen Mary_ a pris la mer la nuit dernière ». Ici, il n'y a pas d'accentuation ou d'importance supplémentaire sur le mot « Queen Mary ». Il est simplement indiqué que l'objet en question n'est pas une reine nommée Mary, mais un navire nommé _Queen Mary_. Un autre exemple de `<i>` pourrait être : « Le mot _the_ est un article ».
## Exemple
L'élément `<em>` est souvent utilisé pour indiquer un contraste, implicite ou explicite.
```html
<p>
Dans HTML5, ce qui était appelé contenu de <em>type bloc</em>
est maintenant appelé contenu de <em>flux</em>.
</p>
```
### Résultat
{{EmbedLiveSample("example", "", 100)}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [`<i>`](/fr/docs/Web/HTML/Element/i)
|
