Inhalte semantisch auszeichnen

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Entkoppelt man das Aussehen von dem Inhalt einer Website mit .css-Dateien und entnimmt dem HTML alle Tags und Attribute, die das Design betreffen, beginnt der übrig bleibende Code eine merkwürdige Form anzunehmen: Er beschreibt nur noch die reine Struktur und semantische Bedeutung der Inhalte auf der Seite. Weil das gesamte Aussehen der Seitenelemente mit CSS gesteuert wird, werden Sie Tags benutzen, welche die Struktur und Bedeutung der Seitenelemente beschreiben, anstatt darauf zu achten, wie sie aussehen sollen. HTML-Code, befreit von den meisten oder allen Informationen zur Darstellung der Elemente, kann so die Semantik der Inhalte Ihrer Seite widerspiegeln.

Ein solch klarer, aufs Wesentliche reduzierte HTML-Code hat viele Vorteile: Man findet sich darin wesentlich besser zurecht, wenn man eine Veränderung vornehmen muss oder Code für eine andere Seite duplizieren möchte. Versuchen Sie es selbst: Nehmen Sie eine vernünftig aufgebaute CSS-Seite und lassen Sie sich ihren Quelltext im Browser anzeigen. Sie werden den semantischen HTML-Code innerhalb von 10 Sekunden nachvollziehen können. Bei derselben Seite mit sämtlichen Designelementen in HTML werden Sie deutlich länger brauchen.

Seiten mit einem hohen Anteil an semantischem HTML erzeugen daher auch wesentlich bessere Ergebnisse bei Internet-Suchmaschinen. Je weniger Designelemente eine Seite enthält, desto höher ist ihre Dichte an Inhalt. Bei der Suche nach einem gewünschten Schlüsselwort ist die damit in Zusammenhang stehende Schlüsselwortdichte auf einer Seite ausschlaggebend dafür, wie hoch eine Seite in der Liste der Suchergebnisse angezeigt wird.

Egal, welche Seite Sie entwickeln, mit CSS können Sie die Schlüsselwortdichte an den entscheidenden Stellen deutlich erhöhen. Wir werden noch sehen, wie man einem HTML-Element seinen Platz auf der Seite mit Stylesheets frei zuweisen kann – unabhängig davon, wo es im HTML-Dokument aufgeführt wird. So kann ein komplexes Texteingabeformular, das im Code eine recht umfangreiche Ansammlung von HTML-Tags ergibt, einfach an das Ende eines HTML-Dokuments gestellt werden. Die Schlüsselwortdichte im oberen Teil wird damit erhöht und das Texteingabeformular nachträglich mit CSS ganz nach oben auf die Seite gestellt.

Immer mehr moderne Browser unterstützen ein spezielles Attribut im <link>-Tag (vor allem das media-Attribut), das ein externes Stylesheet nur dann aktiviert, wenn die Seite mit einem speziellen Browser oder Display-Typ aufgerufen wird. Mit dieser Funktion kann man zum Beispiel drei .css-Dateien mit einer HTML-Seite verlinken: eine für die Darstellung der Seite in normalen Desktop-Browsern, eine für die Darstellung einer Druckversion und eine für die Darstellung auf mobilen Endgeräten wie etwa einem PDA (Personal Digital Assistant) oder Handy. Der gleiche Inhalt wird so in drei verschiedenen, auf die speziellen Medientypen zugeschnittenen Darstellungsformen verwertet – eine weitere Möglichkeit, die sich nur durch die strikte Trennung von CSS und semantischem HTML ergibt.

Nicht zuletzt profitieren auch Browser für sehbehinderte Benutzer von der reinen semantischen Auszeichnung einer Website. Näheres dazu im nächsten Abschnitt.

  

<< zurück

vor >>