HTML em et strong : emphase, importance et différences avec b et CSS

HTML <em> marque l’accentuation dans une phrase, tandis que <strong> marque une importance forte, le sérieux ou l'urgence. Les navigateurs les affichent généralement en italique et en gras respectivement, mais choisissez un élément en fonction de sa signification dans le contexte plutôt que de son apparence par défaut.

En quoi em et strong diffèrent-ils ?

Utilisez-les lorsque mettre l'accent sur un mot particulier change le sens d'une phrase. Dans « J'ai vérifié le document aujourd'hui », insister sur « J' » met l'accent sur qui a vérifié le document, tandis qu'insister sur « aujourd'hui » met l'accent sur quand. strong marque l'importance du contenu lui-même, comme un avertissement que les lecteurs doivent connaître ou une conclusion importante.

Les deux éléments fonctionnent au sein des phrases. Ne mettez pas tout un paragraphe entre balises simplement pour qu'il ressemble à un gros titre. Structurez les titres des documents avec h1 à h6 et appliquez un accent significatif uniquement là où c'est nécessaire.

Comparez l'accent dans un exemple complet

Enregistrez ce document sous emphasis.html et ouvrez-le dans un navigateur. Comparez l'accent mis dans les deux premières phrases, l'instruction importante et la dernière phrase qui utilise uniquement le style gras visuel.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Emphase et importance</title>
  <style>.visual-bold { font-weight: bold; }</style>
</head>
<body>
  <h1>L’emphase en contexte</h1>
  <p><em>J’ai</em> vérifié le document aujourd’hui.</p><p>J’ai vérifié le document <em>aujourd’hui</em>.</p><p><strong>Vérifiez la sauvegarde avant de remplacer le fichier.</strong></p><p>Termes de ce document : <b>élément</b> et <b>attribut</b></p><p>Exemple visuel : <span class="visual-bold">Cette partie est en gras grâce au CSS.</span></p></body>
</html>

Avec les styles par défaut courants, « J’ai » et « aujourd’hui » apparaissent en italique, tandis que la consigne de sauvegarde et les termes marqués avec b apparaissent en gras. Le span est également en gras à cause du CSS, mais il ne devient pas un élément exprimant une grande importance. Les polices et les styles utilisateurs peuvent modifier l'apparence, donc exprimez également clairement le sens important dans le texte.

Distinguer b du style gras CSS

Penser à b simplement comme « strong sans signification » manque son but : il attire l'attention. Utilisez CSS lorsque l'apparence seule est l'objectif. De même, ne choisissez pas em simplement parce que vous voulez du texte en italique.

Supprimer l’italique d’em ou modifier le poids de strong via CSS préserve le sens exprimé en HTML. Inversement, rendre un span en gras ne lui donne pas le sens de strong. Les annonces réelles par la technologie d’assistance varient selon l’environnement, donc ne supposez pas qu’un changement de voix spécifique se produira toujours. Voir la référence MDN em, la référence MDN strong et la référence MDN b pour les définitions des éléments.