WMP Sites

Die Kunst der Fettschrift: HTML-Tags zur Hervorhebung von Text

Lukas Fuchs vor 2 Jahren Frontend 3 Min. Lesezeit

HTML-Tags für Fettschrift

Wenn du Text in deinen HTML-Dokumenten hervorheben möchtest, kannst du die Fettschrift-Tags verwenden. Diese Tags ermöglichen es dir, Text fetter erscheinen zu lassen, um seine Bedeutung oder Wichtigkeit zu betonen.

und

Es gibt zwei HTML-Tags, die du zur Fettschrift verwenden kannst: und . Beide Tags haben den gleichen Effekt und lassen den eingeschlossenen Text fetter erscheinen. Der Hauptunterschied zwischen ihnen besteht darin, wie sie von Browsern interpretiert werden:

  • : Dieses Tag wird verwendet, um wichtigen Text hervorzuheben, der sich auf den Inhalt der Seite bezieht.
  • : Dieses Tag wird verwendet, um Text hervorzuheben, der sich auf das Aussehen oder die Präsentation der Seite bezieht.

Empfohlenes Tag

Im Allgemeinen wird empfohlen, das Tag zu verwenden, da es eine semantische Bedeutung hat. Das bedeutet, dass es Browsern und anderen Technologien ermöglicht, den hervorgehobenen Text besser zu verstehen und zu interpretieren.

Syntax

Die Syntax zur Verwendung von Fettschrift-Tags ist einfach:

<strong>Dein fetter Text</strong>

oder

<b>Dein fetter Text</b>

Verwendung von und

HTML bietet zwei Tags zur Hervorhebung von Text: ** und .

Verwendung von

Das Tag wird verwendet, um wichtigen Text hervorzuheben, der im Kontext besonders relevant oder bedeutungsvoll ist. Dies ist das semantisch korrekte Tag für wichtige Informationen.

Verwendung von

Das Tag wird verwendet, um Text optisch hervorzuheben, ohne dabei seine semantische Bedeutung zu verändern. Dies ist hilfreich, um den Leser auf bestimmte Wörter oder Ausdrücke aufmerksam zu machen.

Unterschied zwischen und

Der Hauptunterschied zwischen und liegt in ihrer semantischen Bedeutung:

  • weist auf wichtige Informationen hin.
  • hebt Text optisch hervor.

Daher solltest du verwenden, wenn der hervorgehobene Text für das Verständnis des Inhalts unerlässlich ist, und , wenn du Text nur visuell hervorheben möchtest.

Beispiel

<p>Dies ist ein <strong>wichtiger</strong> Text.</p>
<p>Dies ist ein <b>optisch hervorgehobener</b> Text.</p>

Im ersten Beispiel wird "wichtiger" als semantisch wichtiger Text gekennzeichnet, während im zweiten Beispiel "optisch hervorgehoben" nur optisch hervorgehoben wird.

Tipps zur Verwendung

  • Verwende Fettschrift sparsam, um ihre Wirkung zu maximieren.
  • Übertreibe es nicht mit der Hervorhebung, da dies ablenken und die Lesbarkeit beeinträchtigen kann.
  • Verwende Fettschrift in Kombination mit anderen Elementen wie Überschriften oder Listen, um den Text zu strukturieren und die Klarheit zu verbessern.

Unterschiede zwischen und

Beim Einsatz von und zur Fettschreibung von Text gibt es einige wichtige Unterschiede zu beachten.

Semantische Bedeutung

  • ** (strong)**: Dieses Tag verleiht dem Text eine starke semantische Bedeutung. Es zeigt an, dass der Text für das Verständnis des Inhalts von besonderer Bedeutung ist, wie z. B. wichtige Schlüsselbegriffe oder Schlagzeilen.
  • (bold): Dieses Tag dient lediglich zur optischen Hervorhebung und hat keine semantische Bedeutung. Du kannst es verwenden, um Text visuell auffälliger zu gestalten, ohne seine Wichtigkeit zu betonen.

Suchmaschinenoptimierung (SEO)

Suchmaschinen wie Google erkennen den Unterschied zwischen und . Sie gewichten Inhalte mit im Allgemeinen höher als Inhalte mit , da es sich um semantisch wichtigere Inhalte handelt. Dies kann sich positiv auf dein SEO auswirken.

Zugänglichkeit

