Webkrauts: Für mehr Qualität im Web.

Artikel

Validität und Semantik

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, h1–h6, 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:

• HTML/XHTML/WML/XML Validator „Validome.org“
• Markup Validation Service des W3C
• CSS Validation Service des W3C
• WDG HTML Validator
• WDG CSSCheck
• Semantic Data Extractor der QA-Initiative des W3C

Weiterführende Links

• Jens Meiert: XHTML kompakt: Von Besonderheiten über Semantik zu Validierung
• Heike Edinger und Timo Wirth: Retro-Coding: Semantischer Code ist der Anfang von gutem Design
• Heike Edinger und Timo Wirth: Semantischer Code – Definitionen, Methoden, Zweifel

Zum Autor:

Stefan Nitzsche ist Webdesigner und Webentwickler mit rund zehn Jahren Branchenerfahrung. Er engagiert sich bei den Webkrauts für Webstandards und ist Mitglied des German Chapter (GC) der internationalen Usability Professional‘s Association (UPA).

Info:

Validität und Semantik ist Beitrag Nr. 322

Autor:

Stefan Nitzsche am 5. Dezember 2007 um 00:00

Kategorie:

Adventskalender 2007

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   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.

   Kommentar von Matthias - 5. Dezember 2007 um 00:49

2. 2.
   

   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.

   Kommentar von patrick h. lauke - 5. Dezember 2007 um 01:09

3. 3.
   

   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.

   Kommentar von Moritz - 5. Dezember 2007 um 10:47

4. 4.
   

   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.

   Kommentar von ruepel - 5. Dezember 2007 um 12:45

5. 5.
   

   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).

   Kommentar von Dieter - 6. Dezember 2007 um 00:09

6. 6.
   

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

   Kommentar von Bernd - 6. Dezember 2007 um 12:10

7. 7.
   

   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…

   Kommentar von patrick h. lauke - 7. Dezember 2007 um 00:28

8. 8.
   

   kurz & knackig: Danke

   Kommentar von Ralph - 14. April 2008 um 21:30

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.