<b> (bold) oder <strong>? Wann wird was benutzt? (Unterschiede zwischen semantisch-logischen und physisch-visuellen Elementen)
HTML-Anfänger müssen sich, wenn sie ihre Seiten zur Kritik stellen, von (selbsternannten) Profis sicherlich vieles anhören. Manche Kritik ist sehr einleuchtend, andere hingegen ist trotz Nachfragen sehr unverständlich. Ein Beispiel aus dem Feld der eher unverständlichen Kritikpunkte ist das <b>-Tag (b=bold, dt. fett). Ein Anfänger, der den Profis eine Seite begutachten lässt, die häufiger mal das <b>-Tag verwendet, bekommt schnell zu hören, dass er oder sie lieber <strong> verwenden sollte. Aber warum ist das so?
Die Antwort ist eigentlich recht einfach, aber aus gewissen Gründen für den Anfänger irgendwie nicht sehr plausibel: Verwenden sie <b>, wenn sie Text fett aussehen lassen wollen und nehmen sie <strong>, wenn sie Text betonen möchten.
Der Anfänger nimmt sich diesen Ratschlag zu Herzen, er will schließlich nicht, dass seine Seite wegen technischer Kleinigkeiten ungelesen bleibt. Aber was stellt er fest? <b> und <strong> lassen beide den Text fettgedruckt aussehen, sie sind augenscheinlich identisch – also was soll diese unsinnige Unterscheidung? Wozu pochen die Profis so sehr auf das <strong>?
<b> (bold) wird bei jedem Browser fett dargestellt, <strong> hingegen wird nicht zwangsläufig auf allen Browsern fettgedruckt. Es gibt keine Konvention oder Regel dafür, dass <strong> bei all ihren Besuchern auch genauso dargestellt wird, wie auf ihrem Browser.
Um sicherzustellen, dass das Aussehen des <strong>-Tags zumindest auf allen Browsern mit CSS-Unterstützung identisch ist, sollten sie ein wenig mit CSS nachhelfen. Fügen sie den folgenden Codeschnipsel in ihr CSS-Datei ein:
strong
{
font-weight: bold;
}
Wir haben nun sichergestellt, dass <strong> auch bei (fast) all ihren Besuchern genauso aussieht, wie sie es sich wünschen, und weiter?
Wie bereits angesprochen ist <b> ein physisch-visueller HTML-Tag. Das <b>-Tag hat einen reinen Präsentationscharakter. Sie können hiermit z.B. einen Login- oder einen Navigationslink fett aussehen lassen, weil es nach ihrem optischen Empfinden besser aussieht und ihre Besucher schneller darauf aufmerksam werden, oder aber sie müssen beispielsweise gewissen Richtlinien folgen, da sie Bibliograph sind. Sie möchten diesen Login- oder Navigationslink oder ihren Text als Bibliograph aber nicht inhaltlich hervorheben. Sie möchten einen solchen Link, ein Wort oder was auch immer sie fettdrucken, nicht betonen.
Der Denkfehler vieler Anfänger ist jedoch, dass sie genau dass zu bezwecken versuchen, nämlich mit dem <b>-Tag ein Wort oder eine Phrase inhaltlich hervorzuheben, sie nutzen mit <b> nur leider das falsche HTML-Tag dazu. Wenn sie ein Wort oder Wortkette inhaltlich (semantisch) betonen möchten, dann sollten sie das <strong>-Tag benutzen.
Vielleicht waren sie selbst auch schon an diesem Punkt des Textes, haben aber immer noch nicht verstanden, wo jetzt genau der Knackpunkt liegt, denn schließlich sehen doch alle Benutzer dasselbe, ganz egal welchen der beiden Tags ich nun benutze, nämlich fettgedruckten Text.
Antwort: Lösen sie sich ein wenig von der Vorstellung, dass HTML-Tags rein visuelle Verwendung haben. Die Wahrheit ist: Ja, für normale und nichtbehinderte Besucher ihrere Seite ist es egal, ob sie <b> oder <strong> benutzen. Die Unterscheidung zwischen <b> und <strong> ist aber für Maschinen interessant.
Wenn sie sich noch nie für Suchmaschinen oder HTML-Seitendarstellung auf anderen Endgeräten (bspl. Mobiltelefone, Web-TV, Palm, Pocket-PC, PDA, Organizer, Smartphones, Displays in Autos etc.) beschäftigt haben (was für einen Anfänger absolut verzeihlich ist), dann wird ihnen die ganze Diskussion über <b> und <strong> vielleicht erst richtige Erleuchtung bringen, wenn sie anfangen sich mit diesen Themen zu beschäftigen und die alte <b>-<strong>-Diskussion in dessen Kontext setzen. Bis dahin versuchen sie vielleicht einfach, meine nachfolgenden Erklärungen einfach hinzunehmen.
Also fangen wir an: Wie wirkt sich der Ersatz von <b> durch <strong> auf Suchmaschinen aus?
Da ich ja bereits erklärt habe, dass <strong> einen Text inhaltlich betont, während <b> ihn „lediglich“ fett druckt, erkennt der Spider der Suchmaschine (Google, MSN, Yahoo! etc.), dass dieser Text besonders wichtig sein muss. Ein Wort oder eine Phrase, die von einem <strong>- und </strong>-Tag eingeschlossen ist, wird in seiner Relevanz bei der Suchmaschine höher bewertet, als der umliegende, nicht betonte Text.
Die Erkenntnis, dass Suchmaschinen die mit <strong> markierten Wörter als wichtiger ansieht, ist nicht endgültig „bewiesen“. Es handelt sich hierbei um ein Gerücht oder eine Theorie, was vor allen Dingen daran liegt, dass die Suchmaschinen ihre genauen Algorithmen geheimhalten. Dennoch: Sie sollten diesem Gerücht durchaus Glauben schenken.
„Wie sieht es denn im Gegenzug mit dem <b>-Tag aus? Wird dieser Tag von Suchmaschinen auch anders behandelt?“
Auch hier kann man keine endgültigen Aussagen machen, da man hier ebenfalls das Prädikat „Gerücht“ vergeben kann, aber man vermutet, dass das <b>-Tag entweder keine oder nur geringfügige Aufwertung von den Suchmaschinen erfährt.
Als zweites hat <strong> Bedeutung bei den sogenannten Screenreadern. Screenreader (frei übersetzt „Bildschirmableser“) sind Vorleseprogramme. Sie lesen den Inhalt einer Internetseite vor und sind daher ein extrem nützliches Mittel für Sehbehinderte und Blinde, damit auch diese Menschen Zugang zum Internet haben. Ein Text der mit <strong> markiert ist, wird von einem Screenreader auch betont vorgelesen. Sie würden diesen Menschen also helfen, wenn sie zwischen <b> und <strong> unterscheiden würden.
Unterscheiden sie also zwischen <b>- und <strong>-Tag, wenn mindestens einer der folgenden Punkte auf sie zutrifft:
- Sie unterscheiden aus Prinzip zwischen semantisch-logischen und physisch-visuellen HTML-Tags. Ihnen ist „sauberer“ HTML-Code wichtig.
- Da die Trennung von Inhalt, Struktur und Aussehen einer Webseite im Geiste des W3Cs ist und sie auf Nummer sicher gehen wollen, auch zukünftig am Puls von neuen W3C-Standards zu sein, trennen sie zwischen <b> und <strong>.
- Sie sind tolerant zu Sehbehinderten.
- Sie legen Wert auf ein optimales Suchmaschinen-Ranking.
„Was ist denn mit dem <i>- und dem <em>-Tag?“
Berechtigte Frage. <i>- und <em>-Tag verhalten sich zueinander exakt so, wie <b>- und <strong>-Tag. Auch hier hat <i> Präsentationscharakter, während <em> eine inhaltlich-semantische Betonung darstellt. <em> (to emphasize, dt. emphatisch, betonen, hervorheben) und <i> sehen meist identisch aus, da auch <em> auf den meisten Browsern kursiv dargestellt wird. Ähnlich wie beim <strong>-Tag sollten sie aber auch hier mit CSS auf Nummer sicher gehen und <em> wie folgt formatieren:
em
{
font-style: italic;
}
Der Unterschied zwischen <strong> und <em> ist, dass <strong> eine Steigerung von <em> ist. <strong> ist eine starke Betonung, während <em> „lediglich“ eine einfache Betonung ist..
Halten wir also fest: Es ist stets zu unterscheiden zwischen Tags für „typographic appearance“ (Gestaltung, Aussehen, Erscheinung) und Tags für „ideomatic usage“ (also für redensartlichen Gebrauch).
Diese essenzielle Faustregel wird ihnen noch häufiger über den Weg laufen, wenn sie sich hier nach vielleicht weiter in die Feinheiten des Webdesigns stürzen.
Schlusshinweise:
- <strong> soll <b> nicht ersetzen. Zwar erfuhr <b> in letzter Zeit eine Abwertung, was besonders auch damit zu tun hat, dass man seit HTML 4.0 und in Zukunft mit XHTML der Trennung von Inhalt, Struktur und Aussehen einer Webseite wieder mehr Bedeutung beimisst, aber sie dürfen <b> weiterhin benutzen.
- Setzen sie <strong> bitte maßvoll ein. Es hat keinen Sinn, wenn sie alle Texte ihrer Seite mit <strong> einschließen. Verwenden sie <strong> nur bei einzelnen Wörtern oder Phrasen in Fließtexten.