Betonung und Hervorhebung

Manche Wörter sollen herausstechen. HTML unterscheidet dabei, warum ein Wort hervorgehoben wird, nicht nur wie es aussieht. Das ist der ganze Unterschied zwischen den Elementen dieser Lektion, und er ist größer, als die Seite vermuten lässt.

01 / 03strong und em

strong bedeutet wichtig. Es markiert etwas, das der Leser auf keinen Fall überlesen soll: eine Warnung, eine Frist, eine Bedingung.

em bedeutet betont, das kommt vom englischen emphasis. Es markiert das Wort, auf dem beim Vorlesen die Stimme liegt.

<p><strong>Achtung:</strong> Der Zug fährt <em>pünktlich</em> ab.</p>

Beide zusammen in einem Satz: „Achtung“ ist wichtig, „pünktlich“ ist das betonte Wort.

Wie stark em den Sinn verändert, sieht man am besten dreimal hintereinander:

<p><em>Ich</em> habe das nicht gesagt.</p>
<p>Ich habe <em>das</em> nicht gesagt.</p>
<p>Ich habe das <em>nicht</em> gesagt.</p>

Dreimal derselbe Satz, dreimal ein anderes betontes Wort, dreimal eine andere Aussage. Beim ersten geht es darum, wer es nicht gesagt hat, beim zweiten darum, was, beim dritten wird es zum Dementi. Genau diese Information trägt em, und deshalb ist es eben nicht nur Schrägschrift.

Eine Einschränkung dazu, die in vielen Anleitungen fehlt: Die gängigen Screenreader kündigen strong und em in ihrer Grundeinstellung nicht an. Man kann das einschalten, kaum jemand tut es. Der Gewinn liegt trotzdem fest, nur woanders: Die Bedeutung steht damit im Dokument statt nur in der Schriftdicke. Sie bleibt erhalten, wenn CSS später aus dem Fettdruck etwas ganz anderes macht, und wer die Ansage in seinem Screenreader eingeschaltet hat, bekommt sie zu hören. Für Suchmaschinen macht es dagegen keinen Unterschied, Google behandelt strong wie b.

02 / 03Warum es b und i trotzdem gibt

Es gibt auch b und i. Hier stehen sie direkt daneben:

<p><strong>Wichtig</strong> und <em>betont</em></p>
<p><b>Nur fett</b> und <i>nur kursiv</i></p>

Auf der Seite sind beide Zeilen nicht zu unterscheiden, fett ist fett und kursiv ist kursiv.

Der Unterschied liegt darunter. strong und em tragen Bedeutung, b und i machen nur fett und kursiv. Tausch im ersten Beispiel strong gegen b und em gegen i: Auf der Seite ändert sich nichts, in der Bedeutung alles. Im Dokument steht danach nur noch „hier ist etwas fett“, und wer wissen will, was an dieser Stelle wichtig ist, findet die Antwort nirgends mehr.

Warum gibt es die beiden dann? Weil es Fälle gibt, in denen etwas anders aussieht, ohne wichtiger zu sein. Ein Fachbegriff bei seiner ersten Nennung, ein Schiffsname, ein fremdsprachiger Ausdruck: kursiv nach Konvention, nicht aus Betonung. Dafür ist i gedacht, und b für Schlüsselwörter, die sich abheben sollen, ohne dringlich zu sein.

Ehrlicherweise brauchst du das selten. Die Faustregel für den Alltag: Wenn dir nicht auf Anhieb einfällt, warum es b sein müsste, ist es strong. Und wenn du „das soll nur fett aussehen“ denkst, ist es weder das eine noch das andere, sondern eine Aufgabe für CSS.

03 / 03mark, der Textmarker

Das dritte Element ist mark. Es hebt Text hervor, weil er im aktuellen Zusammenhang gerade relevant ist, so wie ein Textmarker auf Papier. Der typische Fall ist die Trefferhervorhebung in einer Suche:

<p>Deine Suche nach „Linsen“: Für die <mark>Linsen</mark>suppe brauchst du rote <mark>Linsen</mark>.</p>

Der Unterschied zu strong ist fein, aber nachvollziehbar. strong heißt „das ist an sich wichtig“, also für jeden Leser und immer. mark heißt „das ist jetzt gerade für dich interessant“, weil du danach gesucht hast oder weil in einem Zitat auf genau diese Stelle Bezug genommen wird.

Damit hast du die drei beisammen. Die Frage, die dich zur richtigen Wahl führt, ist immer dieselbe: Warum hebe ich das hervor? Antwortest du „damit es fett aussieht“, ist die Antwort CSS. Antwortest du mit einem Grund aus dem Inhalt, steht das passende Element schon bereit.