<em>
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.
- Kategorie
- Text & Typografie
- Art
- Inline
- Beispiele
- 3
- Browser
- 5 von 5
- 5 von 5
- Stand
- 03.02.2026
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
3 BeispieleHier 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> 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>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
3 Punkte- 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
3 Punkte-
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 CSSfont-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
5 von 5Das em-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 5Das em-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
Newsletter
einmal die Woche, kostenlosNeue 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