html-einfach.de

Semantisches HTML · Inhalte auszeichnen

Textauszeichnung: strong, em, time, abbr & mehr

Von Zuletzt geändert am

Semantik endet nicht bei der Seitenstruktur. Auch mitten im Fließtext gibt es Elemente, die Bedeutung tragen – und Elemente, die nur das Aussehen ändern. Der Unterschied wirkt klein, entscheidet aber darüber, ob eine Hervorhebung auch „ankommt“, wenn niemand sie sieht. Genau hier trennt sich sauberes Markup vom bloßen Formatieren.

Bedeutung vs. reine Optik

Mehrere Elementpaare sehen im Browser fast gleich aus, meinen aber Unterschiedliches:

Bedeutungstragend Rein optisch Unterschied
<strong> <b> Wichtigkeit vs. nur fett
<em> <i> Betonung vs. nur kursiv
<mark> – Relevanz im aktuellen Kontext (Hervorhebung)
  • <strong> kennzeichnet inhaltliche Wichtigkeit („Achtung, das ist zentral“). <b> macht nur fett, ohne Bedeutung.
  • <em> markiert eine Betonung, die den Sinn verschieben kann („Ich habe heute keine Zeit“). <i> ist nur Schräglage, etwa für Fachbegriffe oder Werktitel.

Faustregel, die ich mir angewöhnt habe: Erst die Bedeutung benennen, dann zur optischen Variante (<b>, <i>) greifen, wenn wirklich keine dahintersteht.

Maschinenlesbare Angaben: <time> und <abbr>

Manche Elemente machen Inhalte gezielt für Software verständlich:

<p>
  Veröffentlicht am <time datetime="2026-06-26">26. Juni 2026</time>.
</p>
<p>
  Die <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> sind der
  zentrale Standard.
</p>
  • <time datetime="…"> liefert ein Datum in einem eindeutigen, normierten Format – unabhängig davon, wie es im Text geschrieben steht.
  • <abbr title="…"> hinterlegt die ausgeschriebene Form einer Abkürzung.

Randnotiz – wofür der ganze Aufwand? Solche Auszeichnungen richten sich nicht nur an Screenreader, die etwa eine Abkürzung ausschreiben können. Auch Web-Crawler (Suchmaschinen wie Googlebot) und KI-Crawler (z. B. GPTBot oder ClaudeBot) profitieren: Ein datetime-Attribut macht ein Veröffentlichungsdatum eindeutig auswertbar, ein <abbr> verbindet Kürzel und Langform. So lässt sich Inhalt verlässlicher einordnen – in der klassischen Suche wie in KI-Antworten. Den nächsten Schritt in diese Richtung gehen strukturierte Daten / Schema.org.

Weitere nützliche Inline-Elemente

  • <code> für Code im Fließtext, <kbd> für Tastatureingaben, <samp> für Programmausgaben.
  • <q> für ein kurzes Zitat im Satz, <blockquote> für ein längeres, <cite> für die Quellenangabe (Werktitel).
  • <dfn> kennzeichnet die Definition eines Begriffs an seiner Erstnennung.
  • <del> und <ins> für gelöschten bzw. eingefügten Text (etwa bei Korrekturen).
  • <s> für inhaltlich nicht mehr Zutreffendes (z. B. ein durchgestrichener alter Preis).

Ein Beispiel im Zusammenhang

<p>
  Mit <kbd>Tab</kbd> springst du zum nächsten Element. Der alte Preis von
  <s>49 €</s> beträgt jetzt <strong>29 €</strong> – gültig bis
  <time datetime="2026-12-31">Jahresende</time>.
</p>

Jedes Element hier trägt eine Aussage: eine Taste, ein überholter Wert, eine wichtige Information, ein konkretes Datum.

Häufige Fehler

  • <b>/<i> statt <strong>/<em>, obwohl eine Bedeutung dahintersteht.
  • Ganze Sätze in <strong>, wodurch die Wichtigkeit verwässert.
  • <abbr> ohne title – dann fehlt gerade die nützliche Zusatzinfo.
  • Datum nur als Text, ohne <time datetime>.
  • Visuelles Durchstreichen mit CSS, wo <del> oder <s> die Bedeutung transportieren sollte.

Häufige Fragen

Sind <b> und <i> verboten?

Nein. Sie sind richtig, wenn es keine besondere Bedeutung gibt – etwa ein kursiver Fachbegriff oder ein fett gesetztes Stichwort ohne besonderes Gewicht. Steht eine Bedeutung dahinter, sind <strong> und <em> korrekt.

Muss ich jede Abkürzung mit <abbr> auszeichnen?

Nicht zwingend, und schon gar nicht mehrfach im selben Text. Bei der ersten Nennung einer erklärungsbedürftigen Abkürzung finde ich es aber sinnvoll.

Fazit

Inline-Semantik ist Feinarbeit, aber sie lohnt sich: <strong> und <em> transportieren Wichtigkeit und Betonung, <time> und <abbr> machen Daten und Abkürzungen maschinenlesbar. Wer hier nach Bedeutung statt nach Optik auszeichnet, bleibt der Linie von Was ist semantisches HTML? treu – bis in den einzelnen Satz.