<strong>
Das <strong>-Element markiert Text als besonders wichtig, nicht einfach nur “fett”, sondern inhaltlich gewichtig. Ein Screenreader kann diese Wichtigkeit durch eine veränderte Betonung beim Vorlesen ausdrücken. Wenn du willst, dass ein Wort oder Satz hervorsticht, weil es wirklich wichtig ist (und nicht nur optisch auffällig), dann ist <strong> dein Element. Auf dieser Seite erfährst du den Unterschied zu <b> und wann du welches Element einsetzen solltest.
- Kategorie
- Text & Typografie
- Art
- Inline
- Beispiele
- 3
- Browser
- 5 von 5
- 5 von 5
- Stand
- 03.02.2026
Grundlagen
<strong> und <b> sehen im Browser identisch aus: Beide machen Text fett. Der entscheidende Unterschied liegt in der Bedeutung: <strong> sagt “dieser Text ist wichtig”, während <b> nur “dieser Text soll optisch hervorgehoben werden” bedeutet.
<strong>ist ein Inline-Element: Es unterbricht den Textfluss nicht und fließt im Satz mit- Browser stellen
<strong>standardmäßig fett (font-weight: bold) dar - Die Bedeutung ist semantisch: Es drückt starke Wichtigkeit oder Dringlichkeit aus
- Screenreader können
<strong>durch veränderte Betonung hervorheben, bei<b>passiert das nicht - Du kannst
<strong>verschachteln, um die Wichtigkeit weiter zu steigern:<strong><strong>sehr wichtig</strong></strong>
Syntax
<p>Bitte <strong>nicht</strong> den roten Knopf drücken.</p>Beispiele
3 BeispieleEin typischer Einsatz: In einem Hinweis oder einer Anleitung soll ein wichtiger Teil besonders hervorstechen:
<p>
<strong>Achtung:</strong> Änderungen können nicht rückgängig gemacht werden.
Stelle sicher, dass du ein Backup hast.
</p>Hier siehst du den Unterschied zwischen <strong> (semantische Wichtigkeit) und <b> (rein visuell). Beide sehen gleich aus, aber die Bedeutung für Screenreader und Suchmaschinen ist verschieden:
<!-- strong: Das Datum ist wichtig, der Nutzer soll es nicht übersehen -->
<p>Der Vertrag endet am <strong>31. März</strong>.</p>
<!-- b: Der Name ist optisch hervorgehoben, aber nicht "wichtig" -->
<p>Das Restaurant heißt <b>Bella Italia</b>.</p>Wenn etwas sowohl wichtig als auch betont ist, kannst du <strong> und <em> kombinieren:
<p>Du musst die Datei <strong><em>vor</em></strong> dem Update sichern.</p>Barrierefreiheit
3 Punkte- Screenreader-Verhalten: Viele Screenreader ändern die Stimmlage oder Betonung bei
<strong>, um die Wichtigkeit hörbar zu machen. Bei<b>passiert das in der Regel nicht. - Nicht übertreiben: Wenn du halbe Absätze in
<strong>packst, verliert die Hervorhebung ihre Wirkung. Markiere nur die wirklich wichtigen Teile. - Kein Ersatz für Überschriften: Verwende
<strong>nicht, um Überschriften zu simulieren. Dafür gibt es<h1>bis<h6>.
Häufige Fehler
3 Punkte-
strong statt CSS verwenden: Wenn du Text nur optisch fett darstellen willst (z.B. einen Produktnamen), verwende
<b>oder CSSfont-weight: bold.<strong>ist für inhaltliche Wichtigkeit reserviert, nicht für Styling. -
Ganze Absätze in strong packen: Wenn alles “wichtig” ist, ist nichts mehr wichtig. Beschränke
<strong>auf einzelne Wörter oder kurze Phrasen, die wirklich hervorstechen sollen. -
strong für Überschriften missbrauchen: Ein
<p><strong>Mein Titel</strong></p>sieht zwar wie eine Überschrift aus, wird aber von Screenreadern und Suchmaschinen nicht als solche erkannt. Verwende<h2>,<h3>etc. für echte Überschriften.
Browser-Kompatibilität
5 von 5Das strong-Element wird von allen Browsern seit den Anfängen des Webs unterstützt.
-
Chrome
Komplett
-
Firefox
Komplett
-
Safari
Komplett
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
5 von 5Das strong-Element wird in allen gängigen Email-Clients zuverlässig als fetter Text dargestellt.
-
Apple Mail
Komplett
-
Gmail
Komplett
-
Outlook
Komplett
-
Thunderbird
Komplett
-
Yahoo Mail
Komplett
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da