La balise HTML <em>
La balise HTML <em> marque l'emphase de stress, modifiant le sens d'une phrase et la façon dont les lecteurs d'écran la lisent.
La balise HTML <em> marque l'emphase de stress — la partie d'une phrase que vous diriez avec une accentuation vocale supplémentaire, de la façon dont l'emphase peut modifier le sens d'une phrase. C'est un élément sémantique : le rendu en italique que vous voyez dans les navigateurs n'est que le style par défaut, ce n'est pas l'objectif de la balise.
Lisez ces deux phrases à voix haute et remarquez comment l'emphase change le sens :
<p><em>Cats</em> are great pets.</p> <!-- Cats specifically, not other animals -->
<p>Cats are <em>great</em> pets.</p> <!-- how great they are -->Parce que <em> porte un sens plutôt qu'une simple apparence, elle appartient au contenu de phrasé de HTML — des éléments en ligne qui balisent la structure et l'intention du texte courant.
<em> n'est pas interchangeable avec un italique CSS. Utilisez <em> lorsque l'emphase fait partie de ce que le texte signifie ; recourez à font-style: italic uniquement lorsque vous souhaitez du texte incliné sans changement de sens.
Pourquoi utiliser <em> plutôt que les italiques CSS (accessibilité)
La raison de choisir <em> plutôt que le style visuel est l'accessibilité et la sémantique. <em> porte une signification définie — l'emphase de stress — que la spécification HTML indique que les technologies d'assistance devraient transmettre, et ce sens reste dans le balisage où les outils, les moteurs de recherche et les futurs agents utilisateurs peuvent agir dessus. Le texte en italique simple mis en forme avec CSS ne transmet rien de sémantique : c'est un effet purement visuel. (En pratique, les lecteurs d'écran courants ne modifient pas encore l'accentuation vocale pour <em> par défaut, mais la distinction sémantique reste importante et ne coûte rien.)
C'est le contraste essentiel avec la balise <i> : <i> s'affiche également en italique par défaut, mais elle ne porte explicitement aucune emphase de stress. Elle est destinée au texte dans une voix ou une humeur alternative (termes techniques, expressions étrangères, noms taxonomiques, une pensée), et non pour mettre en valeur le sens.
Si vous avez besoin de marquer quelque chose comme important plutôt qu'emphatique, utilisez <strong> à la place — <strong> signale l'importance forte, la gravité ou l'urgence, tandis que <em> signale l'emphase de stress. Les deux sont indépendants et peuvent être combinés.
Imbriquer <em> pour une emphase plus forte
Selon la spécification HTML, chaque niveau d'imbrication de <em> augmente le degré d'emphase. C'est utile lorsqu'un mot accentué à l'intérieur d'une phrase déjà accentuée doit encore mieux ressortir :
<p><em>Please, <em>do</em> remember to call.</em></p>Ici, toute la phrase est accentuée, et le mot « do » l'est un niveau de plus. Les navigateurs rendent toujours chaque niveau en italique par défaut, mais l'imbrication communique le niveau d'emphase croissant aux technologies d'assistance et aux autres outils qui lisent la structure du document.
Syntaxe
La balise <em> vient par paires. Le contenu est écrit entre les balises ouvrante (<em>) et fermante (</em>).
Exemple de la balise HTML <em> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>It is a normal paragraph</p>
<p>The important part of the text is <em>shown in italic</em>.</p>
</body>
</html>Résultat
Attributs
La balise <em> prend en charge les Attributs globaux et les Attributs d'événements.
Mettre en forme la balise <em>
Étant donné que le sens réside dans la balise, l'apparence vous appartient entièrement et peut être contrôlée avec CSS. L'italique par défaut n'est qu'une convention — vous pouvez restyliser <em> pour un design donné tout en conservant la sémantique et l'accessibilité intactes.
Par exemple, dans un contexte où les italiques entrent en conflit avec le reste de la page, vous pourriez présenter l'emphase sous forme de texte rouge en gras à la place :
<style>
.notice em {
font-style: normal; /* drop the default slant */
font-weight: bold;
color: #c0392b; /* draw the eye with color */
}
</style>
<p class="notice">You <em>must</em> save before closing the editor.</p>Le mot « must » conserve toujours l'emphase de stress pour les lecteurs d'écran — seul son rendu visuel a changé. Ce découplage entre le sens (<em>) et la présentation (CSS) est exactement la raison pour laquelle la balise sémantique vaut la peine d'être utilisée.