HOWTO · HTML
Fetten Text in HTML erstellen
In diesem Tutorial wird erläutert, wie Sie fetten Text in HTML erstellen.
Auf dieser Seite
Um Text in HTML fett darzustellen, verwenden Sie <strong>, wenn der Text wichtig ist, <b>, wenn Sie ohne zusätzliche Bedeutung Aufmerksamkeit darauf lenken möchten, oder CSS font-weight, wenn Sie die visuelle Stärke steuern müssen. Diese Möglichkeiten unterscheiden sich in Bedeutung und Darstellung. Wählen Sie daher diejenige, die zum Inhalt passt. (strong)
für semantisch wichtige Texte verwenden
Verwenden Sie <strong> für Text, der im jeweiligen Kontext besonders wichtig, dringend oder ernst ist. Browser stellen ihn standardmäßig häufig fett dar. Das Element vermittelt seine Bedeutung jedoch unabhängig von dieser Gestaltung.
<p><strong>Save your changes before closing the page.</strong></p>
Der Satz bleibt als wichtig gekennzeichnet, selbst wenn ein Stylesheet sein Aussehen ändert. Verwenden Sie hier <strong> für den ganzen Satz, weil die Anweisung insgesamt wichtig ist.
Führen Sie dieses Beispiel aus:
const message = "Save your changes";
console.log(`<strong>${message}</strong>`);
Dieses JavaScript-Beispiel gibt einen HTML-Ausschnitt als Text aus; es rendert keine Browserseite. Es wurde hier nicht ausgeführt.
für stilistische Hervorhebung verwenden
Verwenden Sie <b>, um die Aufmerksamkeit auf Text zu lenken, ohne ihm eine höhere Bedeutung zuzuschreiben. Damit können Sie zum Beispiel einen Schlüsselbegriff oder eine Beschriftung hervorheben, die Leserinnen und Leser beachten sollen. <b> ist ein gültiges HTML-Element. Wählen Sie es, wenn dieser Hinweis auf Aufmerksamkeit besser passt als die stärkere Bedeutung von <strong>.
<p>Search results for <b>CSS selectors</b></p>
Wählen Sie stattdessen <strong>, wenn der Text selbst wichtig ist, etwa bei einem Warnhinweis. Die Darstellung kann ähnlich aussehen, doch die semantische Funktion ist eine andere.
Mit CSS font-weight die visuelle Stärke steuern
Legen Sie die CSS-Eigenschaft font-weight fest, wenn es um die visuelle Gestaltung geht. Ein Inline-Style eignet sich schnell für einen Einzelfall; eine Klasse lässt sich wiederverwenden und im Stylesheet anpassen.
<p style="font-weight: bold;">This text is bold.</p>
<style>
.bold-text {
font-weight: bold;
}
</style>
<p class="bold-text">This text uses a reusable class.</p>
normal fordert die normale Schriftstärke an, bold eine fette. bolder und lighter fordern eine im Verhältnis zum übergeordneten Element stärkere beziehungsweise leichtere Schriftstärke an. Die genaue Darstellung hängt von den verfügbaren Schriftschnitten der Schriftart ab. Daher garantieren diese Werte nicht bei jeder Schriftart einen sichtbar unterschiedlichen Schriftschnitt.
Semantisches HTML mit CSS-Gestaltung kombinieren
Verwenden Sie semantisches Markup für die Bedeutung und CSS für das Aussehen. Wenn wichtiger Text eine bestimmte Schriftstärke erhalten soll, umschließen Sie ihn mit <strong> und gestalten Sie dieses Element oder eine darauf angewendete Klasse.
<style>
.important {
font-weight: 700;
color: darkred;
}
</style>
<p>Before submitting, read the <strong class="important">confirmation message</strong>.</p>
Hier kennzeichnet <strong> die Aussage als wichtig; die Klasse steuert Schriftstärke und Farbe. Benötigt der Text nur eine visuelle Gestaltung und hat keine besondere Bedeutung, wenden Sie eine CSS-Klasse an, ohne zusätzliche semantische Hervorhebung hinzuzufügen.
Fettschrift und Barrierefreiheit
Text fett darzustellen ist rein visuell: Screenreader kündigen weder <b>-Elemente noch Änderungen an der CSS-Eigenschaft font-weight an. Wenn fetter Text für das Verständnis wichtig ist — eine Warnung, ein zentraler Begriff, ein Pflichtfeld —, zeichnen Sie ihn mit <strong> aus, damit assistive Technologien seine Wichtigkeit vermitteln können, und verlassen Sie sich niemals allein auf die Fettschrift, um eine Bedeutung zu vermitteln.