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