Les nouveaux développeurs sont souvent confus de voir plusieurs éléments qui produisent des résultats similaires. <em> et <i> sont un exemple courant, car ils mettent tous deux en italique le texte. Quelle est la différence? Lequel devriez-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’accent sur le stress de son contenu, tandis que l’élément <i> représente un texte qui se détache de la prose normale, d’un mot étranger, de pensées de personnages fictifs ou lorsque le texte fait référence à la définition d’un mot au lieu de représenter sa signification sémantique. (Le titre d’une œuvre, comme le nom d’un livre ou d’un film, doit utiliser <cite>.)
Cela signifie que le bon à utiliser dépend de la situation. Ni l’un ni l’autre n’est à 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 un accent, en utilisant un stress verbal.
Un exemple pour <i> pourrait être: « Le Queen Mary a navigué la nuit dernière ». Ici, il n’y a pas d’accent ni 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 pour <i> pourrait être: « Le mot est un article ».