Screenreader, die den Text für sehbehinderte Benutzer vorlesen, behandeln und unterschiedlich. Screenreader lesen als "important" (wichtig) vor, während sie nur als "bold" (fett) vorlesen. Dies kann für Benutzer hilfreich sein, um zu verstehen, welche Informationen besonders relevant sind.

Zusammenfassung

Verwende , wenn du Text semantisch hervorheben und für Suchmaschinen optimieren möchtest. Verwende , wenn du Text lediglich visuell auffälliger gestalten möchtest. Berücksichtige bei der Wahl des Tags auch die Auswirkungen auf die Zugänglichkeit und die SEO.

Denke daran, Fettschrift sparsam und gezielt einzusetzen, da eine Überbeanspruchung ihre Wirkung beeinträchtigen kann.

CSS-Alternativen für Fettschrift

Neben den HTML-Tags bieten dir CSS-Stile weitere Optionen zur Fettdarstellung von Text.

Die Eigenschaft font-weight

Die CSS-Eigenschaft font-weight ermöglicht die Feinabstimmung der Schriftdicke. Du kannst numerische Werte (z. B. 100 bis 900) oder vordefinierte Schlüsselwörter verwenden:

  • normal (Standard)
  • bold (fett)
  • lighter (leichter)
  • bolder (fetter)

Mit diesen Werten kannst du Text mit unterschiedlicher Schriftdicke formatieren, z. B.:

p {
  font-weight: bold;
}

Vorteile von CSS-Alternativen

Die Verwendung von CSS-Alternativen für Fettschrift bietet mehrere Vorteile:

  • Konsistenz: CSS stellt sicher, dass Text in allen Browsern und Geräten konsistent fett dargestellt wird, unabhängig von den standardmäßigen Schriftarteneinstellungen.
  • Flexibilität: Mit CSS kannst du die Schriftdicke präziser anpassen und z. B. Textschatten oder andere Effekte hinzufügen.
  • Barrierefreiheit: CSS-Alternativen können für Screenreader und andere assistierende Technologien genutzt werden, um Text als fett zu identifizieren.

Tipps zur Verwendung von CSS für Fettschrift

  • Verwende font-weight: bold für wichtigen Text, der hervorgehoben werden soll.
  • Vermeide es, zu viel Text fett zu formatieren, da dies die Lesbarkeit beeinträchtigen kann.
  • Erwäge die Verwendung dunklerer Grautöne für fett formatierten Text, anstatt reines Schwarz, um die Lesbarkeit zu verbessern.
  • Testaufrufe mit verschiedenen Schriftarten und Schriftgrößen, um sicherzustellen, dass dein Text gut lesbar ist.

Tipps zur effektiven Verwendung von Fettschrift

Die Hervorhebung von Text mit Fettschrift kann die Lesbarkeit und das Verständnis deiner Inhalte verbessern. Hier sind einige Tipps, um Fettschrift effektiv einzusetzen:

Setze Fettschrift sparsam ein

Zu viel Fettdruck kann deinen Text überfüllt und schwer zu lesen machen. Setze Fettschrift nur für die wichtigsten Wörter oder Phrasen ein, die du hervorheben möchtest.

Verwende Fettschrift für Schlüsselwörter

Markiere Schlüsselwörter oder Begriffe, die für dein Thema relevant sind. Auf diese Weise kannst du Lesern helfen, die wichtigsten Punkte zu identifizieren.

Hebe Überschriften hervor

Verwende Fettschrift für Überschriften und Unterüberschriften, um den Lesefluss zu erleichtern und die Struktur deines Textes zu verdeutlichen.

Betone Aufzählungspunkte

Verwende Fettschrift für wichtige Aufzählungspunkte, um diese hervorzuheben und die Aufmerksamkeit auf sie zu lenken.

Markiere Zitate

Setze Fettschrift als visuelle Markierung für Zitate ein. Dies hilft, Zitate vom umgebenden Text abzuheben und dem Leser zu zeigen, dass es sich um die Worte einer anderen Person handelt.

Unterscheide zwischen und

Verwende für semantisch wichtige Hervorhebungen, die für das Verständnis deines Inhalts wesentlich sind. Verwende für allgemeine Hervorhebungen, die nicht wesentlich für die Bedeutung sind.

Vermeide Fettschrift für ganze Absätze

Verwende Fettschrift nicht für ganze Absätze. Dies kann überwältigend sein und die Lesbarkeit beeinträchtigen.

Verwende Fettschrift für visuelles Interesse

