• 
• 
• 
• 
• 
• 
• 
• 1

14. Oktober 2009

Typo-Kolumne: Return of the BI

Seit Jahren bläuen wir Neulingen im Web, Kunden und Kollegen ein: Eine moderne Website trennt den Inhalt von der Darstellung. Der Inhalt gehört allein ins HTML, das Design gehört ins CSS-File. Eines unserer Standardbeispiele war immer: Text, der betont werden soll, muss mit <em> ausgezeichnet werden, nicht mit <i>. Analog dazu gibt es besonders wichtige Textstellen, die mit <strong> ausgezeichnet werden, ja nicht mit <b>. Insbesondere muss betonter Text nicht immer kursiv dargestellt werden und wichtige Stellen nicht notwendigerweise fett.

Ich habe eigentlich gedacht, wir müssten darüber nicht noch einmal reden. Webworker sorgen selbst dafür, dass diese Stellen richtig ausgezeichnet werden. Und die relevanten WYSIWYG-Editoren vergeben in der Regel die richtigen Elemente. Nun kommt HTML5 daher und reaktiviert <i> und <b>, indem es beiden eine neue Bedeutung gibt. Zurzeit – im aktuellen Editor's Draft vom 12. Oktober 2009 – liest sich das wie folgt:

Gewöhnlich kursiv, aber nicht unbedingt

Die Übersetzung des betreffenden Absatzes für das i-Element lautet etwa: "Das i-Element repräsentiert einen Teil des Textes in einer anderen Stimme oder Stimmung, oder anderweitig vom normalen Fließtext abgesetzt, wie etwa ein Stichwort, ein technischer Ausdruck, ein Ausdruck in einer anderen Sprache, ein Gedanke, der Name eines Schiffes, oder anderer Text, der gewöhnlich kursiv dargestellt wird."

Zum Beispiel:

<p>Die <i class="taxonomy">Felis silvestris catus</i> ist niedlich.</p>

Nun ist zwar die Rede davon, dass der Text „gewöhnlich kursiv" dargestellt wird, aber ein paar Absätze später erklärt das Dokument, dass das Element natürlich per CSS gestaltet werden kann. Somit muss es nicht unbedingt kursiv erscheinen. Webworker werden dazu ermutigt, gleich eine Klasse zu vergeben, um Fachbegriffe zum Beispiel von Traumsequenzen unterscheiden – und auch unterschiedlich darstellen zu können.

Fett und bedeutungslos

Analog sieht es beim b-Element aus, Übersetzt etwa: „Das b-Element zeichnet einen Teil des Textes aus, der gestalterisch vom normalen Fließtext abgehoben werden soll – ohne eine zusätzliche Bedeutung zu erhalten. Etwa die Schlüsselwörter in der Zusammenfassung eines Dokumentes, die Produktnamen in einer Rezension, oder andere Teile eines Textes, der für gewöhnlich fett dargestellt wird."

Zum Beispiel:

<p>Du betrittst einen kleinen Raum. Dein <b>Schwert</b> strahlt heller. Eine <b>Ratte</b> huscht um die Ecke.</p>

Auch hier gelten dieselben Überlegungen wie beim i-Element: Es ist sinnvoll, gleich Klassen zu vergeben, um verschiedene „fette" Begriffe unterscheiden zu können. Und am Ende muss die Auszeichnung natürlich nicht wirklich fett sein.

Alte Bekannte

Unsere beiden bekannten Elemente <em> und <strong> bleiben zusätzlich erhalten und behalten ihre Bedeutung bei: Das em-Element steht für die Betonung des Inhalts. Das strong-Element repräsentiert eine hohe Bedeutung für den Inhalt.

Beispiele:

<p><strong>Warnung.</strong>Dieser Dungeon ist gefährlich.</p> <p><em>Katzen</em> sind niedliche Tiere.</p>

Beide Elemente können ineinander verschachtelt werden und erhalten so eine höhere Betonung/Bedeutung.

Beispiel:

<p><strong><strong>Nimm keine der Diamanten</strong>, sie sind explosiv und <strong>werden alles in einem Radius von zehn Metern zerstören.</strong></strong>Du wurdest gewarnt.</p>

