HTML <strong>-Tag
Das HTML <strong>-Tag kennzeichnet Text als besonders wichtig, ernst oder dringend. Bedeutung, Barrierefreiheit, Beispiele und <b> vs <em>.
Das HTML-Tag <strong> kennzeichnet Text als stark wichtig, ernst oder dringend. Das ist sein eigentlicher Zweck: Es trägt Bedeutung und ist nicht nur ein visuelles Hilfsmittel. Browser stellen Inhalte innerhalb von <strong> standardmäßig fett dar, doch die Fettschrift ist lediglich ein Nebeneffekt — der eigentliche Nutzen liegt darin, dass Sie Browsern, Suchmaschinen und Hilfstechnologien signalisieren, dass dieser Text wichtiger ist als der umgebende Inhalt.
Diese Seite erklärt, was <strong> bedeutet, wie es sich von Fett-Styling und von den ähnlichen Tags <b> und <em> unterscheidet, wie Screenreader und SEO damit umgehen und wie man es korrekt mit funktionierenden Beispielen einsetzt.
Warum <strong> statt Fett-Styling verwenden?
Es hilft, zwei verschiedene Konzepte zu trennen:
- Visuelles Gewicht — Text, der einfach fett aussieht. Das erreicht man mit CSS
font-weight: boldoder dem<b>-Tag. Es verändert nur das Aussehen und trägt keine Bedeutung. - Wichtigkeit — Text, der tatsächlich wichtiger ist als seine Umgebung. Das ist es, was
<strong>ausdrückt. Die fette Darstellung ist die Standardpräsentation dieser Wichtigkeit, aber man kann sie mit CSS umgestalten, ohne dass die Bedeutung verloren geht.
Verwenden Sie <strong>, wenn die Hervorhebung Teil der inhaltlichen Bedeutung ist — eine Warnung, eine Frist, eine kritische Anweisung. Verwenden Sie Fett-Styling (CSS oder <b>), wenn die Wörter nur visuell hervorstechen sollen, etwa ein Produktname oder ein Schlüsselwort, das Sie zum schnellen Erfassen hervorheben.
Während HTML4 <strong> als stärkere Betonung definierte, hat HTML5 es als starke Wichtigkeit des Inhalts neu definiert. Sie können <strong> auch innerhalb von <strong> verschachteln, um die relative Wichtigkeit eines Ausdrucks zu erhöhen.
Wenn Sie Text rein zur Dekoration fett darstellen möchten — ohne zusätzliche Wichtigkeit — verwenden Sie stattdessen das <b>-Tag oder die CSS-Eigenschaft font-weight anstelle von <strong>.
<strong> vs. <b> vs. <em>
Diese drei Tags verändern das Aussehen von Text, bedeuten aber unterschiedliche Dinge. Die richtige Wahl ist das, was Ihr Markup semantisch macht.
| Tag | Standarddarstellung | Bedeutung | Verwendung |
|---|---|---|---|
<strong> | Fett | Starke Wichtigkeit, Ernst, Dringlichkeit | Warnungen, Fristen, kritische Anweisungen |
<b> | Fett | Keine zusätzliche Wichtigkeit — stilistisch abgehoben | Schlüsselwörter, Produktnamen, Einleitungssatz |
<em> | Kursiv | Betonungshervorhebung, die die gesprochene Bedeutung verändert | Wörter, die man mit stimmlicher Betonung sprechen würde |
Eine einfache Merkhilfe: <strong> bedeutet „das ist wichtig", <em> bedeutet „das anders aussprechen" und <b> bedeutet „einfach fett darstellen". Für hervorgehobenen (statt wichtigen) Text siehe das <mark>-Tag.
Barrierefreiheit und SEO
Die echten Vorteile von <strong> liegen in Semantik und Suche:
- Suchmaschinen können das Markup als Signal verwenden, dass der umschlossene Text bedeutsamer ist als der Rest des Inhalts, was dabei hilft, das Thema der Seite zu beschreiben.
- Hilfstechnologien erhalten die Wichtigkeit als Teil der Dokumentstruktur. Die meisten verbreiteten Screenreader ändern ihre Stimme bei
<strong>standardmäßig nicht automatisch, aber die Wichtigkeit wird dennoch übermittelt, und Nutzer können ihre Software so konfigurieren, dass sie darauf hingewiesen werden.
Kurz gesagt: Verwenden Sie <strong> nicht, um stimmliche Betonung zu erzeugen — verwenden Sie es, weil der Text tatsächlich wichtiger ist. Die Bedeutung ist das, worauf Werkzeuge sich verlassen; die fette Darstellung ist nur der Standard.
Syntax
Das <strong>-Tag wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<strong>) und schließenden (</strong>) Tag geschrieben. Das Vergessen des schließenden </strong> ist ein häufiger Fehler — ohne es kann der Rest Ihres Textes ebenfalls als wichtig markiert werden.
Beispiel des HTML-Tags <strong>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We’ve used the <strong>strong</strong> tag to highlight this important part of the text.</p>
</body>
</html>Ergebnis
Beispiel: Dringlichkeit und Warnungen
Eine natürliche Verwendung von <strong> ist es, etwas zu kennzeichnen, das der Leser nicht übersehen darf:
<!DOCTYPE html>
<html>
<body>
<p><strong>Warning:</strong> this action permanently deletes your account.</p>
<p>Submit the form before <strong>5:00 PM on Friday</strong> — late entries are not accepted.</p>
</body>
</html>Attribute
Das <strong>-Tag unterstützt die Globalen Attribute und die Ereignis-Attribute. Sie können beispielsweise eine Klasse anwenden, um es anders zu gestalten:
<strong class="warning">Important notice</strong>