Die Trendwende hat bereits stattgefunden. Das W3C und andere Institutionen haben jahrelang daran gearbeitet ein altes Bewusstsein in die Köpfe der Webdesigner zurück zu bringen – und sie haben es geschafft. Die Semantik ist wieder da!
Aber was bedeutet Semantik für das Webdesign und wie wichtig ist sie wirklich?
Dieser Artikel wird sich nicht mit dem RDF-Modell, der Web Ontology Language (OWL) oder gar dem FOAF (Friend of a Friend) Projekt befassen. Es geht vielmehr um die semantische HTML-Programmierung wie sie einmal war und wie sie wieder sein sollte.
<h1> bis <h5> für Überschriften. Sie sind wichtig für Screenreader, die zwischen den Tags springen können und Suchmaschinen. Google behandelt den <h2>-Tag bevorzugt.
<b> und <i> sind rein gestalterische Tags und gelten deswegen als deprecated (abgelehnt). Hierfür werden jetzt <strong> und <em> benutzt, die dem Text die Bedeutung “hervorgehoben” verleihen.
<ul> oder <ol> werden für alle Arten von Aufzählungen und Listen verwendet. Das können horizontale wie auch vertikale sein. Dazu zählen auch Menüs.
<blockquote> und <cite> für ein Zitat und deren Quelle.
<code> für die Darstellung von Code.
<table> sollte nur noch zur strukturellen Formatierung von Text verwendet werden, nicht mehr für das Layout einer Website.
…
HTML – ein kurzer Überblick
Im Jahre 1990 wurde HTML zur Standard-Auszeichnungssprache für das Internet erkoren. Damals war HTML vom Grunde auf semantisch. Mit den Jahren kamen immer mehr Elemente hinzu, die keine Bedeutung für die Struktur hatten sondern als reine Designelemente fungierten. Das Web wurde zusehends unsemantischer.
Um dem entgegen zu wirken erschuf das W3C 1999 einen neuen Web-Standard: XHTML (eXtensible HyperText Markup Language). XHTML trennt Inhalt und Design, verwendet wieder die semantischen Tags des HTMLs und basiert auf XML, was es plattformunabhängig macht und erweiterbar.
Ob in “strict” oder “transitional” – XHTML hat sich heute etabliert und wird von allen ernstzunehmenden Websites verwendet.
Was bedeutet Semantik für die HTML-Programmierung?
Ursprünglich bestand HTML ausschliesslich aus semantischen Tags. Semantische Tags verleihen einer Information bzw. einem Inhalt neben einer optischen Auszeichnung in erster Linie eine Bedeutung innerhalb der Struktur einer Internetseite. Ein <h1> bis <h5> formatiert einen Text fett, in einer bestimmten Schriftgröße und zeichnet ihn als Überschrift aus. Mit <em> (von engl. emphasized = hervorgehoben) wird anstatt des <i> ein Text kursiv ausgezeichnet und betont.
Doch Semantik geht noch weiter. Sie sieht eine strikte Trennung zwischen Design (CSS) und Inhalt vor. Das bedeutet, dass die .html-Datei lediglich noch die Information, strukturiert durch die entsprechenden semantischen Tags, enthält. Bilder, die dem Layout dienen werden ausgelagert und <img>-Tags nur noch für informative und dem Inhalt zugehörige Bilder verwendet.
Ein semantisch korrektes Layout muss nicht gleichzeitig puristisch aussehen. Man sollte lediglich darüber nachdenken, ob man an Stelle eines Div-Containers ein gegebenes Tag verwenden kann.
Semantik in der Paxis
Nehmen wir nochmal die h-Tags (Überschriften). <h1> bis <h5> sind von Hause aus Blockelemente. Das bedeutet natürlich auch, dass ihnen alle Attribute eines Blockelementes zugewiesen werden können. Das kann vom Background über einen Float bis hin zu position: absolute gehen. Anstatt also einen h-Tag in einen Container zu packen kann man diesen auch selbst wie einen behandeln.
Sehr populär ist auch die Verwendung von display: inline und display: block. Man kann z. B. Listenpunkte in Inline-Elemente umwandeln, um sie horizontal aufzureihen. Ein gängiges Prinzip bei Navigationen.
Andersherum können z. B. <a> und <span> als Block-Elemente formatiert werden…
Derlei Beispiele gibt es noch viele und dem Ideenreichtum werden nur durch die Interpretationsfähigkeit des Browsers Grenzen gesetzt, allen voran der IE6. Ob man noch konform und valide arbeitet oder bereits den Pfad der Semantik verlassen hat verrät einem der Markup Validation Service – unentbehrlich für jeden Webdesigner.
Quellen:
TED: Tim Berners-Lee on the next Web
Semantic Web
Semantisches Web
Retro-Coding: Semantischer Code ist der Anfang von gutem Design
