Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

HTML-Element <em> zur Betonung

Baseline
Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <em>-Element von HTML kennzeichnet Text, der betont werden soll. Das <em>-Element kann verschachtelt werden, wobei jede Verschachtelungsebene eine stärkere Betonung anzeigt.

Probieren Sie es aus

<p>Get out of bed <em>now</em>!</p>

<p>We <em>had</em> to do something about it.</p>

<p>This is <em>not</em> a drill!</p>
em {
  /* Add your styles here */
}

Attribute

Dieses Element unterstützt nur die globalen Attribute.

Hinweise zur Verwendung

Das <em>-Element dient dazu, Wörter gegenüber dem umgebenden Text hervorzuheben. Die Betonung beschränkt sich häufig auf ein oder mehrere Wörter eines Satzes und beeinflusst die Bedeutung des Satzes selbst.

Dieses Element wird üblicherweise kursiv dargestellt. Es sollte jedoch nicht verwendet werden, um Text lediglich kursiv zu formatieren; verwenden Sie dafür die CSS-Eigenschaft font-style. Verwenden Sie das Element <cite>, um den Titel eines Werks (Buch, Theaterstück, Lied usw.) zu kennzeichnen. Verwenden Sie das Element <i>, um Text in einem anderen Tonfall oder einer anderen Stimmung zu kennzeichnen. Dazu gehören viele typische Anwendungsfälle für Kursivschrift, etwa wissenschaftliche Namen oder Wörter in anderen Sprachen. Verwenden Sie das Element <strong>, um Text zu kennzeichnen, der wichtiger ist als der umgebende Text.

<i> gegenüber <em>

Für manche Entwickler ist möglicherweise unklar, warum mehrere Elemente scheinbar ähnliche visuelle Ergebnisse erzeugen. <em> und <i> sind ein häufiges Beispiel, da beide Text kursiv darstellen. Was ist der Unterschied? Welches sollten Sie verwenden?

Standardmäßig ist das visuelle Ergebnis gleich. Die semantische Bedeutung ist jedoch unterschiedlich. Das Element <em> steht für eine Betonung seines Inhalts, während das Element <i> Text kennzeichnet, der sich vom normalen Fließtext abhebt, etwa ein fremdsprachiges Wort, Gedanken einer fiktiven Figur oder einen Fall, in dem sich der Text auf die Definition eines Wortes statt auf dessen Bedeutung bezieht. (Für den Titel eines Werks, etwa den Namen eines Buchs oder Films, sollte <cite> verwendet werden.)

Welches Element das richtige ist, hängt also vom jeweiligen Fall ab. Keines der beiden dient rein dekorativen Zwecken; dafür ist die Formatierung mit CSS vorgesehen.

Beispiele für <em> könnten sein:

html
<p>Just <em>do</em> it already!</p>
<p>We <em>had</em> to do something about it.</p>

Eine Person oder Software, die den Text vorliest, würde die kursiv dargestellten Wörter durch stärkere Betonung hervorheben.

Beispiele für <i> könnten sein:

html
<p>The word <i>the</i> is an article.</p>
<p>The <i>Queen Mary</i> sailed last night.</p>

Hier erhält „Queen Mary“ keine zusätzliche Betonung oder Bedeutung. Es wird lediglich angezeigt, dass es sich bei dem betreffenden Objekt nicht um eine Königin namens Mary, sondern um ein Schiff namens „Queen Mary“ handelt.

Beispiele

In diesem Beispiel wird das Element <em> verwendet, um einen impliziten oder expliziten Gegensatz zwischen zwei Zutatenlisten hervorzuheben:

html
<p>
  Ice cream is made with milk, sweetener, and cream. Frozen custard, on the
  other hand, is made of milk, cream, sweetener, and <em>egg yolks</em>.
</p>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Flow content, phrasing content, wahrnehmbarer Inhalt.
Zulässiger Inhalt Phrasing content.
Auslassen von Tags Keines; sowohl das Start- als auch das End-Tag sind erforderlich.
Zulässige Elternelemente Jedes Element, das phrasing content zulässt.
Implizite ARIA-Rolle emphasis
Zulässige ARIA-Rollen Beliebige
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement). Bis einschließlich Gecko 1.9.2 (Firefox 4) implementiert Firefox für dieses Element die Schnittstelle [`HTMLSpanElement`](/de/docs/Web/API/HTMLSpanElement).

Spezifikationen

Spezifikation
HTML
# the-em-element

Browser-Kompatibilität

Siehe auch