HTML <em>-Tag
Das HTML <em>-Tag markiert Betonungshervorhebungen, verändert die Satzbedeutung und die Sprachausgabe von Screenreadern. Syntax, Barrierefreiheit, Beispiele.
Das HTML-Tag <em> markiert Betonungshervorhebungen — den Teil eines Satzes, den man beim Sprechen mit extra Nachdruck betonen würde, da die Betonung die Bedeutung eines Satzes verändern kann. Es ist ein semantisches Element: die kursive Darstellung, die Browser anzeigen, ist nur der Standardstil, nicht der eigentliche Zweck des Tags.
Lesen Sie diese beiden Sätze laut vor und beachten Sie, wie die Betonung die Bedeutung verändert:
<p><em>Cats</em> are great pets.</p> <!-- Cats specifically, not other animals -->
<p>Cats are <em>great</em> pets.</p> <!-- how great they are -->Da <em> Bedeutung trägt und nicht nur Erscheinung vermittelt, gehört es zum Phrasing Content von HTML — Inline-Elemente, die die Struktur und Absicht von Fließtext auszeichnen.
<em> ist nicht austauschbar mit einem CSS-Kursivstil. Verwenden Sie <em>, wenn die Hervorhebung Teil der Bedeutung des Textes ist; greifen Sie auf font-style: italic zurück, wenn Sie nur geneigten Text ohne Bedeutungsänderung möchten.
Warum <em> statt CSS-Kursivschrift verwenden (Barrierefreiheit)
Der Grund, <em> statt visueller Gestaltung zu wählen, ist Barrierefreiheit und Semantik. <em> trägt eine definierte Bedeutung — Betonungshervorhebung —, die laut HTML-Spezifikation von assistiven Technologien vermittelt werden soll, und diese Bedeutung bleibt im Markup erhalten, wo Werkzeuge, Suchmaschinen und zukünftige User Agents darauf reagieren können. Reiner kursiver Text, der per CSS gestaltet ist, vermittelt nichts Semantisches: Es ist ein rein visueller Effekt. (In der Praxis ändern heutige gängige Screenreader die Sprachbetonung für <em> standardmäßig noch nicht, aber die semantische Unterscheidung ist dennoch wichtig und kostet nichts.)
Dies ist der wesentliche Unterschied zum <i>-Tag: <i> wird ebenfalls standardmäßig kursiv dargestellt, trägt aber explizit keine Betonungshervorhebung. Es ist für Text in einer anderen Stimme oder Stimmung gedacht (Fachbegriffe, Fremdwörter, Taxonamen, Gedanken) — nicht zum Hervorheben von Bedeutung.
Wenn Sie etwas als wichtig statt als betont kennzeichnen möchten, verwenden Sie stattdessen <strong> — <strong> signalisiert starke Wichtigkeit, Ernst oder Dringlichkeit, während <em> Betonungshervorhebung signalisiert. Beide sind unabhängig voneinander und können kombiniert werden.
Verschachteln von <em> für stärkere Betonung
Laut HTML-Spezifikation erhöht jede Ebene von verschachteltem <em> den Grad der Betonung. Dies ist nützlich, wenn ein betontes Wort innerhalb eines bereits betonten Ausdrucks noch weiter hervorgehoben werden soll:
<p><em>Please, <em>do</em> remember to call.</em></p>Hier ist der gesamte Ausdruck betont, und das Wort „do" ist um eine Ebene stärker betont. Browser stellen weiterhin alle Ebenen standardmäßig kursiv dar, aber die Verschachtelung kommuniziert den zunehmenden Betonungsgrad an assistive Technologien und andere Werkzeuge, die die Dokumentstruktur lesen.
Syntax
Das <em>-Tag wird als Paar verwendet. Der Inhalt wird zwischen dem öffnenden (<em>) und schließenden (</em>) Tag geschrieben.
Beispiel für das HTML-Tag <em>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>It is a normal paragraph</p>
<p>The important part of the text is <em>shown in italic</em>.</p>
</body>
</html>Ergebnis
Attribute
Das <em>-Tag unterstützt die Globalen Attribute und die Ereignis-Attribute.
Styling des <em>-Tags
Da die Bedeutung im Tag liegt, liegt die Erscheinung vollständig in Ihrer Hand und kann mit CSS gesteuert werden. Die standardmäßige Kursivschrift ist nur eine Konvention — Sie können <em> für ein bestimmtes Design umgestalten und dabei Semantik und Barrierefreiheit erhalten.
Zum Beispiel können Sie in einem Kontext, in dem Kursivschrift mit dem Rest der Seite kollidiert, die Hervorhebung stattdessen als fetten roten Text darstellen:
<style>
.notice em {
font-style: normal; /* drop the default slant */
font-weight: bold;
color: #c0392b; /* draw the eye with color */
}
</style>
<p class="notice">You <em>must</em> save before closing the editor.</p>Das Wort „must" hat für Screenreader weiterhin eine Betonungshervorhebung — nur seine visuelle Darstellung hat sich geändert. Diese Entkopplung von Bedeutung (<em>) und Präsentation (CSS) ist genau der Grund, warum das semantische Tag es wert ist, verwendet zu werden.