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

Artikel

Semantische Websites

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

• Retrocoding
• Was ist semantische Auszeichnung

Zum Autor

Björn Seibert aus Ludwigshafen beschäftigt sich seit einigen Jahren mit Webstandards. Als Webmaster einer Sportseite und Betreiber eines gut besuchten Weblogs zu den Themen Webstandards, Accessibility und Webdesign, erweiterte und vertiefte er seine Kenntnisse kontinuierlich. Im Sommer 2006 wird er sein Studium der Wirtschaftsinformatik an der Fachhochschule in Ludwigshafen abschließen und dann im Bereich der IT und/oder Webdesign und -entwicklung arbeiten.

Info:

Semantische Websites ist Beitrag Nr. 15

Autor:

Björn Seibert am 3. Dezember 2005 um 03:00

Kategorie:

Adventskalender 2005

Kommentare

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

1. 1.
   

   Hallo,

   das "gut besuchte Weblog" ist falsch verlinkt

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

   Pascal

   Kommentar by Pascal - 3. Dezember 2005 um 10:49

2. 2.
   

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

   Kommentar by Jens Grochtdreis - 3. Dezember 2005 um 13:02

3. 3.
   

   Dann geh es doch einfach ruhiger an! )

   Kommentar by Jörg Petermann - 3. Dezember 2005 um 18:53

4. 4.
   

   Hallo,

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

   tschuess
   [|8:)

   Kommentar by Sven Drieling - 16. Dezember 2005 um 03:23

Kommentar-Feed für diesen Beitrag

Entschuldige, das Kommentarformular ist zurzeit geschlossen.