Neben der Hervorhebung von Inhalten kannst du Fettschrift auch für visuelles Interesse einsetzen. Zum Beispiel kannst du Fettschrift für Drop Caps verwenden oder bestimmte Wörter in deinem Text hervorheben, um den Blick des Lesers zu lenken.

Achte auf Barrierefreiheit

Verwende Fettschrift nicht als einziges Mittel zur Hervorhebung. Verwende stattdessen auch Farbe, Kontrast oder andere visuelle Hinweise, um sicherzustellen, dass dein Text für alle zugänglich ist.

Barrierefreiheit und semantische Bedeutung von Fettschrift

Auch wenn Fettschrift ein nützliches visuelles Hilfsmittel sein kann, ist es wichtig, ihre Barrierefreiheit und semantische Bedeutung zu berücksichtigen:

Barrierefreiheit

  • Für Menschen mit Sehbehinderungen: Verstehe, dass blinde oder sehbehinderte Menschen Fettschrift möglicherweise nicht wahrnehmen können, wenn sie eine Sprachausgabe oder einen Bildschirmleser verwenden.
  • Für Menschen mit kognitiven Beeinträchtigungen: Fettschrift kann als ablenkend oder verwirrend empfunden werden, insbesondere für Personen mit Autismus oder Legasthenie.

Semantische Bedeutung

Die semantische Bedeutung von Fettschrift ist umstritten. Einige glauben, dass für wichtige oder hervorgehobene Informationen verwendet werden sollte, während andere für visuelle Hervorhebung verwenden:

  • : Markiert Text, der für das Verständnis des Inhalts wesentlich ist (z. B. Titel, Überschriften, wichtige Begriffe)
  • : Markiert Text, der visuell hervorgehoben werden soll, aber nicht unbedingt inhaltlich wichtig ist (z. B. Schlagzeilen, Zitate)

Um Barrierefreiheit und semantische Bedeutung sicherzustellen, empfehlen wir dir, Fettschrift mit Bedacht einzusetzen und in Erwägung zu ziehen, alternative Methoden zur Hervorhebung von Text zu verwenden, wie z. B.:

  • Farben: Farben können verwendet werden, um Text hervorzuheben, solange ein ausreichender Kontrast besteht, um die Lesbarkeit zu gewährleisten.
  • Unterstreichung: Unterstreichung kann verwendet werden, um Text auf eine subtile Weise hervorzuheben, besonders für Links.
  • CSS-Stile: Cascading Style Sheets (CSS) bieten erweiterte Optionen zur Steuerung des Schriftstils, einschließlich Gewicht, Größe und Farbe.

Indem du diese Richtlinien befolgst, kannst du sicherstellen, dass dein Inhalt für alle Benutzer zugänglich und nützlich ist, unabhängig von ihren Fähigkeiten oder Vorlieben.

Weitere Beiträge

Folge uns

Neue Beiträge

Frontend

H-Kennzeichen: Voraussetzungen, Vorteile und Kosten einfach erklärt

AUTOR • Jul 02, 2026
Frontend

Word Formatvorlagen Download - Die optimale Nutzung für Effizienz und Kreativität

AUTOR • Jul 02, 2026
Frameworks & Libraries

Bachelorarbeit formatieren: So sieht deine Arbeit professionell aus und wird leichter bewertet

AUTOR • Jul 02, 2026
Datenbanken

Michaelis-Menten-Konstante: Bedeutung, Formel und Anwendung einfach erklärt

AUTOR • Jul 02, 2026
Frontend

Flächenformeln und Umfang einfach berechnen: Alle wichtigen Formeln für Schule, Alltag und Praxis

AUTOR • Jul 02, 2026
Frameworks & Libraries

LaTeX Tabellen erstellen Tutorial: So baust du saubere Tabellen ohne Frust

AUTOR • Jul 02, 2026
Frontend

HTML Pfeile erstellen und anpassen: Richtungshinweise auf deiner Website klar und effektiv einsetzen

AUTOR • Jul 02, 2026
Frontend

HTML Code fett: Wie man Text hervorhebt und Aufmerksamkeit erregt

AUTOR • Jul 02, 2026
Frontend

Python HTML dynamische Webseiten einfach programmieren: So baust du interaktive Web-Projekte schnell

AUTOR • Jul 02, 2026
Frontend

HTML Slideshows erstellen: Schritt-für-Schritt-Anleitung für Anfänger

AUTOR • Jul 02, 2026
Frontend

Anleitung zum Festlegen von Schriftarten in HTML: So steuerst du Typografie sauber und effektiv

