HTML <b>-Tag
Der <b>-Tag hebt einen Textabschnitt fett hervor, um ihn für den Benutzer auffälliger zu machen
Der HTML-Tag <b> wird verwendet, um einen Textabschnitt fett darzustellen, damit er hervorsticht. Der <b> -Tag ändert nur die visuelle Darstellung; er trägt keine semantische Bedeutung (auch nicht für Suchmaschinen).
Dieses Kapitel richtet sich an alle, die HTML schreiben und Text auf die richtige Weise fett setzen möchten. Sie erfahren, wofür der <b> -Tag im modernen HTML gedacht ist, wann Sie ihn statt CSS einsetzen sollten und wie er sich von <strong>, <i> und <em> unterscheidet — vier Tags, die leicht verwechselt werden.
In HTML5 ist der <b> -Tag für nicht-semantische stilistische Hervorhebungen gedacht, etwa um Schlüsselwörter, Produktnamen oder UI-Labels zu kennzeichnen — und nicht als Ersatz für andere Tags.
Wann man den <b> -Tag verwendet
In HTML5 hat der <b> -Tag einen spezifischen, eng gefassten Zweck: Er lenkt die Aufmerksamkeit auf einen Textabschnitt aus rein stilistischen Gründen, ohne zu implizieren, dass der Text wichtiger ist. Die HTML-Spezifikation nennt drei klassische Anwendungsfälle:
- Schlüsselwörter in einem Dokument, zum Beispiel das erste Auftreten eines Fachbegriffs.
- Produktnamen in einer Rezension oder Beschreibung.
- Der einleitende Satz oder die ersten Wörter eines Artikelabsatzes.
<p><b>HTML</b> is the standard markup language for web pages.</p>
<p>The <b>Galaxy S24</b> ships with a brighter display this year.</p>
<p><b>In a hurry?</b> Skip to the summary below.</p>In jedem dieser Fälle sticht der fett gedruckte Text visuell hervor, ist aber nicht zwingend bedeutsamer für den Sinn des Satzes — genau diese Unterscheidung trennt <b> von <strong>.
Vermeiden Sie den <b> -Tag für Titel und Überschriften. Verwenden Sie stattdessen die Tags <h1>–<h6>, die eine Gliederungsbedeutung im Dokument tragen.
<b> oder CSS?
Wenn Ihr Ziel rein visuell ist und einer Designregel folgt — zum Beispiel „alle Produktnamen in diesem Katalog sind fett" —, ist es in der Regel die bessere Wahl, die Fettschrift mit der CSS-Eigenschaft font-weight zu setzen, da das Styling im Stylesheet liegt und an einer einzigen Stelle geändert werden kann. Greifen Sie zum <b> -Tag, wenn die Fettung Teil des Dokumentinhalts selbst ist (ein einmaliges Schlüsselwort oder ein Einleitungstext), und nicht ein wiederverwendbares Designmuster. In keinem der beiden Fälle wird der Assistenztechnologie Wichtigkeit vermittelt — dafür benötigen Sie <strong>.
Syntax
Der <b> -Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden ( <b> ) und dem schließenden ( </b> ) Tag geschrieben.
Beispiel des HTML- <b> -Tags:
Beispiel des HTML- <b> -Tags|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
</head>
<body>
<p><b>This section of the text </b> has been rendered in bold,</p>
</body>
</html>Die Standarddarstellung des <b> -Elements ist Fettschrift, aber diese Darstellung ist nur der Standardstil des Browsers — Sie können sie mit CSS ändern.
Text mit CSS fett setzen
Wenn die Fettdarstellung durch Ihr Design und nicht durch den Inhalt bestimmt wird, setzen Sie sie mit der CSS-Eigenschaft font-weight auf einem <span> (oder einem beliebigen Element), statt <b> zu verwenden. So bleibt das Styling in Ihrem Stylesheet wiederverwendbar:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.bold-text {
font-weight: 700;
}
</style>
</head>
<body>
<p>
<span class="bold-text">This section of the text </span>
has been rendered in bold.
</p>
</body>
</html> <b> vs. <strong>
Sowohl das <b> - als auch das <strong>-Element stellen Text standardmäßig in Fettschrift dar und sehen auf dem Bildschirm identisch aus. Der Unterschied liegt in der Bedeutung:
<strong><b>
Hier sind dieselben Wörter auf beide Weisen ausgezeichnet:
<!-- Importance reaches assistive tech -->
<p><strong>Warning:</strong> do not unplug the device while updating.</p>
<!-- Visual attention only, no extra importance -->
<p>The new <b>UltraView</b> monitor is now in stock.</p>Faustregel: Wenn die Fettung etwas bedeutet — dieser Text ist wichtiger und Screenreader-Nutzer sollten das wissen —, verwenden Sie <strong> . Wenn Sie nur einen visuellen Hinweis möchten, verwenden Sie <b> oder CSS font-weight.
<b> vs. <i> , <em> und <strong>
Diese vier Tags werden häufig verwechselt, weil zwei von ihnen Fettschrift und zwei Kursivschrift erzeugen. Sie teilen sich entlang derselben Linie wie <b> und <strong> — visuell versus semantisch:
| Tag | Standardstil | Vermittelt Wichtigkeit/Betonung? |
|---|---|---|
<b> | Fett | Nein — nur visuell |
<strong> | Fett | Ja — starke Wichtigkeit |
<i> | Kursiv | Nein — nur visuell (alternative Stimme, Begriffe) |
<em> | Kursiv | Ja — sprachliche Betonung |
Damit ist <b> das fette Gegenstück zu <i>, und <strong> ist das fette Gegenstück zu <em>.
Barrierefreiheit
Screenreader weisen dem <b> -Element keine semantische Rolle zu — der Text wird genauso wie der umgebende Text vorgelesen, ohne Änderung der Betonung. Das ist beabsichtigt, da <b> rein präsentationsbezogen ist. Die praktische Konsequenz: Verwenden Sie <b> niemals, wenn die Wichtigkeit des Textes Nutzern von Assistenztechnologie vermittelt werden muss. Wenn ein Ausdruck wirklich wichtiger ist, zeichnen Sie ihn mit <strong> aus (oder mit <em> für gesprochene Betonung), damit die Bedeutung für alle vermittelt wird — nicht nur für sehende Leser.
Attribute
Der <b> -Tag unterstützt globale Attribute und Ereignis-Attribute.
So wenden Sie ein globales Attribut auf einen HTML-<b>-Tag an
<p>The <b class="highlight" title="Important keyword">keyword</b> is emphasized here.</p>