<i>,<em>,<b> und <strong>: was verbindet diese HTML-Elemente?
HTML-Text kann man auf verschiedene Art und Weise gestalten. Man kann einerseits die Schrift ändern, andererseits lässt sich auch der Hintergrund individuell ausformen: Bei der ersten Variante werden Schriftgröße, Schriftgewichtung, Schnitt und Farbe, etc. beeinflusst, während bei der zweiten Variante der Hintergrund verschieden gestaltet wird. Hierzu gibt es zwei grundsätzliche Möglichkeiten:
1.) die Formatierung mittels CSS
2.) die Formatierung mittels HTML-Auszeichnung
Will man nur die optische Erscheinung des Textes ändern, wählt man die erste Methode - mittels CSS. Damit lassen sich Schriftgröße (font-size), Schriftfarbe (color), Gewichtung (font-weight) und alle nur erdenklichen Faktoren beeinflussen.
Warum gibt es dann auch noch immer die zweite Methode – die Auszeichnung mittels HTML-Tags? Sie ist nicht nur ein Überbleibsel aus der Zeit als HTML und CSS noch nicht getrennt waren. Naja, irgendwie hat es schon mit dem Urgedanken von HTML zu tun, Information einfach und schnell in strukturierter Form zu übermitteln. Aber warum macht man das heute noch, wo doch immer verlangt wird CSS von HTML zu trennen? Erstens obliegt die rein formale Gestaltung dem (nach Spezifikation) externen CSS und zweitens hat das mit Semantik zu tun. Hier kommen wir wieder dem Urgedanken von HTML näher, bei dem es um einfache, schnelle und strukturierte Textübermittlung geht.
Fettschrift: <b> und <strong>
Da gibt es zum Beispiel die Fettschrift: Mit CSS wird diese wie bekannt als {font-weight: 700;} notiert. Wenn man einfach nur die Erscheinung ändern will – egal wie sinnvoll es ist ohne inhaltliche Gründe das Aussehen zu verändern – wählt man diese Version. Aber jetzt gibt es auch noch die Tags <strong> bzw. <b>, die doch auch den von ihnen eingeschlossenen Text fett darstellen. Wann werden diese beiden verwendet?
Wer sich jetzt fragt, warum es zwei unterschiedliche Auszeichnungen für das selbe Erscheinungsbild gibt, ist bereits auf der richtigen Fährte. Wieder einmal handelt es ich um das mittlerweile oft bemühte Thema der semantischen Auszeichnung. Kurz: es wird hier zwischen Form und Inhalt (Logik) unterschieden. Der sehende Mensch nimmt vom Fließtext abweichendes automatisch als hervorgehoben war und interpretiert es für sich selbst. Eine assistive Maschine wie ein Screenreader braucht hierzu eine zusätzliche Unterscheidung, die auch klanglich erfolgen kann.
Wenn eine grafisch fette Auszeichnung nur optisch ersichtlich sein soll und keine andere Variante passt, dann erst wird das Tag <b> verwendet. Ist aber damit hingegen auch eine logische Bedeutung verbunden, kommt <strong> zum Einsatz. Dieses Element betont den Text stark. Das klingt jetzt kompliziert, ist es aber nicht. <strong> hebt etwas hervor, das auch beispielsweise durch eine andere Farbe oder Textgröße angezeigt werden könnte. Im Vergleich wäre das bei <b> äußerst unlogisch.
Beispiel 1 zeigt den unterschiedlichen Code bei gleicher Anzeige für das Auge:
In diesem Satz gibt es zwei Auszeichnungen, die fett dargestellt werden.
<p>In <strong>diesem</strong> Satz gibt es zwei Auszeichnungen, die <b>fett</b> dargestellt werden.</p>Kursivschrift: <i> und <em>
Analog zur Fettschrift verhält es sich mit der kursiven Schrift. Mittels CSS wird diese als {font-style: italic;} notiert. Im HTML-Teil wird sie durch die Tags <i></i> bzw. <em></em> ausgezeichnet. Ebenfalls sprachlich hervorgehoben wird das <em> (= emphasized), das nicht ganz so stark betont wird wie das vorangegangene <strong>. Browser stellen den so markierten Textbereich standardmäßig kursiv dar. Für die rein optische Auszeichnung von kursiver Schrift verwendete man früher das <i> (= italic), doch geschieht das zugunsten von CSS immer seltener. Anwendung findet es aber beispielsweise heute immer noch bei Fachbegriffen und unter anderem Buchtiteln.
Auch Beispiel 2 zeigt den unterschiedlichen Code bei gleicher Anzeige für das Auge:
In diesem Satz gibt es unterschiedliches Markup, das in beiden Fällen jeweils kursiv dargestellt wird.
<p>In diesem Satz gibt es unterschiedliches <i>Markup</i>, das <em>in beiden Fällen</em> jeweils kursiv dargestellt wird.</p>Als Eselsbrücke kann man sich merken: der kurze Tag entspricht meist einer visuellen Betonung, während der lange Tag auch gesprochen wird.
Wer jetzt Lust bekommen hat der Sache weiter auf den Grund zu gehen oder nach weiteren Beispielen suchen möchte, dem seien folgende weiterführende Links zu HTML5-Elementen empfohlen:
Mozilla Developer Network, W3C Working Draft: HTML-elements