AUTOR • Jul 02, 2026
Frontend

Erstelle mühelose Grid Layouts mit einem CSS Grid Generator: Schnellere, saubere Layouts ohne Stress

AUTOR • Jul 02, 2026
API & Webservices

HTML Daten mühelos in Microsoft Excel importieren: So geht’s schnell und sauber

AUTOR • Jul 02, 2026
Frontend

de html net die definitive Anleitung für Webentwickler: So baust du schnelle, saubere Webseiten

AUTOR • Jul 02, 2026
Frontend

Deaktivieren und deaktivieren von Links im HTML: So steuerst du Klicks sauber

AUTOR • Jul 02, 2026
JavaScript

HTML in PDF in JavaScript umwandeln: So einfach geht’s wirklich

AUTOR • Jul 02, 2026
API & Webservices

HTML Parser Online: Einfach HTML-Dokumente analysieren und verarbeiten

AUTOR • Jul 02, 2026
Frontend

HTML Listen ohne Aufzählungspunkte: Der Leitfaden für saubere, professionelle Listen

AUTOR • Jul 02, 2026
Frontend

Erstellen einer fesselnden CSS Timeline für Ihre Website: So bauen Sie ein starkes visuelles Storytelling-Element

AUTOR • Jul 02, 2026
API & Webservices

HTTP 405 Method Not Allowed: Ursachen, Folgen und Lösungen für den Fehler

AUTOR • Jul 02, 2026

Beliebte Beiträge

DevOps & Deployment

ADB: Das umfassende Tool zur Android-Debug-Bridge

AUTOR • May 06, 2024
DevOps & Deployment

Linux-Dienste: Die Fundamente für sichere und zuverlässige Systeme

AUTOR • May 06, 2024
DevOps & Deployment

Reise in die Welt von Linux: Ein umfassender Leitfaden für Einsteiger

AUTOR • May 06, 2024
DevOps & Deployment

AWK: Das vielseitige Werkzeug zur Datenverarbeitung

AUTOR • May 06, 2024
DevOps & Deployment

Überwachung der CPU-Temperatur unter Linux: Optimale Systemleistung sicherstellen

AUTOR • May 06, 2024
DevOps & Deployment

Tar-Entpacken: Eine Schritt-für-Schritt-Anleitung zum Extrahieren komprimierter Dateien

AUTOR • May 06, 2024
DevOps & Deployment

Installiere Linux auf Windows: Dein kompletter Schritt-für-Schritt-Leitfaden

AUTOR • May 06, 2024
DevOps & Deployment

Linux-Tastatur einfach und schnell umstellen: Eine Schritt-für-Schritt-Anleitung

AUTOR • Jan 20, 2026
DevOps & Deployment

Rocky Linux 9: Ein detaillierter Einblick in die neueste Enterprise Linux-Distribution

AUTOR • May 06, 2024
Frontend

Der HTML-Input-Typ "E-Mail" – Best Practices für die Sammlung valider E-Mail-Adressen

AUTOR • Apr 24, 2024
Frontend

HTML Lang Deutsch: Sprachattribute für barrierefreie Websites

AUTOR • Apr 24, 2024
Frontend

HTML-Codeprüfung: Finden und Beheben von Fehlern für eine perfekte Website

AUTOR • Apr 24, 2024
Frontend

HTML onload: Ein Leitfaden zur Ausführung von Code nach dem Laden der Seite

AUTOR • Apr 24, 2024
Frontend

HTML Monospace: Ein umfassender Leitfaden für die Verwendung von nicht proportionalen Schriftarten

AUTOR • Apr 24, 2024
Frontend

Die unendliche Videowelt auf YouTube.de: Eine Anleitung zur deutschen Plattform

AUTOR • Feb 18, 2025
Frontend

Das HTML-Summary-Element: Verbesserte Zugänglichkeit und Inhaltszusammenfassungen

AUTOR • Apr 24, 2024
Frontend

Optimieren Sie Ihre Tabellenlayouts mit HTML Colgroup: Eine umfassende Anleitung

AUTOR • Apr 24, 2024
Frontend

So zentrieren Sie Tabellen in HTML: Einfach erklärt

AUTOR • Apr 24, 2024
Frontend

Die Kunst der Fettschrift: HTML-Tags zur Hervorhebung von Text

AUTOR • Apr 24, 2024
Datenbanken

Pandas read_html: Extrahieren von HTML-Tabellen in Python

AUTOR • Apr 24, 2024