HTML Grundlagen: Was ist der Unterschied zwischen <em> und <i>?

EM vs. I – Was ist der Unterschied?

Die Ausgabe der HTML Tags EM und I wird vom Web-Browser in gleicher Weise dargestellt. Beide Tags stellen den Text kursiv dar. Es gibt aber einen entscheidenden Unterschied zwischen den beiden HTML Elementen.

HTML <em> TagDas HTML EM Tag hat im Gegensatz zum I Tag eine semantische, das heißt inhaltliche Bedeutung. Text, der mit dem EM Tag (em für Englisch »emphasis«) ausgezeichnet wird, ist wichtig und soll betont werden. Betonter Text wird mit <em> eingeleitet und muss mit </em> abgeschlossen werden. Der mit EM ausgezeichnete Text wird im Schriftbild in der Regel kursiv gedruckt dargestellt. Der mit EM ausgezeichnete Text wird aber nicht zwangsläufig in jedem Web-Browser kursiv gedruckt.

HTML <i> TagDas HTML I Tag (i für Englisch »italic«) hat keine semantische Bedeutung, sondern ist nur eine visuelle Formatierung. Kursiv gedruckter Text wird mit <i> eingeleitet und muss mit </i> abgeschlossen werden. Das I Tag wird verwendet, wenn Text kursiv gedruckt dargestellt werden soll, aber nicht betont wird.

Die HTML Elemente EM und I sind Inline-Elemente, sie erzeugen keinen automatischen Zeilenumbruch.

Beispiel

Besonders betonter Text wird mit dem <em> Tag erzeugt.

<em>Dieser Text wird besonders betont.</em>Ausgabe des HTML CodesDieser Text wird besonders betont.Kursiv gedruckter Text ohne besondere Bedeutung wird mit dem <i> Tag erzeugt.<i>Dieser Text wird kursiv gedruckt.</i>Ausgabe des HTML CodesDieser Text wird kursiv gedruckt.Hinweise

Vermeide Doppel-Auszeichnungen wie

<em><strong>Dieser Text ist wichtig und soll stark betont werden.</strong></em>Ausgabe des HTML CodesDieser Text ist wichtig und soll stark betont werden.oder<strong><em>Dieser Text ist wichtig und soll stark betont werden.</em></strong>Ausgabe des HTML CodesDieser Text ist wichtig und soll betont stark werden.

Das STRONG Tag hat eine höhere Wertigkeit als das EM Tag. Verwende statt <strong> besser <b>, wenn betonter Text kursiv und fett gedruckt dargestellt werden soll. Optimal ist diese Form:

<em><b>Dieser Text wird stark betont und soll fett gedruckt werden.</b></em>Ausgabe des HTML CodesDieser Text wird stark betont und soll fett gedruckt werden.Vermeide Auszeichnungen wie<em><i>Dieser Text wird stark betont und soll kursiv gedruckt werden.</i></em>oder<i><em>Dieser Text wird stark betont und soll kursiv gedruckt werden.</em></i>

Solche Konstruktionen können als Spam interpretiert werden.