<i>

Zuletzt aktualisiert am 3. Februar 2026

Das <i>-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 <i> standardmäßig kursiv dar, aber anders als <em> 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 <i> die richtige Wahl ist und worin der Unterschied zu <em> liegt.

Grundlagen

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

• <i> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <i> standardmäßig kursiv (font-style: italic) dar
• Es kennzeichnet Text in einer anderen Stimme oder Stimmung, nicht eine Betonung
• Laut HTML-Spezifikation eignet sich <i> 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 <em> statt <i>
• Das lang-Attribut kann bei Fremdwörtern ergänzt werden, um die Sprache des Textes anzugeben

Syntax

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

Beispiele

Fremdwort im Text

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

<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>

i vs. em: der Unterschied

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

<!-- 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>

Gedanken einer Person

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

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

Barrierefreiheit

• Screenreader-Verhalten: Die meisten Screenreader ignorieren <i> und lesen den Text ohne besondere Betonung oder Ankündigung vor. Wenn du eine hörbare Betonung willst, verwende <em> statt <i>.
• lang-Attribut nutzen: Bei Fremdwörtern solltest du das lang-Attribut setzen (z.B. <i lang="fr">bonjour</i>). Screenreader können dann die korrekte Aussprache verwenden, wenn sie mehrere Sprachen unterstützen.
• Kein Bedeutungsverlust: Da <i> 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

• 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 <em>. <i> 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 <i>. Das Element sollte für semantisch abgehobenen Text reserviert sein.

• i für Icons verwenden: Viele Icon-Bibliotheken wie Font Awesome nutzen <i class="fa-icon"> als Icon-Container. Das ist eine verbreitete Konvention, aber semantisch nicht korrekt. Besser wäre ein <span> mit entsprechendem aria-label oder ein SVG-Element.

Browser-Kompatibilität

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

Email-Kompatibilität

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

Verwandte Elemente