Verwendung von b- und i-Elementen

Zielgruppe: HTML-Entwickler (die Web-Editoren/Texteditoren oder Scripte benutzen), Script-Entwickler (PHP, JSP u.a.) und alle, die Rat suchen, wie b- und i-Elemente in HTML zu verwenden sind

Frage

Sollte man b- und i-Elemente verwenden?

Die HTML5-Spezifikation definiert b- und i-Elemente neu und verleiht ihnen eine semantische Funktion, während sie bisher rein darstellungsbezogen waren. Da ihre Namen jedoch 'b' wie bold (fett) und 'i' wie italic (kursiv) lauten, werden Autoren sie vermutlich auch weiterhin als schnellen darstellungsbezogenen Fix einsetzen.

Dieser Artikel erklärt, warum das Probleme bei der Lokalisierung aufwerfen kann (und auch beim Umgestalten von einsprachigen Webseiten), und unterstreicht den Ratschlag, den die Spezifikation diesbezüglich gibt.

Antwort

Man sollte immer im Hinterkopf haben, dass der Inhalt eines b-Elements nicht immer fett angezeigt werden muss und der Inhalt eines i-Elements nicht immer kursiv. Die letztendliche Darstellung wird von den Angaben im CSS-Stylesheet bestimmt. Zu beachten ist auch, dass man für Inhalte in bestimmten Sprachen andere Stile als fett und kursiv bevorzugen sollte.

b- und i-Elemente sollten nicht verwendet werden, wenn es ein passenderes Element gibt, das den Inhalt besser beschreibt. Wenn b und i verwendet werden, ist es meist angebracht, Klassenattribute hinzuzufügen, die beschreiben, was mit der Auszeichnung beabsichtigt wurde, so dass verschiedene Anwendungsfälle voneinander unterschieden werden können.

Im Folgenden wird darauf detaillierter eingegangen.

Wofür b und i zu verwenden sind

Die HTML5-Spezifikation definiert die beabsichtigte Verwendung dieser Elemente folgendermaßen neu:

Das i-Element repräsentiert einen Textabschnitt in einer anderen Artikulierung oder Stimmung oder anderen Abweichung vom restlichen Text, die auf eine andersartige Qualität des Texts hindeutet; bspw. eine taxonomische Kennzeichnung, einen Fachbegriff, einen Begriff oder eine Redewendung aus einer anderen Sprache, eine Transliteration, einen Gedanken oder den Namen eines Schiffes in westlichen Texten.

Anmerkung des Übersetzers: Im Englischen ist es üblich, Begriffe und Redewendungen aus einer anderen Sprache und Namen von Schiffen kursiv zu setzen.

Das b-Element repräsentiert einen Textabschnitt, dem aus praktischen Erwägungen Aufmerksamkeit zuteil wird, ohne dass ihm eine besondere Bedeutung oder eine andere Artikulierung oder Stimmung verliehen wird; bspw. ein Schlüsselwort in einer Zusammenfassung, einen Produktnamen in einer Bewertung, einen Begriff für eine Nutzeraktion in einer interaktiven textbasierten Software oder den ersten Absatz (Vorspann, Leitsatz) eines Artikels.

Was gibt es zu beachten?

Die missbräuchliche Verwendung dieser Elemente kann die Lokalisierung (Übersetzung) von Inhalten erschweren.

Allgemeines: Die Verwendung von b- und i-Elementen kann problematisch sein, denn sie verführt Autoren dazu, weiterhin darstellungsbezogen zu denken, anstatt sie auf den Weg zu angemessenem semantischem Markup zu führen. Letztendlich verwischt es die dahinterstehenden Ideen. Ein Autor könnte schnell leichtfertig eines dieser Elemente benutzen, um Textpassagen anders darzustellen, anstatt innezuhalten und über Portabilität und Zukunftsgewandheit nachzudenken.

Bei der Internationalisierung können Probleme auftreten, denn die Darstellung wird für verschiedene Kulturen unterschiedlich sein müssen, insbesondere im Hinblick auf Fett- und Kursivschrift.

Beispiel Japanisch: In einem englischen Dokument mag Kursivschrift für Hervorhebungen, Dokumenttitel und Wendungen aus einer anderen Sprache eingesetzt werden, doch in einer japanischen Übersetzung wird nicht für alle drei Typen dieselbe Darstellung verwendet. Japanische Autoren werden sowohl Kursiv- als auch Fettschrift vermeiden, denn darin sehen ihre komplizierten Zeichen in kleinen Schriftgrößen nicht gut aus.

