CSS, HTML und Javascript mit {stil}

HTML-Tag em, strong, b und i
Text betonen oder hervorheben

HTML blockquote

em-Tag, strong-Tag, i- und b-Tag 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.

In XHTML sollte em das ältere i-Tag und strong das ältere b-Tag ersetzen. Dennoch sind i und b-Tag weiterhin Bestandteil von HTML: HTML5 behält die praktischen 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

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.

Anstelle des em-Tags 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.

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!

Am Rande

  • HTML span Inline-Formate für einen Bereich der Webseite
  • HTML small – das Kleingedruckte – das Gegenteil von strong?