Früher war alles einfacher. Wichtig? Dann einfach den Textmarker gezückt. Gelb für ganz wichtig, Pink für „Muss ich nachschlagen“. Und das war’s. Heute? Da schreiben wir Websites mit HTML. Und plötzlich stehen wir vor der Wahl: <strong> oder doch lieber <b>? Kursiv mit <i> oder <em>?
HTML kennt viele Wege, Text hervorzuheben. Aber nicht alle bedeuten das Gleiche. Und nicht alle sind barrierefrei. In diesem Beitrag bringen wir Ordnung in die Marker-Schublade des Webs. und da gibt es noch viel mehr Elemente, als Sie vielleicht denken.
Mit HTML fett/bold schreiben – strong vs. b
Das ist fett. Das fällt auf.
Was früher der dicke Filzstift war, ist im Web das fette Wort, oft auch englisch schlicht als bold bezeichnet. Es springt ins Auge. Es signalisiert: Achtung, das hier ist wichtig! Kein Wunder also, dass wir in HTML gerne zu den typischen „Bold“-Tags greifen.
Doch fett ist nicht gleich wichtig – zumindest nicht für Maschinen. Und genau deshalb reicht es nicht, einfach alles mit <b> auszuzeichnen, was betont werden soll. Wer Inhalte sinnvoll strukturieren und zugänglich machen möchte, greift besser zu semantisch korrekten Mitteln.
<b> – fett, aber ohne Bedeutung
Das <b>-Element wird verwendet, um Text ohne besondere Betonung visuell hervorzuheben. Es macht den Text also fett, sagt dabei aber nichts über die Wichtigkeit oder Funktion dieses Textes aus. Der Text sieht zwar betont aus, bleibt für Screenreader und andere assistive Technologien aber neutral. Ein Wort in <b> wird vorgelesen wie jedes andere – ohne Betonung, ohne Hinweis auf besondere Relevanz. <b> sagt also einfach nur: „Guck mal hier.“
Zur Dokumentation des HTML-Elements <b>
<strong> – wichtig, und zwar richtig
Ganz anders das <strong>-Element. Es signalisiert, dass ein Inhalt stark betont und von besonderer Bedeutung ist. Es geht also nicht nur um Aussehen, es geht um Inhalt. Der Text innerhalb von <strong> wird deshalb auch von Screenreadern häufig mit einer veränderten Stimmlage oder zusätzlichem Hinweis vorgelesen – etwa „Wichtig:“ davor. <strong> will einem also sagen: „Das solltest du nicht verpassen.“. So wissen auch Nutzer, die nicht sehen, dass hier etwas von Bedeutung steht.
Zur Dokumentation des HTML-Elements <strong>
Kann ich das auch als Überschrift nutzen?
Immer wieder begegnen mir auf den Websites von Kunden Texte, an denen <strong> und <b> anstatt einer Überschrift verwendet wurden. Man wollte schon eine Überschrift, aber eine kleine. Nicht diese großen Dinger, die der Designer vorgesehen hat. Und anstatt den Designer zu fragen, wurde improvisiert. Dabei ist der korrekte Einsatz insbesondere von Überschriften für die Barrierefreiheit und auch Suchmaschinenoptimierung besonders wichtig.
Mehr Informationen dazu im Artikel Gliederung von Texten – großer Text macht noch keine Überschrift.
Kursive Schrift direkt aus dem HTML – i und em im Vergleich
Ich bin besonders, aber bitte ohne Trommelwirbel.
Kursiv – das kennt man aus Büchern, Zeitungen und natürlich auch aus dem Web. Ursprünglich diente kursive Schrift dazu, bestimmte Passagen hervorzuheben, ohne dabei laut zu wirken. Im Layout wirkt sie oft eleganter oder hebt etwas stilistisch hervor. In Büchern sehe ich es häufiger, wenn Personen etwas denken, anstatt es zu sagen.
Doch auch bei kursiver Schrift gilt: Nicht alles, was schräg aussieht, ist inhaltlich betont – und deshalb gibt es auch hier zwei HTML-Elemente mit ganz unterschiedlicher Bedeutung.
<i> – von italic zu semantisch
Das <i>-Element stand ursprünglich für italic, also kursiv. Damit war es einfach ein rein visueller Befehl: Text im <i> wurde kursiv dargestellt, Punkt. Kein „Warum“, kein „Wichtig“, einfach nur eine Formatierung, analog zum <b>.
Mittlerweile hat <i> eine leichte semantische Verschiebung erfahren. Heute steht es für Text, der aus irgendeinem Grund von normalem Text abgesetzt ist (idiomatisch, das i bleibt erhalten). Dazu zählen technische Fachbegriffe, Sprichwörter oder Texte in einer anderen Sprache. Damit ist <i> nicht mehr nur „kursiv machen“, sondern signalisiert eine stilistische Abweichung.
Browser zeigen den Text in der Regel aber immer noch kursiv an. Sie müssen das aber nicht zwingend tun – denn die Semantik zählt, nicht nur das Aussehen. Man sollte sich also nicht darauf verlassen, Gestaltung wird im CSS gemacht.
Zur Dokumentation des HTML-Elements <i>
<em> – kursiv und betont
Ganz anders das <em>-Element, das für „emphasis“ steht. Es signalisiert, dass ein Wort oder Satzteil betont werden soll – also eine inhaltliche Hervorhebung. Auch Screenreader nutzen diese Betonung, sie ist aber leichter als beim <strong>-Element.
Optisch wird <em> meist kursiv dargestellt, aber auch hier geht es um die Bedeutung, nicht nur um das Aussehen. Im Gegensatz zu <i> ist das Ziel von <em>, die Aufmerksamkeit auf die Bedeutung zu lenken.
Zur Dokumentation des HTML-Elements <em>
Text durchstreichen – Die HTML-Tags s, del und ins kennenlernen
Der Text war spitze, die Katze hat ihn gefressen und jetzt ist alles improvisiert.
Manchmal möchte man Text durchstreichen, um anzuzeigen, dass etwas nicht mehr gilt, geändert wurde oder ergänzt wurde. Dafür gibt es im HTML gleich mehrere Tags: <s>, <del> und <ins>.
Das <s>-Element zeigt an, dass der Text nicht mehr relevant ist, also quasi veraltet oder überholt. Der Inhalt bleibt – oft für Vergleiche – aber sichtbar. Das könnte zum Beispiel der Originalpreis eines rabattierten Artikels in einem Online-Shop sein.
Das <del>-Tag dagegen macht deutlich, dass der Text aus dem Dokument entfernt wurde. Stellen Sie sich eine Änderungsverfolgung in Word vor. Der Text wurde gelöscht, ich kann mir diese Änderung aber anzeigen lassen. Kurz gesagt: <s> steht für „veraltet“, <del> für „entfernt“.
Das <ins>-Element ist quasi das Gegenstück zu <del> und zeigt an, dass hier Text hinzugefügt wurde.
Alle drei Elemente sind semantisch, das heißt, sie transportieren Bedeutung über das reine Aussehen hinaus In diesem Fall sind es die impliziten Rollen deletion und insertion. Trotzdem haben sie nicht zwingend einen Einfluss darauf, wie Screenreader den Text vorlesen. Einige Screenreader ignorieren die Angaben ganz, auch durchgestrichener Inhalt wird dort also vorgelesen als wäre nichts gewesen. Andere ergänzen es durch zusätzliche, erklärende Ansagen. Möchte man sicher gehen, dass für Nutzer von Screenreadern klar wird, dass es sich hier um nicht relevanten Text handelt, hat man ein paar Möglichkeiten:
aria-hiddenam gelöschten Text, damit dieser garnicht erst vorgelesen wirdaria-labelmit einer eigenen Erläuterung- zusätzlicher (unsichtbarer) Text mit
::beforeund::after
Links zur Dokumentation der Elemente:
Textmarker im Web – das mark Element
Bitte beachte die wichtigen Hinweise in diesem Abschnitt.
Das <mark>-Element dient dazu, Textstellen hervorzuheben, die besonders relevant oder wichtig sind – oft wie mit einem Textmarker farblich hinterlegt. Es zeigt an, dass dieser Textabschnitt im Kontext aktuell hervorgehoben werden soll, z. B. als Suchtreffer oder wichtige Information.
Aber warte mal: besonders wichtigen Inhalt haben wir doch schon mit <strong> hervorgehoben, oder? Wozu ein zweites Element?
Formatierungen in den sozialen Medien
Auf klassischen Websites trägt Textformatierung enorm zur Verständlichkeit bei. Sie hilft, wichtige Inhalte hervorzuheben und dem Nutzer, sowie Screenreadern, Bedeutung zu vermitteln. In sozialen Medien sieht das leider anders aus: Die meisten Plattformen unterstützen keine echte Formatierung. Um dennoch fett, kursiv oder andere Stile darzustellen, greifen Nutzer oft auf externe Tools zurück, die Schriftzeichen in Sonderzeichen oder Unicode-Symbole umwandeln. Das ist technisch gesehen keine Schrift mehr, sondern eine Ansammlung von Symbolen, die wie Buchstaben aussehen.
Das Problem: Die meisten dieser Sonderzeichen werden von Screenreadern nicht erkannt oder vorgelesen, wodurch gerade die besonders wichtigen Hervorhebungen, wie fetter Text, komplett verloren gehen. Für Menschen mit Sehbehinderung wird der Text so häufig völlig unverständlich.
Deshalb gilt: Finger weg von formatiertem Text auf LinkedIn, Instagram & Co.! Nutzen Sie stattdessen klare, einfache Sprache, kurze Sätze und Absätze.
Mehr Informationen zu Barrierefreiheit in den sozialen Netzwerken und barrierefreie Social Media Posts gab es schon einmal im Blog.
Fazit – fett und kursiv sind mehr als nur Optik
Textformatierung im Web ist weit mehr als nur optische Gestaltung – sie schafft Struktur, Bedeutung und Barrierefreiheit. Semantisch korrekte HTML-Elemente wie <strong>, <em>, <del>, <ins> oder <mark> helfen allen Nutzern, Inhalte besser zu verstehen, besonders Menschen mit assistiven Technologien. Im Gegensatz dazu fehlt es vielen sozialen Netzwerken leider an echten Formatierungsmöglichkeiten, was dazu führt, dass Menschen improvisieren und wichtige Inhalte verloren gehen. Darunter leidet die Barrierefreiheit der Plattformen enorm. Vielleicht wird sich dort in den nächsten Jahren also noch etwas tun.