Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Validität und Semantik

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Validität und Semantik

Semantik und Validität sind untrennbar miteinander verbunden, jedoch nicht identisch. Unterschiede und Abhängigkeiten zeigt Stefan Nitzsche hinter unserem heutigen Türchen.

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 Browser-eigene 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 Browser 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 Browser 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:

  • Nicht-semantische Dokumente sind nicht zwangsläufig invalide
  • Valide Dokumente sind nicht zwangsläufig semantisch
  • Validität ist Voraussetzung für maschinenlesbare Semantik

Nützliche Tools:

Weiterführende Links

Kommentare

Matthias
am 05.12.2007 - 00:49

Danke für diesen Artikel. :-)
Ein weiterer Punkt, der im Hinblick auf Semantik bei Webseiten eine Nebenrolle spielt, ist der positive Effekt bei der Indizierung durch Suchmaschinen.
Eine Überschrift ist ein Element, dem eine festgelegte Bedeutung zuteil wird. Durch bloße Formatierung für die Ausgabe (zum Beispiel großer dicker Text) kann dieses Merkmal ("Ich bin wichtig, denn ich bin eine Überschrift und kein Absatztext") nicht erreicht werden. Das ist durch überprüften und gültigen Code allein nicht zu erreichen.

Permanenter Link
Patrick Lauke

Patrick Lauke (Webkraut)
am 05.12.2007 - 01:09

Validität ist Voraussetzung für maschinenlesbare Semantik

aber nicht immer. zum beispiel, ein nicht-valides attribut in einem sonst validen dokument sollte normalerweise keine probleme der maschinenlesbarkeit hervorbringen...browser (und aehnliche "user agents") sollten solche sachen gemaess spezifikation einfach ignorieren.

Permanenter Link

Moritz
am 05.12.2007 - 10:47

Toller Artikel. Hab mich grade mit dem Thema beschäftigt und finde es gut, dass dieses Thema hier jetzt in aller Kürze behandelt wird, sodass es jeder verstehen kann.

Permanenter Link

ruepel
am 05.12.2007 - 12:45

Schöner Artikel: kurz, knackig und präzise. Mir ist es immer noch ein Rätsel wie man seine Webseiten nicht sementisch korrekt schreiben kann, denn jeder sollte doch wissen was ein Absatz und eine Überschrift ist und was zum Beispiel als inhaltliche Einheit aufgefasst werden kann. Wenn man nur etwas im Deuschunterricht aufgepasst hat, sollte man locker die div-, h- und p-Elemente richtig setzten können.

Permanenter Link

Dieter
am 06.12.2007 - 00:09

Danke für diesen sehr gelungenen und prägnanten Artikel zu Validität und Semantik sowie deren Zusammenhang.

Bezüglich der Semantik von HTML-Dokumenten möchte ich noch auf die Möglichkeit hinweisen, dass sich diese durch den Einsatz von Mikroformaten verbessern lässt (siehe auch Webkompetenz-Wiki: Mikroformate und mikroformate.de).

Permanenter Link

Bernd
am 06.12.2007 - 12:10

Sehr schöner Artikel (wie alle des Adventskalenders eigentlich). Vielen Dank auch an meinen Vorredner für die Hiinweise auf die microformats.

Permanenter Link
Patrick Lauke

Patrick Lauke (Webkraut)
am 07.12.2007 - 00:28

Bezüglich der Semantik von HTML-Dokumenten möchte ich noch auf die Möglichkeit hinweisen, dass sich diese durch den Einsatz von Mikroformaten verbessern lässt

...aber halt auf Probleme in Sachen Barrierefreiheit achten...

Permanenter Link

Ralph
am 14.04.2008 - 21:30

kurz & knackig: Danke :)

Permanenter Link

Die Kommentare sind geschlossen.