Theorie und Praxis

In der Theorie könnte ich dieser Unterscheidung ja vielleicht noch etwas abgewinnen. In wissenschaftlichen Texten zum Beispiel könnten wir so Fachausdrücke oder Namen von anderen Forschern mit einem <b class="name"> und <b class="term"> auszeichnen. Die Begriffe könnten so anders formatiert werden, haben aber ansonsten keine weitere Bedeutung. In der Praxis hingegen ist das System nur noch nervig und fehleranfällig. Ich muss mir immer überlegen, ob eine Textstelle fett werden soll, weil sie wichtig ist oder weil sie lediglich grafisch hervorgehoben werden soll. Zumal wir mit den Elementen b und i wiederum unsere schöne Trennung zwischen Inhalt und Design aufheben.

An die neue Bedeutung müssen sich Webworker erst gewöhnen. In meinem Beispiel oben mit den Namen greift das System zunächst nicht richtig. Die Namen werden in wissenschaftlichen Texten oft in Kapitälchen dargestellt, also weder fett noch kursiv. Dennoch ist auch hier ein b (oder ein i) vorgesehen. Ich für meinen Teil fühle mich da mit einem <span class="name"> besser aufgehoben. Dann können wir aber gleich alle diese Fälle mit einem span abdecken.

Die Elemente b und i haben zwei kleine Vorteile: Bei großen Websites, die tausendfach am Tag aufgerufen werden, sparen die kürzeren Elemente gegenüber einem span spürbar an Traffic. Außerdem zeichnen sie im Gegensatz zu einem span einen Text auch dann physisch aus, wenn CSS abgeschaltet ist.
Trotzdem sind es keine Gründe, die die Elemente rechtfertigen. Schließlich muss ich auch an Kunden und Redaktionssyteme denken. Ich möchte keinem meiner Kunden zumuten, zwischen vier Symbolen für die verschiedenen Fälle von kursiv und fett zu entscheiden.

Noch liegt HTML5 freilich nicht in einer finalen Fassung vor. Vielleicht kommen wir also darum herum, b und i unnötig mitzuschleppen. Schließlich schafft es HTML5 ja auch, auf das <acronym> zu verzichten, weil es zu verwirrend war, sowohl das <abbr> als auch das <acronym> zu nutzen. Nun soll es eben nur noch das <abbr> geben.

Ein ähnlicher Verzicht wäre auch in diesem Fall sinnvoll: <em>, <strong> und für den Rest der Fälle <span>. Das reicht vollkommen aus. Diesbezüglich lieferte XHTML2 die bessere Lösung: Es verzichtete auf alle Elemente, die rein für die Formatierung zuständig waren, also b, i, small, big, tt, font und basefont. Daran könnte sich auch HTML5 orientieren.

Weniger Elemente, weniger Verwirrung.

Nicolai Schwarz arbeitet unter dem Namen „textformer mediendesign" in Dortmund. Als selbstständiger Designer und Webentwickler beschäftigt er sich dabei hauptsächlich mit Drupal-Projekten. In seiner Freizeit ist er als Redakteur und Autor bei den Webkrauts tätig und engagiert sich im Dortmunder Kreativ-Verein 51° Nord.

Thomas Scholz 14.10.2009
um 20:12 Uhr Ich bin sehr dankbar, daß die beiden Elemente nicht dem Mythos der »Trennung von Inhalt und Layout« geopfert wurden (siehe Link).
Ob ich <span class=""> schreibe und es im Stylesheet bloß kursiv setze, oder ob ich gleich <i> benutze, das auch im Textbrowser ankommt - in beiden Fällen habe ich doch im Hinterkopf, daß die Präsentation eben auch eine Aussage transportiert. <i> ist bloß einfacher und »hält länger durch«.

Wer das vergißt oder gar nicht erst versteht, der lasse seine Hände bitte von der Gestaltung einer Website ...

Ich kennzeichne auch Kommentare in Quellcode-Darstellungen mit <i>. Da »bedeutet« es genau das Gegenteil von <em>, und diese Bedeutung kommt genau deshalb an, weil es eine Standarddarstellung dafür gibt. #zitieren

• html,
• tag,
• typografie