Datum: 15.10.2008, 15:54 - Autor: Manko10

3. Semantik der Elemente

Es existieren in der HTML zwei Arten von Elementen: die logischen Elemente und die physischen Elemente. Die logischen Elemente sind die eigentlich wichtigen Elemente, sie dienen zur Auszeichnung von Text.
Die physischen Elemente sind so allmählich mangels vernünftig nutzbarer CSS-Standards in den HTML-Standard eingekleckert und dienen der unmittelbaren Formatierung von Text. Sie sollten aber mittlerweile der Vergangenheit angehören und sind nur noch in in Transitional-DTDs erlaubt, nicht aber in den Strict-Varianten (einen Link zu einem ebenfalls auf openwebboard.org veröffentlichten Tutorium zum Thema findest du im Fuß dieses Artikels).

Im Folgenden werden die häufigsten Fallen in der logischen Auszeichnung angesprochen.

3.1 Tabellen

Tabellen — wohl das meist missverstandene Element in der Hyptertext Markup Language. Schon lange ist es beinahe Tradition, Tabellen für das Layout der Seite einzusetzen. Es ist ja auch praktisch: so kann man seine Seite in einzelne Sektoren einteilen, die jeweils durch eine Zelle repräsentiert werden.
Doch das ist hochgradig Quatsch und ein typisches Beispiel für HTMülL. Tabellen sind Tabellen und nichts weiter. Sie dienen nicht zur Formatierung und nicht zum Layout, sie dienen dazu, tabellarische Daten als solche auszuzeichnen und dafür sollten Tabellen auch angewandt werden. Für das Layout der Seite sind <div>-Tags in Verbindung mit CSS zu benutzten.
Tabellarische Daten sind das, was du auch in Programmen wie Excel oder OpenOffice.org Calc erstellst, nichts anderes. Oft werden tabellarische Daten von Leuten, die sich seit neustem dem semantischen Webdesign verschieben haben, mit Auflistungen verwechselt. Tabellen werden wirklich nur für tabellarische Daten verwendet, auch nicht für Listen!
Daten sind dann tabellarisch, wenn sie in Zeilen und Spalten angeordnet sind.

Ein Beispiel für eine Tabelle:

Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: <table summary="Warenbestand"> <tr> <th>Art.-No.</th> <th>Bezeichnung</th> <th>Hersteller</th> <th>Preis</th> <th>Warenbestand</th> </tr> <tr> <td>342</td> <td>Toaster „Silver“</td> <td>Megatoast</td> <td>106,29 €</td> <td>503</td> </tr> <tr> <td>435</td> <td>Mixer M 321 „Supernova“</td> <td>Küchengeräte Meier</td> <td>22,13 €</td> <td>483</td> </tr> <tr> <td>436</td> <td>Mixer F 432 „Sierra“</td> <td>Küchengeräte Meier</td> <td>71,23 €</td> <td>1092</td> </tr> </table>

Die erste Zeile enthält die Kopfdaten <th> und darunter folgt der eigentliche Tabelleninhalt <td>.
Wer seine Tabelle noch weiter auszeichnen will, dem seien die Elemente <thead>, <tbody> und <tfoot> empfohlen; mit ihnen lässt sich die Tabelle noch weiter in einen Kopf, einen oder mehrere Körper und einen Fuß gliedern.

3.2 Listen

Und hier die Nummer Zwei der meist missverstandenen HTML-Elemente aller Zeiten: die Listen!
Listen dienen, wie sich unschwer am Namen feststellen lässt, zur Auflistung von Daten. Listen sind somit eine Unterstufe der Tabellen, aber während Tabellen immer zweidimensional sind (also Zeilen und Spalten beinhalten), sind Listen linear.
Wenn wir das obige Beispiel wiederaufgreifen, könnte eine Liste z.B: dazu dienen, alle Artikelbezeichnungen, die im Sortiment vorhanden sind, aufzulisten:

