HTML-Tag em, strong, b und i

HTML strong, HTML em

em-, strong-, i- und b-Element (kursiv und fett) betonen ein Wort oder einen Ausdruck. Die Browser heben den Begriff durch fette oder kursive Schrift hervor oder betonen ihn bei der Sprachausgabe stärker.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

HTML inline – kein Zeilenumbruch

Zwischenzeitlich sollte em das ältere i-Tag und strong das ältere b-Tag ersetzen, aber HTML behält die praktisch kleinen Tags.

em, i, b und strong sind Inline-Elemente, d.h. sie führen nicht zu einem Zeilenumbruch innerhalb eines Textes und dürfen keine Blockelemente wie p, table oder div enthalten.

HTML em-Tag
Leichte Betonung eines Textes

Die Tags em und i betonen ein eingeschlossenes Wort oder Ausdruck. Die Browser stellen den eingeschlossenen Text in einer kursiven Schrift dar. In der Sprachsynthese wird ein Text in em leicht betont ausgesprochen, ein Text in i mit einer anderen Stimme.

Das i-Tag und das em-Tag <em>betonen</em> einen Text.

Anstelle des em-Elements kann die CSS-Eigenschaft font-style einen Text in kursiver Schrift darstellen, aber em und i sind semantischer Natur: Sie stellen einen Fachausdruck, ein Wort in einer anderen Sprache oder ein kleines, nicht bibleografisches Zitat heraus.

Typische Anwendungen für die leichte Betonung durch kursive Schrift sind Buchtitel wie Terry Pratchett Und ab die Post, neue Begriffe und Bezeichnungen in Fachartikeln wie »Bei Conus marmorreus ist schwer zu entscheiden …«, die Bezeichnungen von Abbildungen oder Ausgaben wie »… veröffentlicht inThe Electronic Library«. Wer diese Passagen vorliest, würde die Stimme leicht anheben.

HTML-Tag strong-Tag / b-Tag
Starke Betonung eines Textes

strong und em betonen ein Wort oder Text stärker und geben ihm ein höheres Gewicht – sie sollen die Aufmerksamkeit des Lesers erhöhen. Die Browser stellen den eingeschlossenen Text in fetter Schrift dar, die Sprachausgabe erhöht die Lautstärke.

Anstelle von strong und b kann CSS-Eigenschaft font-weight benutzt werden, um einen Text in fetter Schrift typografisch darstellen. Aber einfach fetter Schrift fehlt die Bedeutung – die Semantik – und fett gestellter Text würde in der Sprachausgabe nicht betont.

Das b-Tag und das strong-Tag <strong>betonen</strong> einen Text.

Sowohl strong und em als auch i und b sind semantischer Natur.

Beispiele

Die Äste von Rosen sind mit Stacheln besetzt, die im Volksmund als Dornen bezeichnet werden.

Ein altes Sprichwort sagt: Wer barfuß geht, darf keine Dornen säen.

Die Äste von Rosen sind mit Stacheln besetzt, 
die im Volksmund als <em>Dornen</em> bezeichnet werden.
Ein altes Sprichwort sagt: <em>Wer barfuß geht, darf keine Dornen säen</em>.

Reinigungs- und Desinfektionsmittel dürfen weder zu alkalisch noch zu sauer sein.

Es folgt das Texturing, aber vor der Messung muss man die Probe wieder alkalisch machen.

Reinigungs- und Desinfektionsmittel dürfen <strong>weder</strong> zu alkalisch 
<strong>noch</strong> zu sauer sein.
Es folgt das Texturing, aber <strong>vor der Messung muss 
man die Probe wieder alkalisch machen</strong>.

Der Unterschied zwischen strong und em liegt im Gewicht. Während em eher als besonderer Hinweis gedeutet wird, steht strong für einen wichtigen Hinweis, z.B. für Warnungen: Achtung! Bissiger Hund!

HTML mark

Zu den Betonungen ist mit HTML ein weiteres Element hinzugekommen: Das HTML mark weist einer Textpassage eine besondere Relevanz im aktuellen Zusammenhang zu.

Die Browser unterlegen Text innerhalb eines mark-Elements mit gelber Hintergrundfarbe.