<b>

Zuletzt aktualisiert am 3. Februar 2026

Das <b>-Element macht Text visuell fett, ohne ihm eine besondere inhaltliche Bedeutung zu geben. Es lenkt die Aufmerksamkeit des Lesers auf bestimmte Wörter oder Phrasen, aber anders als <strong> drückt es keine Wichtigkeit oder Dringlichkeit aus. Typische Anwendungsfälle sind Produktnamen, Stichwörter in Zusammenfassungen oder Lead-Sätze. Auf dieser Seite lernst du, wann <b> die richtige Wahl ist, worin der Unterschied zu <strong> liegt und worauf du achten solltest.

Grundlagen

<b> und <strong> sehen im Browser identisch aus: beide machen Text fett. Der entscheidende Unterschied liegt in der Semantik: <strong> sagt “dieser Text ist wichtig”, während <b> nur sagt “dieser Text soll die Aufmerksamkeit auf sich ziehen”.

• <b> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <b> standardmäßig fett (font-weight: bold) dar
• Es hat keine semantische Bedeutung: Der Text wird nur visuell hervorgehoben, nicht als “wichtig” markiert
• Laut HTML-Spezifikation ist <b> für Text gedacht, der Aufmerksamkeit erregen soll, ohne eine besondere Relevanz oder Stimmung auszudrücken
• Typische Einsatzgebiete: Produktnamen, Stichwörter in Zusammenfassungen, Lead-Sätze in Artikeln
• Wenn der Text inhaltlich wichtig ist (z.B. eine Warnung), verwende stattdessen <strong>

Syntax

<p>Das Restaurant <b>Bella Italia</b> hat montags geschlossen.</p>

Beispiele

Produktname hervorheben

Ein klassischer Anwendungsfall: Der Name eines Produkts, einer Marke oder eines Ortes wird fett hervorgehoben, damit er beim Überfliegen des Textes sofort ins Auge fällt. Der Name ist nicht “wichtig” im Sinne einer Warnung, er soll einfach visuell auffallen:

<p>
  Mit dem <b>MacBook Pro</b> kannst du unterwegs arbeiten,
  während das <b>iPad Air</b> sich besser für Notizen eignet.
</p>

b vs. strong: der Unterschied

Hier siehst du den Unterschied in der Praxis. Beide sehen gleich aus, aber die Bedeutung ist verschieden. Ein Screenreader würde “strong” möglicherweise anders betonen, “b” dagegen nicht:

<!-- b: Der Name fällt auf, ist aber nicht "wichtig" -->
<p>Das Restaurant heißt <b>Bella Italia</b>.</p>

<!-- strong: Das Datum ist wichtig, der Nutzer soll es nicht übersehen -->
<p>Die Deadline ist am <strong>31. März</strong>, bitte nicht verpassen!</p>

Stichwörter in einer Zusammenfassung

In Zusammenfassungen oder Einleitungen werden häufig Schlüsselbegriffe fett hervorgehoben, damit Leser den Text schnell überfliegen können. Die Begriffe sind nicht “wichtig” im semantischen Sinn, sie dienen als visuelle Ankerpunkte:

<p>
  In diesem Tutorial lernst du die Grundlagen von <b>HTML</b>,
  <b>CSS</b> und <b>JavaScript</b>. Wir starten mit der Struktur
  einer Webseite und arbeiten uns bis zum interaktiven Layout vor.
</p>

Barrierefreiheit

• Screenreader-Verhalten: Die meisten Screenreader ignorieren <b> und lesen den Text ohne besondere Betonung oder Ankündigung vor. Wenn du willst, dass ein Screenreader die Hervorhebung kommuniziert, verwende <strong> stattdessen.
• Keine semantische Information: Da <b> keine Bedeutung transportiert, erfahren Nutzer von Screenreadern nicht, dass dieser Text visuell hervorgehoben ist. Das ist in den meisten Fällen auch in Ordnung: Produktnamen oder Stichwörter müssen nicht vorgelesen werden als “wichtig”.
• Nicht für Warnungen verwenden: Wenn eine Information wirklich wichtig ist und nicht übersehen werden darf, verwende <strong>. Nur so können assistive Technologien die Wichtigkeit kommunizieren.

Häufige Fehler

• b statt strong für wichtige Inhalte: Wenn ein Text inhaltlich wichtig ist (z.B. “Änderungen können nicht rückgängig gemacht werden”), verwende <strong>, nicht <b>. Nur <strong> teilt Screenreadern und Suchmaschinen die Wichtigkeit mit.

• b statt CSS für reines Styling: Wenn du Text nur aus gestalterischen Gründen fett darstellen willst (z.B. alle Labels in einem Formular), verwende CSS font-weight: bold statt <b>. Das <b>-Element sollte für Text reserviert sein, der inhaltlich die Aufmerksamkeit auf sich ziehen soll.

• b für Überschriften missbrauchen: Ein <p><b>Mein Titel</b></p> sieht zwar wie eine Überschrift aus, ist aber keine. Screenreader und Suchmaschinen erkennen es nicht als Überschrift. Verwende <h2>, <h3> etc. für echte Überschriften.

Browser-Kompatibilität

Das b-Element wird von allen Browsern seit den Anfängen des Webs unterstützt. Du kannst es bedenkenlos einsetzen.

Email-Kompatibilität

Das b-Element wird in allen gängigen Email-Clients zuverlässig als fetter Text dargestellt.

Verwandte Elemente