Was HTML fett bedeutet
HTML fett ist Text, den der Browser mit dickeren Buchstaben zeichnet. Dafür gibt es drei Wege. Erstens das Tag <b>. Zweitens das Tag <strong>. Und drittens kann CSS jeden Text mit font-weight fett machen.
Auf dem Bildschirm sehen alle drei zunächst gleich aus, denn der Browser zeichnet sie gleich. Trotzdem bedeuten sie nicht dasselbe. Eins ist nur ein Stil. Ein anderes sagt dem Leser, dass die Wörter wichtig sind. Und das dritte gehört in Ihr Stylesheet, nicht in den Text.
Deshalb zeigt diese Anleitung, welches Sie wann nehmen. Danach geht es darum, was HTML fett für SEO bringt, wie viel zu viel ist und wie Sie eine Seite reparieren, auf der fast jede Zeile fett ist. Unser kostenloser SEO Checker meldet genau dieses Problem, deshalb erklären wir auch seine Regel.
Das b-Tag für HTML fett
Das Element <b> ist das älteste Tag, um Text in HTML fett zu machen. Sie setzen Wörter hinein, und dann zeigt der Browser sie fett. Hier das einfachste Beispiel:
<p>Geben Sie <b>zwei Tassen</b> Mehl dazu.</p>Heute gibt der HTML-Standard <b> eine enge Rolle. Es markiert Wörter, die auffallen sollen, aber nicht wichtiger sind als der Rest. Deshalb ändert es nichts an der Bedeutung. Stattdessen ändert es nur, wie die Wörter aussehen.
Wann das b-Tag passt
Nehmen Sie <b>, wenn das Auge an einem Wort hängen bleiben soll, Sie aber weder warnen noch etwas betonen. Zum Beispiel:
- Schlüsselwörter in einer Zusammenfassung, damit man sie überfliegen kann.
- Produktnamen in einem Test.
- Die ersten Wörter einer kurzen Meldung, die manche Seiten fett setzen.
- Wörter in einer Liste, die der Leser schnell wiederfinden muss.
Der HTML Living Standard nennt <b> das letzte Mittel. Anders gesagt: Wählen Sie zuerst ein Tag mit echter Bedeutung. Greifen Sie erst dann zu <b>, wenn nichts anderes passt.
Das strong-Tag
Auch das Tag <strong> zeigt Text fett an. Allerdings trägt es zusätzlich eine Botschaft. Es sagt nämlich, dass diese Wörter wichtig, ernst oder dringend sind.
<p><strong>Achtung:</strong> Ziehen Sie den Stecker, bevor Sie das Gerät öffnen.</p>Diese Bedeutung zählt. Suchmaschinen und KI-Tools lesen das Tag übrigens mit. Manche Screenreader können es außerdem ansagen, wenn der Nutzer diese Option einschaltet. So sagt <strong> ihnen allen, und Ihren Lesern, welche Wörter das Gewicht tragen.
Wann Sie strong nehmen
- Eine Warnung, etwa vor Datenverlust.
- Eine wichtige Bedingung, etwa eine Frist oder ein Preis.
- Der eine Satz in einem langen Abschnitt, den niemand übersehen darf.
Sie können ein strong-Tag auch in ein anderes setzen. Text in zwei <strong>-Tags gilt als wichtiger als Text in einem. Trotzdem braucht das kaum eine Seite. Wenn Sie oft verschachteln, braucht wahrscheinlich der Text selbst eine Überarbeitung.
strong oder b in HTML
Viele fragen, welches "besser" ist. Eigentlich lautet die Frage aber, welches für Ihre Wörter stimmt. Deshalb hier die kurze Antwort.
<b>heißt "schau hier hin". Es fügt nur Stil hinzu.<strong>heißt "das ist wichtig". Es fügt Bedeutung und Stil hinzu.- Beide sind standardmäßig fett, weil der Browser sie so darstellt.
- Beide sind gültiges HTML5. Keins ist veraltet oder verboten.
Stellen Sie sich also eine Frage. Würden Sie diese Wörter beim Vorlesen betonen? Wenn ja, nehmen Sie <strong>. Wenn sie nur ins Auge fallen sollen, nehmen Sie <b>. Und wenn der Fettdruck zum Design gehört, etwa bei einem Button, nehmen Sie stattdessen CSS.
Und kursiv? Das funktioniert genauso. Das Tag <em> betont, während <i> nur das Aussehen ändert. Deshalb passen die Paare gut zusammen: strong und em tragen Bedeutung, b und i tragen Stil.
Fetter Text mit CSS
Wenn Fettdruck zum Design gehört, gehört er ins CSS. Überschriften, Buttons, Menülinks und Tabellenköpfe sind dafür gute Beispiele. Die Eigenschaft dafür heißt font-weight.
.price {
font-weight: 700;
}Die Werte reichen von 100, also dünn, bis 900, also sehr kräftig. Normaler Text hat 400 und fetter Text 700. Statt 700 können Sie auch bold schreiben, denn beides bedeutet dasselbe.
bold, bolder und die Zahlen
Das Wort bolder heißt eine Stufe kräftiger als der Elterntext. Das klingt praktisch. Allerdings hängt das Ergebnis von der Schrift ab. Hat eine Schrift kein Gewicht 800, täuscht der Browser es vielleicht vor oder lässt es weg. Deshalb sind feste Zahlen leichter vorherzusagen.
Ein Hinweis zu Schriften
Eine Webschrift sieht nur dann fett gut aus, wenn Sie ihre fette Datei laden. Sonst verbreitert der Browser die normalen Buchstaben, um Fettdruck vorzutäuschen. Dieser falsche Fettdruck wirkt dann unscharf. Laden Sie also das Gewicht 700 jeder Schrift, die Sie fett setzen wollen.
Zum Schluss kann CSS den Fettdruck auch wegnehmen. Zum Beispiel macht strong { font-weight: 600; } strong-Text auf der ganzen Website etwas leichter. Die Bedeutung bleibt, denn das Tag ist ja noch da.
Hilft Fettdruck bei SEO?
Ein wenig, und nur wenn er ehrlich ist. Google hat gesagt, dass es fetten Text als Hinweis auf das Thema eines Abschnitts liest. Jedoch ist es nur ein kleiner Hinweis. Er hebt keine schwache Seite an, und er ersetzt nie klare Überschriften und guten Text.
Vor allem hilft Fettdruck den Menschen. Wer eine lange Seite überfliegt, schaut zuerst auf die Überschriften und dann auf die fetten Wörter. Wenn Ihre fetten Wörter also jeden Abschnitt zusammenfassen, bleiben Leser länger. Und genau das wollen Suchmaschinen sehen.
Wann schadet Fettdruck also?
Fettdruck wirkt nicht mehr, sobald es zu viel davon gibt. Ist die halbe Seite fett, fällt folglich nichts mehr auf. Schlimmer noch: Eine Seite voller fetter Keywords wirkt wie Keyword-Stuffing. Deshalb warnen Audits wie Seobility, und auch unser eigener Checker, davor.
Faustregel: pro Abschnitt nur wenige Wörter fett, nie ganze Sätze und nie zweimal dieselbe Phrase.
Wie viel Fettdruck ist zu viel
Es gibt kein offizielles Limit. Trotzdem sind sich Audit-Tools einig, wie das Problem aussieht. Unser SEO Checker zählt jedes <b> und jedes <strong> auf der Seite. Dann warnt er in drei Fällen.
- Zu viele. Die Seite hat mehr als 20 fette Stellen und mehr als eine pro 40 Wörter.
- Wiederholungen. Derselbe Text ist mehr als einmal fett, etwa ein Keyword in jedem Absatz.
- Zu lang. Eine fette Stelle ist länger als 70 Zeichen, also ein ganzer Satz.
Dabei wächst die erste Regel mit der Seite. Eine Anleitung mit 4.000 Wörtern verträgt mehr Fettdruck als eine Produktseite mit 300. Die zweite und dritte Regel gelten dagegen für jede Seite, denn eine Wiederholung oder ein fetter Satz hilft dem Leser nie.
Und warum ist ein ganzer fetter Satz ein Problem?
Ein fetter Satz ist schwer zu lesen. Außerdem ermüden dicke Buchstaben auf langen Strecken. Außerdem verdient ein so wichtiger Satz vielleicht eine Überschrift oder einen Hinweiskasten. Beides fällt stärker auf als Fettdruck.
Zu viel Fettdruck beheben
Die Lösung ist vor allem Textarbeit, kein Code. Deshalb dauert jede Seite nur ein paar Minuten. Dabei gehen wir auf Kundenseiten so vor.
Schritt 1: Jede fette Stelle finden
Prüfen Sie die Seite mit dem SEO Checker. Öffnen Sie dann den Tab Elements, wo der fette Text mit seiner Anzahl steht. Oder Sie suchen im Quelltext nach <b> und <strong>.
Schritt 2: Wiederholungen löschen
Behalten Sie den ersten Fettdruck jeder Phrase und löschen Sie den Rest. Denn ein Keyword wird beim dritten Mal nicht stärker. Im Gegenteil, Leser übersehen es schon nach dem ersten Mal.
Schritt 3: Lange Stellen kürzen
Kürzen Sie jeden fetten Satz auf die zwei oder drei Wörter, die ihn tragen. Machen Sie also aus einem komplett fetten Satz "Sichern Sie Ihre Dateien vor dem Update" lieber "Sichern Sie Ihre Dateien vor dem Update".
Schritt 4: Design-Fettdruck ins CSS
Labels, Preise und Tabellenköpfe sind Design. Geben Sie ihnen also eine Klasse und eine font-weight-Regel statt eines Tags. Dann zählen sie nicht mehr als fetter Text im Inhalt.
<!-- Vorher -->
<p><b>Preis:</b> 29 €</p>
<!-- Nachher -->
<p><span class="label">Preis:</span> 29 €</p>
.label { font-weight: 700; }Schritt 5: Das Ergebnis prüfen
Fügen Sie Ihr neues Markup in den Online HTML Editor ein und vergleichen Sie es mit dem alten. Prüfen Sie dann die Live-Seite noch einmal. Danach sollte die Warnung weg sein. Das Video unten zeigt den ganzen Ablauf an einer Beispielseite.
Fett in WordPress, Markdown und E-Mail
Kaum jemand tippt HTML fett von Hand. Stattdessen schreibt es ein Editor für Sie. Deshalb lohnt es sich zu wissen, was jeder erzeugt.
WordPress
Der Fett-Button im Block-Editor, oder Strg+B, schreibt <strong>. Für echte Betonung ist das also in Ordnung. Aber viele Autoren drücken ihn nur, damit der Text schöner aussieht. Daher landen WordPress-Beiträge oft bei viel zu viel Fettdruck. Nehmen Sie in dem Fall lieber eine Überschrift oder einen gestalteten Block.
Markdown
In Markdown machen zwei Sternchen auf jeder Seite den Text fett: **so**. Die meisten Tools machen daraus dann <strong>. Unser Markdown-zu-HTML-Konverter zeigt Ihnen genau das HTML, das herauskommt.
Bei E-Mails ist es anders, denn E-Mail-Programme entfernen das meiste CSS. Deshalb sind <b> und <strong> in einer E-Mail sicherer als eine Klasse. Außerdem funktionieren beide in jedem großen Postfach.
Häufige Fehler
- Ein Keyword in jedem Absatz fett setzen, um "SEO zu helfen". Das liest sich wie Stuffing.
- Einen ganzen Absatz fett machen, damit er auffällt. Eine Überschrift oder ein Hinweis kann das besser.
<strong>für Design-Labels nehmen. Nehmen Sie CSS, damit das Tag seine Bedeutung behält.<b><strong>zusammen schreiben. Eins reicht.- Eine Webschrift ohne ihre fette Datei laden, was unscharfen falschen Fettdruck ergibt.
- Das alte Tag
<font>oder Inline-Styles nutzen. Verschieben Sie den Stil in Ihr CSS.
Jeder dieser Fehler ist leicht zu beheben, sobald Sie ihn sehen. Deshalb steht eine kurze Prüfung am Anfang. Wenn Sie alle Details wollen, lohnt sich die MDN-Seite zum strong-Element.
Fragen und Antworten
Wie mache ich Text in HTML fett?
Setzen Sie die Wörter in ein b-Tag oder ein strong-Tag, zum Beispiel <b>Text</b>. Nehmen Sie strong für wichtige Wörter und b, wenn sie nur auffallen sollen.
Welches Tag macht HTML fett?
Das Tag für HTML fett ist b. Es zeigt Text fett an, ohne Bedeutung hinzuzufügen. Das strong-Tag sieht auch fett aus, markiert die Wörter aber als wichtig.
Ist das b-Tag veraltet?
Nein. Das b-Tag ist weiterhin gültiges HTML5. Der Standard hat nur seine Bedeutung eingeengt: Es markiert jetzt Text, der auffallen soll, ohne wichtiger zu sein.
Was ist der Unterschied zwischen strong und b?
Beide sehen fett aus. Allerdings sagt strong, dass die Wörter wichtig sind, und Screenreader und Suchmaschinen können das lesen. Das b-Tag ändert dagegen nur das Aussehen, deshalb fehlt ihm die Bedeutung.
Soll ich für SEO strong oder b nehmen?
Nehmen Sie das, was für Ihre Wörter stimmt. Strong passt also für echte Betonung. Keins der beiden hebt eine Seite allein an, und zu viel von beiden kann schaden.
Wie mache ich Text mit CSS fett?
Fügen Sie einer Regel font-weight: 700 hinzu, zum Beispiel .price { font-weight: 700; }. Das Wort bold bedeutet übrigens dasselbe wie 700.
Welches font-weight ist fett?
Fett ist 700, normaler Text ist 400. Die Skala reicht von 100 bis 900, aber jede Schrift hat nur die Gewichte, die sie mitbringt.
Hilft fetter Text bei SEO?
Ein wenig. Google liest Fettdruck als kleinen Hinweis auf das Thema. Vor allem hilft er aber Lesern beim Überfliegen, und darin liegt sein echter Wert.
Wie viel fetter Text ist zu viel?
Unser Checker warnt ab 20 fetten Stellen, wenn es mehr als eine pro 40 Wörter sind. Er warnt auch, wenn derselbe Text zweimal fett ist oder eine fette Stelle länger als 70 Zeichen ist.
Warum sagt mein SEO Checker, dass fast alles fett ist?
Die Seite hat nämlich für ihre Länge viel Fettdruck. Entfernen Sie also Wiederholungen, kürzen Sie fette Sätze auf wenige Wörter und verschieben Sie Design-Fettdruck wie Labels ins CSS.
Ist fetter Text schlecht für die Barrierefreiheit?
Nein, nicht in kleinen Mengen. Strong kann sogar helfen, weil manche Screenreader es ansagen können. Lange fette Stellen sind aber für alle schwerer zu lesen.
Kann ich strong-Tags verschachteln?
Ja. Dabei gilt Text in zwei strong-Tags als wichtiger als in einem. Trotzdem braucht der Text wahrscheinlich eine Überarbeitung, wenn Sie oft verschachteln.
Was schreibt Strg+B in WordPress?
Im Block-Editor schreiben Strg+B und der Fett-Button beide ein strong-Tag. Deshalb zählt jedes fett gesetzte Wort als wichtiger Text.
Wie schreibe ich fett in Markdown?
Setzen Sie zwei Sternchen auf jede Seite, so: **das**. Die meisten Markdown-Tools machen daraus im HTML ein strong-Tag.
Soll ich in E-Mails b oder strong nehmen?
Zuerst einmal funktionieren beide in allen großen E-Mail-Programmen. Außerdem sind beide sicherer als CSS-Klassen, die viele Postfächer entfernen.
Warum sieht meine fette Schrift unscharf aus?
Die fette Datei der Webschrift ist nicht geladen, also täuscht der Browser den Fettdruck vor. Laden Sie das Gewicht 700 der Schrift, dann ist es behoben.
Kann ich den Fettdruck eines strong-Tags entfernen?
Ja. Eine CSS-Regel wie strong { font-weight: 400; } nimmt das Aussehen weg. Die Bedeutung bleibt, denn das Tag steht weiter im HTML.
Darf ich das font-Tag für Fettdruck nutzen?
Nein. Denn das font-Tag ist in HTML5 veraltet. Nehmen Sie CSS für das Aussehen und b oder strong im Text.
Was ist die kursive Version von strong?
Das ist das em-Tag, das betont. Das i-Tag ist sein Partner nur für den Stil, so wie b für Fettdruck.
Wie prüfe ich den Fettdruck auf meiner Seite?
Prüfen Sie die Seite mit dem kostenlosen Denwix SEO Checker. Sein Tab Elements listet jede fette Stelle, und der Tab Checks sagt, ob es zu viele sind.