Code:
1: 2: 3: 4: 5: <ul> <li>Toaster „Silver“</li> <li>Mixer M 321 „Supernova“</li> <li>Mixer F 436 „Sierra“</li> </ul>

Dabei wurde eine ungeordnete Liste <ul> benutzt, da die Reihenfolge der Daten keine Rolle spielt.
Sollen die Artikel hingegen nach Namen sortiert werden, so wird eine geordnete Liste verwendet:

Code:
1: 2: 3: 4: 5: <ol> <li>Mixer F 436 „Sierra“</li> <li>Mixer M 321 „Supernova“</li> <li>Toaster „Silver“</li> </ol>

Die Unterscheidung zwischen geordneten Listen und ungeordneten Listen ist ein wichtiger aber häufig missachteter Punkt. Auch, wenn sich die Aufzählungszeichen hinterher durch CSS mit list-style-type ändern lassen, ist die Unterscheidung essenziell, da sie zur logischen Auszeichnung beitragen.
Listen dienen also zur Auflistung von Daten. Auflistungen müssen aber nicht immer wie oben aussehen. Auch Navigationen sind eine Auflistung von Links und sollten somit als ungeordnete Liste ausgezeichnet werden.

Das häufigste Missverständnis liegt aber nicht in den geordneten und ungeordneten Listen, sondern in den Definitionslisten.
Definitionslisten beschreiben einen Begriff und eine oder mehrere Definitionen dieses Begriffs. Hier werden oft fälschlicherweise Tabellen eingesetzt, aber die Daten einer Definitionsliste haben eindeutig Listencharakter.
Um diesen etwas umständlichen Sachverhalt zu erklären, dient wieder ein Beispiel. Zu jedem Hersteller sollen die Produkte aufgelistet werden. Dies ließe sich zum einen mit einer Tabelle erreichen, doch wäre dies semantsicher Unfug, da es sich genaugenommen um eine Auflistung handelt.
Definitionslisten bestehen aus der Liste selbst <dl>, Definitionsausdrücken <dt> und einer oder mehreren Definitionen der Definitionsausdrücke <dd>.
In unserem Falle sind die Hersteller die Definitionsausdrücke und die Produkte die Definitionen:

Code:
1: 2: 3: 4: 5: 6: 7: <dl> <dt>Megatoast</td> <dd>Toaster „Silver“</dd> <dt>Küchengeräte Meier</dt> <dd>Mixer M 321 „Supernova“</dd> <dd>Mixer F 436 „Sierra“</dd> </dl>

3.3 Textformatierungen

Ebenfalls ein sehr häufiges Problem: Textformatierung mittels HTML. Aber wir wissen ja jetzt: HTML ist nur zur Auszeichnung da, die Formatierung übernehmen die CSS.

3.3.1 Font-Tags

Ja, ja, ja! Das leidige Thema der Font-Tags. Ehemals von Netscape eingeführt, fanden sie rasch breite Verwendung. Wohl auch deshalb, weil CSS lange auf sich warten ließ.
Wer kennt es nicht: ein Text soll farbig und in einer anderen Größe dargestellt werden:

Code:
1: <font size="4" color="#ff0000">Lorem ipsum dolor sit amet, consectetur adipisicing elit…</font>

Doch das ist wieder einmal Quatsch! Ich nenne so etwas Hardcore-Verunglimpfung der schönen Markup-Sprache.
Sauberer ist die Verwendung eines <span>-Tags, das an sich keine feste logische Bedeutung hat — genau wie eine Formatierung.

Code:
1: <span class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span>

Der CSS-Code sieht dann so aus:

