Les nouveaux développeurs sont souvent déroutés de voir plusieurs éléments qui produisent des résultats similaires. <em> et <i> en sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence ? Lequel devez-vous 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>.)
Ce qui signifie que le bon à 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 bien : « 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 de <i> pourrait être : « Le Queen Mary a pris la mer hier soir ». 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 le est un article ».