<em> : l'élément d'emphase

Comme tous les éléments HTML, cet élément prend en charge les attributs universels.

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> ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément <cite> ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément <strong> pour marquer un texte plus important que le texte qui l'entoure.

Lorsqu'on débute en développement web, on peut être dérouté 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 ».

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

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

• <i>