: l'élément d'emphase

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

L'élément HTML  marque le texte qui reçoit une emphase. L'élément  peut être imbriqué, chaque niveau d'imbrication indiquant un degré d'emphase plus élevé.

Exemple interactif

<p>Sors du lit <em>maintenant</em>&nbsp;!</p>

<p>Nous <em>devons</em> faire quelque chose à ce sujet.</p>

<p>Ce n'est <em>pas</em> un exercice&nbsp;!</p>

em {
  /* Ajoutez vos styles ici */
}

Attributs

Cet élément inclut uniquement les attributs universels.

L'élément  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.

En général, cet élément est affiché en italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; utilisez pour cela la propriété CSS font-style. Utilisez l'élément <cite> pour marquer le titre d'une œuvre (livre, pièce, chanson, etc.). Utilisez l'élément  pour marquer un texte qui adopte un ton ou un registre différent, ce qui couvre de nombreuses situations courantes d'italique, comme les noms scientifiques ou les mots dans d'autres langues. Utilisez l'élément  pour marquer un texte d'une importance supérieure au texte environnant.

`` ou `` ?

Certain·e·s développeur·euse·s peuvent être dérouté·e·s par le fait que plusieurs éléments produisent apparemment des résultats visuels similaires.  et  en sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence ? Lequel doit‑on utiliser ?

Par défaut, le rendu visuel est identique. Cependant, la signification sémantique diffère. L'élément  indique une emphase sur son contenu, tandis que l'élément  marque un texte mis à l'écart de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte se réfère à la définition d'un mot plutôt qu'à 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 du bon élément dépend de la situation. Aucun des deux n'est destiné à un usage purement décoratif, c'est à cela que sert le style CSS.

Les exemples pour  pourraient être :

html

<p>Fais-le <em>déjà</em>&nbsp;!</p>
<p>Nous avons <em>dû</em> faire quelque chose à ce sujet.</p>

Une personne ou un logiciel lisant le texte prononcerait les mots en italique avec une emphase, en utilisant l'accentuation verbale.

Les exemples pour  pourraient être :

html

<p>Le mot <i>the</i> est un article.</p>
<p>Le <i>Queen Mary</i> a pris la mer la nuit dernière.</p>

Ici, il n'y a pas d'emphase ou d'importance supplémentaire sur le mot « Queen Mary ». Cela indique simplement que l'objet en question n'est pas une reine nommée Mary, mais un navire nommé « Queen Mary ».

Exemples

L'élément  est souvent utilisé pour indiquer un contraste, implicite ou explicite.

html

<p>
  Dans HTML, ce qui était appelé contenu de <em>type bloc</em> est maintenant
  appelé contenu de <em>flux</em>.
</p>

Résultat

Résumé technique

Catégories de contenu	Contenu de flux, contenu phrasé, contenu tangible.
Contenu autorisé	Contenu phrasé.
Omission de balises	Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisés	Tout élément qui accepte du contenu phrasé.
Rôle ARIA implicite	`emphasis`
Rôles ARIA autorisés	Tous les rôles sont autorisés.
Interface DOM	`HTMLElement`. Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface `HTMLSpanElement` pour cet élément.