Accesskey n springt zur Seitennavigation. Springe zum Inhalt.

Dieses Dokument ist eine Übersetzung. Im Falle von Abweichungen oder Fehlern sollte das aktuelle englische Original als maßgeblich angenommen werden. Das W3C besitzt das Copyright am Original, wie unten beschrieben.

Übersetzer: Gunnar Bittersmann

s_gotoW3cHome Internationalisierung
 

Verwendung von b- und i-Elementen

Zielgruppe: XHTML/HTML-Autoren (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?

Hintergrund

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, bspw. eine taxonomische Kennzeichnung, einen Fachbegriff, einen Begriff oder eine Redewendung aus einer anderen Sprache, einen Gedanken, den Namen eines Schiffes oder etwas anderes, dessen typische typographische Präsentation kursiv erfolgt.

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, der sich stilistisch vom restlichen Test abhebt, ohne dass ihm eine besondere Bedeutung verliehen wird, bspw. ein Schlüsselwort in einer Zusammenfassung, einen Produktnamen in einer Bewertung oder etwas anders, dessen typische typographische Präsentation fett erfolgt.

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: Dass in einem englischen Dokument Kursivschrift für Hervorhebungen, Dokumenttitel und Wendungen aus einer anderen Sprache eingesetzt wird, heißt nicht, dass in einer japanischen Übersetzung für alle drei Typen dieselbe Darstellung verwendet wird. 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 lang-Attributen: Wenn gemäß Konvention fremdsprachige Wörter und Wendungen im Inhalt kursiv gesetzt werden, mag es ausreichend erscheinen, das lang-Attribut zur Identifikation dessen zu nutzen, was gestylt werden muss. Bsp. <i lang="fr">..</i>.

siehe Anmerkung des Übersetzers oben

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

Im Allgemeinen ist es 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 wird empfohlen, bei i-Elementen class-Attribute zu 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.

In der HTML5-Spezifikation werden in Kapitel 4.6 Text-level semantics andere Elemente zur semantischen Beschreibung von Text aufgeführt: dfn, cite, var, samp, kbd u.a. http://dev.w3.org/html5/spec-author-view/text-level-semantics.html#text-level-semantics

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

Sagen Sie uns, was Sie denken (auf Englisch).

Abonnieren Sie unseren RSS-Feed.

Neue Ressourcen

News auf der Startseite

Twitter (News auf der Startseite)

‎@webi18n

Literaturhinweise

Autor: Richard Ishida, W3C. Übersetzer: Gunnar Bittersmann.

Valides XHTML 1.0!
Valides CSS!
Kodiert in UTF-8!

Übersetzung der englischen Version vom 2010-07-12. Letzte Änderung der übersetzten Version am 2011-01-26 UTC.

Suchen Sie nach qa-b-and-i-tags im i18n-Blog, um alle Dokumentänderungen nachzuvollziehen.