Validität und Semantik

Stefan Nitzsche, 5. Dezember 2007 – exklusiv für den Adventskalender 2007 der Webkrauts

Inhalt:

Definition

Validität und Semantik sind grundsätzlich verschiedene Dinge, auch wenn sie viel zu häufig in einen Topf geworfen werden.

Validität ist (in unserem Fall) die formale Gültigkeit eines Codes (z.B. HTML/CSS), geprüft gegen die verwendete Spezifikation oder Empfehlung des W3C. Die Validierung prüft im Idealfall alle in der Spezifikation oder Empfehlung festgehaltenen Bedingungen.

Semantik ist die dem Inhalt durch das Markup (HTML) verliehene Bedeutung.

HTML gibt dem Autor Mittel an die Hand, seinen Inhalt strukturell auszuzeichnen. Unter diesen Mitteln befinden sich viele Elemente, die den Text semantisch auszeichnen (strong, h1h6, p), aber auch solche, die bedeutungsfrei auszeichnen (div, span). Unter den Elementen, die eine nicht-semantische Auszeichnung ermöglichen, sind viele, die oft präsentationsbezogen verwendet werden (strike, b, i, big). Obwohl hier die Elemente valide verwendet werden und in der Darstellung, bedingt durch das UA Stylesheet einen ähnlichen Effekt hervorrufen, wie das bedeutungsvolle Pendant (b/strong, i/em), ergibt sich aus dem entstehenden Markup keinerlei Bedeutung.

Beispiele für Validität/Invalidität

  1. <strong><p>Lorem ipsum</strong></p>
  2. <p><strong>Lorem ipsum</strong></p>

Im ersten Beispiel ist sowohl die Verschachtelung fehlerhaft, als auch die Reihenfolge der Elemente. Ein Inline-Element wie strong darf niemals ein Block-Element wie p umschließen – ebenso dürfen Elemente nicht über Kreuz verschachtelt werden. Umschließt man ein Element, so schließt man dieses Element auch wieder innerhalb des umgebenden Elements (Wohlgeformtheit). Das zweite Beispiel zeigt die korrekte Vorgehensweise: das Block-Element umschließt wohlgeformt das Inline-Element.

Beispielhafte Auszeichnung von Überschriften

  1. <div class=“headline“>Lorem ipsum</div>
  2. <h1>Lorem ipsum</h1>

Bei beiden Beispielen kann die Darstellung im UA letztendlich identisch sein, jedoch ergibt sich aus dem ersten Beispiel keinerlei Gewinn für die Struktur des Dokuments – niemand erkennt durch bloße Interpretation des Markups, was nun mit dieser Auszeichnung gemeint ist. Einem UA wird nur durch das dafür bestimme Element h1 die Bedeutung des umschlossenen Inhalts klar – die Darstellung kann genau wie beim div-Element per CSS beeinflusst werden.

Ebenso wie die Benutzung des table-Elements zur präsentationsbezogenen Auszeichnung von Inhalten ist auch die ausschließliche Benutzung von div- und span-Elementen ein semantischer Fehlgriff – hier hat man das eine Übel durch ein nicht minder großes, anderes Übel ersetzt.

Fazit

Nützliche Tools

Bemerkungen/Erklärungen

Links zu diesem Thema: