HTML Grundlagen: Text betonen – Was ist der Unterschied zwischen dem HTML EM und I-Tag?

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.

Das HTML <em> Tag

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

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.

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

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

Vermeide Doppel-Auszeichnungen wie

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:

Solche Konstruktionen können als Spam interpretiert werden.