Neue Entwickler sind oft verwirrt, wenn sie mehrere Elemente sehen, die ähnliche Ergebnisse liefern. <em> und <i> sind ein gängiges Beispiel, da sie beide Text kursiv darstellen. Was ist der Unterschied? Welche sollten Sie verwenden?
Das visuelle Ergebnis ist standardmäßig das gleiche. Die semantische Bedeutung ist jedoch unterschiedlich. Das <em>-Element stellt die Hervorhebung seines Inhalts dar, während das <i>-Element Text darstellt, der sich von der normalen Prosa abhebt, wie z. B. ein Fremdwort, Gedanken einer fiktiven Figur oder wenn sich der Text auf die Definition eines Wortes bezieht, anstatt dessen semantische Bedeutung darzustellen. (Für den Titel eines Werks, z. B. den Namen eines Buchs oder Films, sollte <cite> verwendet werden.)
Das heißt, die richtige Verwendung hängt von der Situation ab. Beides ist nicht für rein dekorative Zwecke gedacht, dafür gibt es CSS-Styling.
Ein Beispiel für <em> könnte sein: „Mach’s doch gleich!“, oder: „Wir mussten etwas dagegen tun“. Eine Person oder Software, die den Text liest, würde die kursiv gedruckten Wörter mit einer Betonung aussprechen und dabei verbale Betonung verwenden.
Ein Beispiel für <i> könnte sein: „Die Queen Mary segelte gestern Abend“. Hier wird dem Wort „Queen Mary“ keine zusätzliche Betonung oder Bedeutung beigemessen. Es wird lediglich darauf hingewiesen, dass es sich nicht um eine Königin namens Mary, sondern um ein Schiff namens Queen Mary handelt. Ein anderes Beispiel für <i> könnte sein: „Das Wort the ist ein Artikel“.