Das -Element kennzeichnet Text, der sich vom umgebenden Fließtext in Ton oder Stimmung abhebt, zum Beispiel Fachbegriffe, Fremdwörter, Gedanken einer Person oder taxonomische Bezeichnungen. Browser stellen  standardmäßig kursiv dar, aber anders als  drückt es keine inhaltliche Betonung aus. Es sagt nicht “dieses Wort ist betont”, sondern “dieses Wort gehört in eine andere Kategorie”. Auf dieser Seite lernst du, wann  die richtige Wahl ist und worin der Unterschied zu  liegt.

Steckbrief

Kategorie: Text & Typografie
Art: Inline
Beispiele: 3
Browser: 5 von 5
E-Mail: 5 von 5
Stand: 03.02.2026

Grundlagen

 und  sehen im Browser identisch aus: Beide machen Text kursiv. Der entscheidende Unterschied:  drückt eine Betonung aus, die den Sinn eines Satzes verändern kann, während  Text markiert, der sich in irgendeiner Weise vom restlichen Text abhebt.

 ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
Browser stellen  standardmäßig kursiv (font-style: italic) dar
Es kennzeichnet Text in einer anderen Stimme oder Stimmung, nicht eine Betonung
Laut HTML-Spezifikation eignet sich  für: Fachbegriffe, Fremdwörter, Gedanken, Schiffsnamen, taxonomische Bezeichnungen (z.B. Homo sapiens)
Wenn du ein Wort betonen willst, um den Sinn eines Satzes zu verändern, verwende  statt 
Das lang-Attribut kann bei Fremdwörtern ergänzt werden, um die Sprache des Textes anzugeben

Syntax

index.html

Grundsyntax

<p>Das Wort <i>Kindergarten</i> wird auch im Englischen verwendet.</p>

Beispiele

3 Beispiele

Wenn ein Wort aus einer anderen Sprache in den Text einfließt, ist  die passende Wahl. Optional kannst du mit dem lang-Attribut die Sprache des Wortes angeben:

index.html

Fremdwörter

<p>
  Das Konzept des <i lang="fr">savoir-vivre</i>
  beschreibt die französische Lebensart.
</p>

<p>
  In Japan ist <i lang="ja">Ikigai</i>
  die Suche nach dem Sinn des Lebens.
</p>

Beide sehen kursiv aus, aber die Bedeutung ist verschieden.  verändert die Betonung und damit potenziell den Sinn,  markiert nur einen anderen Kontext:

index.html

i vs. em

<!-- em: Betonung, "jetzt" wird hervorgehoben, der Sinn ändert sich -->
<p>Du musst das <em>jetzt</em> erledigen.</p>

<!-- i: Taxonomische Bezeichnung, kein Betonungswechsel, anderer Kontext -->
<p>Die Gattung <i>Tyrannosaurus rex</i> lebte in der Kreidezeit.</p>

In literarischen Texten oder Erzählungen kann  verwendet werden, um innere Gedanken darzustellen:

index.html

Innere Gedanken

<p>
  Er sah auf die Uhr.
  <i>Noch fünf Minuten</i>, dachte er,
  <i>dann ist es soweit.</i>
</p>

Barrierefreiheit

3 Punkte

Screenreader-Verhalten: Die meisten Screenreader ignorieren  und lesen den Text ohne besondere Betonung oder Ankündigung vor. Wenn du eine hörbare Betonung willst, verwende  statt .
lang-Attribut nutzen: Bei Fremdwörtern solltest du das lang-Attribut setzen (z.B. bonjour). Screenreader können dann die korrekte Aussprache verwenden, wenn sie mehrere Sprachen unterstützen.
Kein Bedeutungsverlust: Da  keine semantische Betonung transportiert, geht für Screenreader-Nutzer keine wichtige Information verloren. Die kursive Darstellung ist in den meisten Fällen ein rein visuelles Stilmittel.

Häufige Fehler

3 Punkte

i statt em für Betonung verwenden: Wenn du ein Wort hervorheben willst, um den Sinn eines Satzes zu verändern (“Du musst das jetzt tun”), verwende .  drückt keine Betonung aus, es markiert nur Text, der sich vom Fließtext abhebt.
i für reines Styling: Wenn du Text nur aus optischen Gründen kursiv darstellen willst (z.B. Bildunterschriften), verwende CSS font-style: italic statt . Das Element sollte für semantisch abgehobenen Text reserviert sein.
i für Icons verwenden: Viele Icon-Bibliotheken wie Font Awesome nutzen  als Icon-Container. Das ist eine verbreitete Konvention, aber semantisch nicht korrekt. Besser wäre ein  mit entsprechendem aria-label oder ein SVG-Element.

Browser-Kompatibilität

5 von 5

Das i-Element wird von allen Browsern seit den Anfängen des Webs unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

5 von 5

Das i-Element wird in allen gängigen Email-Clients zuverlässig als kursiver Text dargestellt.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Komplett
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<i>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter