HTML Grundlagen: em vs. i – Finde heraus, welche Textauszeichnung deinen Text zum Strahlen bringt

English

EM vs. I – Was ist der Unterschied?

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

Die beiden HTML-Tags em (für Englisch: Emphasis) und i (für Englisch: italic bzw. idiomatic) geben den Text normalerweise gleich formatiert aus. Beide HTML-Elemente geben den Text standardmäßig kursiv geschrieben aus. Aber es gibt einen entscheidenden Unterschied zwischen dem EM und I-Tag.

HTML Tag <em> vs. <i>

Das HTML EM-Tag hat im Gegensatz zum I-Tag eine eine semantische (d.h. inhaltliche) Bedeutung. Text, der mit dem EM-Tag ausgezeichnet wird, ist wichtig und soll betont werden. Betonter Text wird mit <em> eingeleitet und muss mit </em> abgeschlossen werden.

Mit EM ausgezeichneter Text wird im Schriftbild in der Regel kursiv dargestellt. Der auf diese Weise formatierte Text muss aber nicht in jedem Browser zwangsläufig kursiv dargestellt werden.

Das HTML I-Tag 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 (in HTML5: idiomatisch) wird verwendet, wenn einzelne Wörter oder ein ganzer Satz anders formatiert werden soll als der normale Text. Der so ausgezeichnete Text wird aber nicht besonders betont.

Beispiel

Betonter Text wird mit dem <em>-Tag erzeugt.

<em>Dieser Text wird besonders betont.</em>
Ausgabe des HTML Codes
Dieser Text wird besonders betont.
Beispiel

Kursiv gedruckter Text ohne besondere Bedeutung wird mit dem <i>-Tag erzeugt.

<i>Dieser Text wird kursiv gedruckt.</i>
Ausgabe des HTML Codes
Dieser 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 Codes
Dieser 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 Codes
Dieser Text ist wichtig und soll stark betont werden.

Das EM-Tag hat eine niedrigere Relevanz als das STRONG-Tag. Verwende statt <strong> besser <b>, wenn betonter Text durch kursive Schrift 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 Codes
Dieser 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.