Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Semantische Websites

Semantische Websites

Oft zitiert ist die »Semantik einer Website«. Das Beispiel der Überschriften in (X)HTML soll stellvertretend erläutern, worum es beim Einsatz der »semantisch relevanten« Elemente ankommt.

Beispiel Überschriften

Überschriften dienen als Titel einer Website (nicht zu verwechseln mit dem Einsatz im title-Tag), eines Textabschnitts oder verschiedene Bereiche einer Website. Sie sollten auch als solche eingesetzt werden. Nicht nur optisch, sondern auch sinngemäß bzw. technisch im Quelltext der Website – also als h1 bis h6.

Oft werden andere, in diesem Zusammenhang falsche, Elemente als Überschrift »missbraucht«. Beliebt hierbei das span-Tag oder ganz einfach in das b-Tag eingeschlossener Text. Als Überschriften sollte man aber nur die h-Elemente verschiedener Levels einsetzen und diese dann je nach Bedarf per CSS stylen. Das ist nicht nur sinnvoller, sondern es bringt eine Reihe von Vorteilen mit sich.

Es stellen sich vor der Verwendung der richtigen Elemente folgende Fragen für die Webdesigner:

  • Darf man nur eine h1-Überschrift pro Seite verwenden?
  • Muss man die Reihenfolge der Levels (1-6) genau einhalten?
  • Darf man ein Level überspringen?

Diese Fragen lassen sich nur schwer absolut richtig beantworten. Je nach Kontext fällt das mehr oder weniger leicht. Nehmen wir eine einfache (Dreier-) Struktur an.

  • Titel der aufgerufenen Seite
  • der Bereich mit den Inhalten
  • ein Navigationsmenü

Für den Titel verwendet man hier (naheliegend) das h1-Tag. Die Überschrift erster (der obersten) Ordnung, die der aktuell aufgerufenen Seite einer Webpräsenz ihren Titel gibt. Ähnlich einer Kapitelüberschrift z.B. Dieses Element, die Überschrift ersten Ranges (h1) sollte nur einmal vorkommen.

Die nächst »wichtige« Überschrift ist dann h2. Sie kann man dazu nutzen, die Seite in Untereinheiten einzuteilen. Innerhalb dieser Bereiche erfolgen dann weitere Gliederungsebenen. Wichtig ist die logische Gliederung der Inhalte. Daraus ergibt sich die Möglichkeit, alle Überschriften nach der h1 mehrfach zu verwenden. Genauso wie bei der Gliederung eines Textdokuments gibt es innerhalb eines Kapitels »zweitwichtige« Überschriften (bei Word z.B. Überschrift 2), »drittwichtige« etc. So kann sich beispielsweise folgende Überschriftenstruktur für eine Website ergeben:

  • h1
    • h2
    • h2
      • h3

Überschriften können mehrfach verwendet werden. Wichtig ist die logisch inhaltliche Gliederung, auch bei Websites.

Vorteile

Zum einen werden es einem die Suchmaschinen-Robots danken, bzw. wird man so durch bessere Suchergebnisse belohnt. Denn Suchmaschinen erkennen Überschriften nur durch entsprechende h-Tags als solche und können diese und folglich die weiteren Inhalte dementsprechend gewichten.

Weitere Gewinner sind Sehbehinderte, in diesem Fall sogar blinde, Besucher der Website. Diese lassen sich oft die verschiedenen Überschriften (nach Level) vorlesen, um sich besser auf der Seite zurechtfinden zu können. Screenreader geben so eine Art Inhaltsverzeichnis der aufgerufenen Seite aus, die Inhalte lassen sich gezielt ansteuern.

Die richtigen Elemente

Wie mit Überschriften verhält es sich auch mit einer Reihe weiterer Elemente in (X)HTML. Gute Websites weisen einen gut strukturierten Quellcode auf und verwenden stets die semantisch relevanten Elemente. Schlankerer Quellcode, schnellere Ladezeiten, mehr Zugänglichkeit und – quasi als kleine Belohnung – bessere Suchergebnisse sind die Vorteile einer gut strukturierten Website. Was für Überschriften gilt, muss bei anderen Elementen genauso berücksichtigt werden.

  • Textabsatz = Textabsatz -> P
  • Liste = Liste -> UL, OL, DL
  • Tabelle = Tabelle -> TABLE
  • Formular = Formular -> FORM

Weiterführende Links

Kommentare

Pascal
am 03.12.2005 - 10:49

Hallo,

das "gut besuchte Weblog" ist falsch verlinkt ;)

Danke für den Adventskalender und viele Grüße,

Pascal

Permanenter Link

Jens Grochtdreis
am 03.12.2005 - 13:02

Stimmt. Ist korrigiert. Was einem in der Hektik so durch die Lappen gehen kann. Danke für den Hinweis.

Permanenter Link

Jörg Petermann
am 03.12.2005 - 18:53

Dann geh es doch einfach ruhiger an! :))

Permanenter Link

Sven Drieling
am 16.12.2005 - 03:23

Hallo,

title-Element, span-Element, ... halte ich für die bessere Formulierung. Tag ist das Start- und End-Tag title -- /title.

tschuess
[|8:)

Permanenter Link

Die Kommentare sind geschlossen.