Bei der Anpassung ans Japanische können nun b- und i-Elemente durch Änderungen im CSS-Stylesheet anders dargestellt werden. Für Japaner mag der Inhalt besser verständlich sein, wenn Wakiten (Boten) für Hervorhebungen, Eckklammern für 『Dokumenttitel』 und doppelte spitze Klammern für 《fremdsprachige Begriffe》 verwendet werden. Dies sind in der japanischen Typografie gängige Zeichen, die im Englischen (oder Deutschen) nicht verwendet werden.

Problematisch ist es, wenn der englischsprachige Autor überall i-Elemente verwendet hat (mit der im Englischen gewünschten typografischen Darstellung im Hinterkopf). Bei der Übertragung ins Japanische ist es dann unmöglich, ohne größeren Aufwand verschiedene Stile für verschiedene Arten von Text zu verwenden.

Das Problem kann durch die Verwendung von semantischem Markup vermieden werden. Wenn der englischsprachige Autor <em>..</em> und <cite>...</cite> und <i class="foreignphrase">..</i> verwendet hätte, um die drei Fälle zu unterscheiden, wäre es bei der Übertragung möglich, einfach an einer Stelle das CSS zu ändern, um überall verschiedene Darstellungen für die drei Fälle zu erzielen.

Natürlich hätte der Autor auch span-Elemente anstelle von i oder b verwenden können. Der Unterschied wäre, dass es dann keinen Fallback zu kursiv bzw. fett gäbe, wenn keine Regeln für die Stile vorhanden sind.

Der einsprachige Blickwinkel: Mit der Zeit kann dies natürlich auch für einsprachige Seiten relevant werden. Nehmen wir an, das Corporate Design soll geändert werden, weil Namen von Dokumenten fett gesetzt besser aussehen als kursiv. Bei semantischem Markup ist es ein Leichtes, das Styling von Dokumentnamen auf der gesamten Website zu ändern, dazu genügt eine winzige Änderung im CSS. Wenn aber i-Elemente verwendet wurden, ohne die verschiedene Semantik zu unterscheiden, muss man jede einzelne Webseite nach relevanten i-Elementen durchsuchen und jedes einzeln ändern, damit man nicht auch das Styling von Hervorhebungen und fremdsprachigen Wörtern ändert.

Verwendung von Sprachattributen: Wenn gemäß Konvention fremdsprachige Worte und Wendungen im Inhalt kursiv gesetzt werden, mag es ausreichend erscheinen, ein vorhandenes lang-Attribut zur Identifikation dessen zu nutzen, was gestylt werden muss. Bsp. <i lang="fr">..</i>.

Das sollte man sich aber genau überlegen, denn das lang-Attribut beschreibt nur die Sprache des Textes, nicht die Semantik. Es wäre möglich, dass es zukünftig für fremdsprachige Texte je nach Kontext verschiedene Darstellungen geben soll.

Im Allgemeinen ist es deshalb sicherer, auch ein class-Attribut zu verwenden, um die Semantik zu beschreiben, und nicht das lang-Attribut zu überladen, z.B.

<p>There is a certain <i class="foreignphrase" lang="fr">je ne sais quoi</i> in the air.</p>.

Empfohlene Verwendung

Die HTML5-Spezifikation gibt zur Verwendung von i-Elementen folgende Empfehlung (Hervorhebung hinzugefügt):

Seitenautoren können bei i-Elementen class-Attribute setzen um zu verdeutlichen, warum das Element verwendet wurde. Wenn der Stil einer bestimmten Verwendung (z.B. eines Traums) später geändert werden soll, der Stil einer anderen Verwendung (z.B. einer taxonomischen Kennzeichnung) hingegen nicht, dann muss der Autor nicht das ganze Dokument (oder eine Reihe von Dokumenten) durchgehen und jede diese Verwendung erläutern.

Autoren sollten auch überdenken, welche anderen Elemente besser geeignet wären als das i-Element, z.B. das em-Element, um starke Betonung auszudrücken, oder das dfn-Element, um eine Definition eines Begriffes auszuzeichnen.

Entsprechende Formulierungen finden sich auch in der Beschreibung des b-Elements, wie der Satz: Das b-Element sollte als letzter Ausweg verwendet werden, wenn kein anderes Element passender ist.

In der HTML5-Spezifikation werden in Kapitel 4.5 Text-level semantics andere Elemente zur semantischen Beschreibung von Text aufgeführt: dfn, cite, var, samp, kbd u.a. http://www.w3.org/TR/html5/text-level-semantics

Man kann b- und i-Elemente im Wesentlichen als span-Elemente mit automatischer Fallback-Darstellung ansehen. Ebenso wie span-Elemente profitieren auch diese Elemente von Klassennamen, um Nutzen zu bringen.