Code:
1: 2: 3: 4: .lorem { color: #f00; font-size: 130%; }

Basta!

3.3.2 Fetter Text und Kursive

Sehr häufig übersehen ist die Formatierung von fettem und kursivem Text. Wer benutzt sie nicht, diese kleinen unscheinbaren Biester Namens <b> und <i>? Sie haben sich zudem in den Strict-Standard eingeschlichen. Dabei haben sie dazu eigentlich keine Berechtigung.
Auch hier sollten Alternativen verwendet werden. Doch wer jetzt denkt: „O Gott, ich muss lange <span>-Romane schreiben“, der sei beruhigt. Es geht auch anders.
Wozu werden Texte denn fett oder kursiv gestaltet? Um sie hervorzuheben. Und genau dies kann man doch als Auszeichnung verstehen. Fetter Text soll besonders hervorgehoben werden und kursiver Text soll auch hervorgehoben werden, wenn auch nicht so stark, dass er aus dem übrigen Text herausfällt.
Für diese beiden Zwecke bietet der Standard die Tags <strong> und <em>. Sie entsprechen genau dem, was wir wollen: sie kennzeichnen Textpassagen als wichtig. Dass die Browser <strong> fett und <em> kursiv darstellen, muss dich dabei nicht beunruhigen. Dies ist nur eine Verabredung, um Einheitlichkeit zu gewährleisten, doch handelt es sich wirklich nur um logische Auszeichnungen, die auch ganz anders dargestellt werden könnte.

Ein Schlusswort noch zum Tag <u>: dieses Tag hat es nicht in den Strict-Standard geschafft. Um einen Text unterstrichen darzustellen, sind also <span>-Tags erforderlich. Doch hat der Rauswurf einen guten Grund: zum einen handelt es sich natürlich um ein physisches Element, zum anderen irritiert unterstrichener Text aber auch, da eine Unterstreichung im Web in aller Regel einen Link kennzeichnet, weshalb auf Unterstreichungen im Text verzichtet werden sollte.

3.3.3 Überschriften

Wozu gibt es eigentlich so viele Tags für Überschriften — gleich sechs Stück an der Zahl?
Nun, dies ist so, um Überschriften semantisch ordnen zu können. Dabei stellt <h1> eine Überschrift erster Ordnung dar (in diesem Artikel ist dies die Artikelüberschrift) und <h6> eine Überschrift letzter Ordnung (so weit komme ich in diesem Artikel aber nicht).
Die Überschriften werden also hierarchisch geordnet, wobei immer mit <h1> angefangen wird. Überschriften gleichen Ranges haben natürlich auch gleiche Tags. Du kannst ja einmal im Quelltext dieser Seite die Überschriftenhierarchie verfolgen. Sie folgt streng der logischen Ordnung.
Mit Überschriften können durch die Hierarchie Textzugehörigkeiten festgelegt werden, da genau festgelegt ist, welcher Teil zu welcher Überschrift gehört. Ebenso ist festgelegt, welche Überschrift welcher anderen untergeordnet ist. Dadurch lässt sich der Text in einzelne Teile gliedern.

Das Schlimmste, was einem oft begegnet, ist übrigens nicht eine falsche Überschriftenhierarchie, sondern die Vermeidung von Überschriften nach dem folgenden Muster:

Code:
1: <div class="heading">Meine Überschrift</div>

Das nimmt dem Text seine gesamte Logik und die Auszeichnung des Dokuments versinkt im Nebel der Spekulation.
Oftmals kommt der Impuls zu „Fake-Überschriften“ daher, dass <h1> für viele Leute viel zu groß ist. Doch wenn man bedenkt, dass sich dies alles mit CSS anpassen lässt, merkt man, wie lächerlich dieses Argument ist. Zudem ist <h1> viel kürzer als <div class="heading">.

3.3.4 HTML-Attribute

Kommen wir zum letzten Teil des Abschnitts über Textformatierungen.
Häufig werden HTML-Attribute zur Formatierung von Text eingesetzt. So z.B. color, align (oder oft das Element <center>), valign, height, width u.v.m.
Doch auch hier ist schnell ersichtlich, dass diese Art der Formatierung ein Fauxpas ist. Besser ist es, ein Element mit einem Attribut class zu versehen. Über dieses Attribut kann das Element dann später mit CSS formatiert werden und es besteht keinerlei Bedürfnis mehr, Attribute zu verwenden.

3.4 Abstände zwischen Absätzen

Oft gesehen und doch übersehen: die Erzeugung von Abständen zwischen Absätzen. Ein einzelner Absatz wird bekanntlich durch <p> gekennzeichnet. Doch will man nun den Abstand zum nächsten Absatz vergrößern, wird meist auf <br> zurückgegriffen. Es entstehen skurrile Konstrukte wie dieses:

Code:
1: 2: <p>Lorem ipsum dolor sit amet<br><br><br></p> <p>consectetur adipisicing elit…</p>

Man sollte sich hier fragen: „Wozu dient <br> überhaupt?“
Es dient nur zur Darstellung eines Zeilenumbruchs und befindet sich somit in der Grauzone zwischen logischen und physischen Elementen. Ob man es einsetzt, muss man also bis zur vollständigen Klärung durch einen neuen Standard mit sich selbst ausmachen.
Es dient aber auf keinen Fall zur Erzeugung von Abständen, zumal diese auch wieder eine Formatierung darstellen. Für die Erzeugung von Abständen sind die CSS-Eigenschaften margin und padding entworfen worden und sie sollten ihrer Bestimmung auch zugeführt werden, anstatt sich mit Zeilenumbrüchen herumzuschlagen.

3.5 Bilder und Hintergrundbilder

Heißt geliebt und abgrundtief gehasst: das <img>-Tag.
Es dient zur Einbindung von Bildern und wird rege genutzt. Hat aber nun eine Seite an bestimmter Stelle ein Hintergrundbild, so wird es auch hier eingesetzt und das ist wiederum Blödsinn. <img> dient zur Einbindung bestimmter Bilder, die auch direkt etwas mit dem Inhalt zu tun haben.
Wird hingegen ein Bild zur Verzierung oder zur Hintergrundverschönerung benötigt, winkt CSS nicht etwa mit dem Zaunpfahl, sondern mit der Eigenschaft background-image oder der Kurzform background. Aus verschiedenen Gründen sollte diese eingesetzt werden:

• die Grafik hat nicht unmittelbar etwas mit dem Text zu tun, sollt also separiert werden
• werden die Styles der Seite im Browser ausgestellt, verschwindet auch die Hintergrundgrafik, <img>-Grafiken bleiben aber
• Hintergrundgrafiken beeinflussen nicht das Ladeverhalten der Seite, wohingegen <img> den Browser veranlasst, solange zu warten, bis die Grafik vollständig geladen wurde

3.6 IDs und Klassen

Worin liegt der Unterschied zwischen den Attributen id und class? Richtig: eine ID gibt es auf der Seite nur ein einziges Mal.
Deshalb sollten IDs auch für einzigartige Seitenelemente verwendet werden. Eine typische Schlamperei liegt gleich im Aufbau der Seite:

Code:
1: 2: 3: 4: 5: <div class="wrapper"> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </div>

Bei allen vier Elementen handelt es sich um einzigartige Elemente, also um Unikate. Deshalb sollte auch eine ID Verwendung finden:

Code:
1: 2: 3: 4: 5: <div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div>

class-Attribute werden hingegen verwendet, wenn man verschiedene gleichartige Elemente auf einer Seite hat. Sie werden dann mit der gleichen Klasse versehen.

3.7 Links zum Thema

• Der Transitional-Wahn
• Sind HTML-Tabellen out?
• Tabellenloses Webdesign CSS
• e=css² - Barrierefreies Webdesign
• Should I use tables for layout?

Weiter geht es mit Teil 4…

Kommentar schreiben:

Ihre Blog-Website wird nicht gefordert. Bitte füllen Sie das Feld nicht aus:

Titel (optional):

Name (optional):

Kommentar: