<em>

Zuletzt aktualisiert am 3. Februar 2026

Das <em>-Element gibt einem Textteil eine besondere Betonung: so, wie du beim Sprechen ein bestimmtes Wort hervorheben würdest, um den Sinn des Satzes zu verändern. Browser stellen <em> standardmäßig kursiv dar, aber der eigentliche Zweck ist semantisch: Die Betonung verändert die Bedeutung. Auf dieser Seite lernst du, wie <em> funktioniert, worin der Unterschied zu <i> liegt und wann du welches Element einsetzen solltest.

Grundlagen

Stell dir vor, du sagst den Satz “Ich habe das nicht gesagt”. Je nachdem, welches Wort du betonst, ändert sich die Bedeutung komplett. Genau das macht <em>: Es markiert den betonten Teil eines Satzes.

• <em> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <em> standardmäßig kursiv (font-style: italic) dar
• Die Bedeutung ist semantisch: Es drückt Betonung aus, die den Sinn eines Satzes beeinflussen kann
• Screenreader können <em> durch veränderte Intonation hervorheben. Bei <i> passiert das nicht
• Du kannst <em> verschachteln, um die Betonung zu verstärken

Syntax

<p>Das ist <em>wirklich</em> wichtig.</p>

Beispiele

Betonung verändert die Bedeutung

Hier siehst du, wie die Platzierung von <em> den Sinn eines Satzes komplett verändern kann:

<!-- Betonung auf "Ich" → Jemand anderes hat es gesagt -->
<p><em>Ich</em> habe das nicht gesagt.</p>

<!-- Betonung auf "nicht" → Ich habe es definitiv nicht gesagt -->
<p>Ich habe das <em>nicht</em> gesagt.</p>

<!-- Betonung auf "das" → Ich habe etwas anderes gesagt -->
<p>Ich habe <em>das</em> nicht gesagt.</p>

em vs. i: der Unterschied

<em> und <i> sehen im Browser gleich aus (kursiv), haben aber verschiedene Bedeutungen. <em> drückt Betonung aus, <i> kennzeichnet Text, der sich vom umgebenden Text abhebt, zum Beispiel Fachbegriffe, fremdsprachige Wörter oder Gedanken:

<!-- em: Betonung, das Wort "jetzt" ist betont -->
<p>Du musst das <em>jetzt</em> tun.</p>

<!-- i: Fremdsprachiger Begriff, keine Betonung, nur visuell abgehoben -->
<p>Das Wort <i>Kindergarten</i> wird auch im Englischen verwendet.</p>

em und strong kombinieren

Wenn Text sowohl betont als auch wichtig ist, kombiniere <em> und <strong>:

<p>Die Deadline ist <strong><em>morgen</em></strong>, nicht nächste Woche.</p>

Barrierefreiheit

• Screenreader-Verhalten: Einige Screenreader ändern die Intonation bei <em>, um die Betonung hörbar zu machen. Bei <i> geschieht das in der Regel nicht.
• Sparsam einsetzen: Wenn du zu viel Text betonst, verliert die Betonung ihre Wirkung, genau wie beim Sprechen, wenn jemand jedes zweite Wort betont.
• Kein Ersatz für strong: Wenn der Text nicht betont, sondern wichtig ist (z.B. eine Warnung), verwende <strong> statt <em>.

Häufige Fehler

• em statt i für visuelle Kursivierung: Wenn du Text nur kursiv darstellen willst, ohne eine inhaltliche Betonung auszudrücken (z.B. für Buchtitel, lateinische Begriffe), verwende <i> oder CSS font-style: italic.

• em für ganze Absätze: Einen ganzen Absatz in <em> zu packen, ergibt semantisch keinen Sinn. Betonung funktioniert nur, wenn sie gezielt eingesetzt wird: einzelne Wörter oder kurze Phrasen.

• Verwechslung von em und strong: <em> = Betonung (verändert den Sinn), <strong> = Wichtigkeit (hebt die Dringlichkeit hervor). Beide sehen unterschiedlich aus (kursiv vs. fett) und haben verschiedene Bedeutungen.

Browser-Kompatibilität

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

Email-Kompatibilität

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

Verwandte Elemente