Semantisch korrektes (X)HTML
Mittels (X)HTML-Code (auch Quellcode genannt) wird z.B. dem Browser mitgeteilt was er wie auf dem Monitor darstellen soll. HTML ist eine “Auszeichnungssprache” wobei diese Definition auch gleich den Zweck beschreibt: Elemente (Text, Bild, Überschrift,…) in seiner Funktion bzw. Bedeutung auszuzeichnen.
Solche Auszeichnung (so genannte “Tags”) können sein:
- <h1> für Überschriften erster Ordnung
- <table> für tabellarische Daten
- <ul> für Listen (”unordered list”)
Werden diese Auszeichnungen für die richtigen Inhalte verwendet spricht man von semantisch korrektem HTML:
- der Text mit der Auszeichnung <h1> entspricht der wichtigsten Überschrift der Seite
- in <table> stehen nur tabellarische Daten wie z.B.: eine Tabelle mit Meßwerten und Vergleichswerte
- <ul> enthält Listen ohne Vergleichswert
Bei standardkonformen und semantisch korrektem HTML stehen die “Tags” immer direkt im Zusammenhang zu der Art dessen Inhaltes.
Dies wurde (und wird) nicht immer umgesetzt. Sei es nun aus Unwissenheit, Verwendung von WYSIWYG – Editoren (Software zur beinahe automatischen Erstellung von Web-Sites) oder schlichter Ignoranz.
Auch wurden lange Zeit unsichtbare Tabellen zum Platzieren von Texten und Grafiken verwendet oder Überschriften als normalen Text mit so genannten Inline-Formatierungen gestaltet – einfach aus Ermangelung anderer technischen Möglichkeiten.
Mit der Einführung von CSS trat jedoch eine Wende ein:
Jedem HTML-Tag konnte mit dieser Formatierungssprache ein eigenes Aussehen zugewiesen werden. Umfangreiche und komplexe Layouts wurden nun möglich und man besann sich dem eigentlichen Sinn und der Funktion von HTML: der Auszeichnung von Inhalten.
Die strikte Trennung von Inhalt (semantisch korrektes (X)HTML) und Layout (CSS-Datei) ist nun möglich und das Gebot der Stunde!
Dies bringt viele Vorteile – ein Auszug:
- Sämtliche Darstellungs-Programme und Endgeräte (Drucker, PDA,…) können fehlerfreies HTML korrekt umsetzen
- Der Quelltext ist sehr schlank, wird schnell geladen und umgesetzt, spart Kosten für Webspace und Traffic und erleichtert den Suchmaschinen die Indizierung
- Die Site ist auch ohne, mit deaktiviertem oder defektem CSS les- und navigierbar
- Die Darstellung der Site im Browser kann per CSS vorgegeben werden und ergibt ein browserübergreifend gleiches Erscheinungsbild
- Für die meisten Endgeräte (Drucker, PDA, Handy,…) kann ein eigenes CSS zugewiesen werden
- Suchmaschinen werten z.B. Texte, welche mit <h1> ausgezeichnet sind wichtiger. Dies kann für gezielte Suchmaschinenoptimierung genutzt werden
- Ebenso betonen Vorlesebrowser einen <h1>- Text mehr
- Tennung von Layout (CSS) und Inhalt (HTML) ermöglichen u.a. schnelle und einfache Layout-Wechsel
- dies und semantisch korrektes HTML ist der Grundstein für barrierefreie Web-Sites
Sites überprüfen – Validität
Das World Wide Web Consortium (W3C) bietet unter der Web – Adresse http://validator.w3.org ein gratis Validierungs- Service an.
Nach Eingabe der Webadresse (”Validate by URI”) erhalten Sie geg. einen vollständigen Fehlerbericht. Hier wird jedoch nur die korrekte Anwendung von (X)HTML-Tags geprüft, Semantik ist mit diesem Service nicht überprüfbar!
Predrag Kondic 09.07.2010 - 12:26 Uhr
Danke für den guten Beitrag! Hab ihn gleich getwittert! Gut das es jemand auf den Punkt bringt. Ich selbst entwickle schon lange barrierefrei. LG Predrag