22.02.05Sinnhafte Websites - 1. Überschriften
Es geht um die sinnvolle Struktur einer Website oder den zweckmäßigen Einsatz der verschiedenen Elemente. Die einen werden sagen: Das klingt interessant und man könnte sich mal darüber Gedanken machen. Andere hingegen werden es vielleicht für puristische Gedankenspiele halten. Wo man doch mit (s)einer Website nur Spaß haben möchte bzw. über ein bestimmtes Themengebiet informieren will. Gerade der Informationsgedanke und die Interpretation einer Website sowie die Anfragen der Suchmaschinen verlangen nach einer guten Struktur und logischen Reihenfolge der Inhalte des (X)HTML-Dokuments. Teil 1 dieser Serie wird sich mit den Überschriften beschäftigen.
Es gibt nicht die beste Struktur für eine Website. Es gibt aber für verschiedene Zusammenhänge und bestimmte Bereiche einer Website die richtigen Elemente. Nach und nach werde ich hier auf die wichtigsten (Überschriften, Textabsätze, Listen und Tabellen) Bestandteile ein wenig eingehen. Es geht hier auch nicht darum, zu zeigen, dass das Layout einer Website aus CSS gemacht wird. Das werden die meisten Leser meines Weblogs wissen.
Überschriften
Überschriften dienen als Titel einer Website, eines Textabschnitts oder verschiedene Bereiche einer Website. Sie sollten auch als solche eingesetzt werden. Nicht nur optisch, sondern auch sinngemäß bzw. technisch im Markup (Quelltext) der Website - also als h1, h2, h3, h4, h5 und h6. Warum das so ist wird im Anschluss noch geklärt.
Leider wird das h-Element allzuoft nicht genutzt. Immer noch vorhandene Vorurteile sehen dieses Element als zu groß, fett und hässlich. Deswegen werden oft andere in diesem Zusammenhang falsche Elemente als Überschrift “missbraucht”. Beliebt hierbei das span-Tag. Als Überschriften sollte man nur die h-Elemente verschiedener Levels einsetzen und diese dann je nach Bedarf per CSS stylen.
Es gab schon einige Diskussionen darüber, wie diese Überschriften eingesetzt werden sollten. Fragen waren beispielsweise:
- 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 Website (auch als Link zur Homepage genutzt)
- der Bereich mit den Inhalten
- ein Navigationsmenü
Für den Titel verwendet man hier (naheliegend) das h1-Tag. Die Überschrift erster (der obersten) Ordnung. Vielleicht so wie den Titel eines Buches. Meiner Meinung nach sollte dieses Element auch nur einmal pro Seite vorkommen - was nicht zwangsläufig der Titel der Website sein muss.
Der Inhalte Bereich hat oft zwei bis drei verschiedene Arten von Überschriften. So könnte man das Thema mit h2 überschreiben und verschiedene Unterkategorien oder Textabschnitte mit h3.
Für das Navigationsmenü bzw. Bereiche innerhalb dieser Navigation würde man dann h4 wählen.
Es wäre nicht absolut falsch nach der h1-Überschrift lauter (unterschiedlich gestylte) h2-Elemente zu verwenden. Allerdings macht eine gewisse Hierarchie mehr Sinn. Es heißt ja auch Überschrift x-ten Ranges, was eine unterschiedliche (abnehmende) Wichtigkeit der verschiedenen Überschriften unterstellt.
Lohn der “Mühen”
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 entsprechend 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. Die Struktur und die Inhalte der Website lassen sich für diese Menschen so besser verstehen.
Es gibt aktuell noch Befürchtungen, dass diese Gliederung der Unterschriften sich bald erledigen könnte. Im Zusammnhang mit XHTML2 sollen diese missbilligt sein. Es dann lediglich noch eine Überschrfit, schlicht h, geben. Nur erstens wird es noch sehr lange dauern bis XHTML2 flächendeckend verwendet werden kann (größtes Problem ist die fehlende Abwärtskompatibilität des neuen Standards). Und zweitens sollte das nicht passieren, ohne gleichwertigen Ersatz zu schaffen.
Sinnhafte Title-Tags
Auch ein wichtiger Aspekt, nicht nur um die Website für Suchmaschinen zu optimieren, sind sinnvolle Titel für Websites. Diese werden im title-Element im <head>-Bereich der Website festgelegt. Manuela hat hierzu einen interessanten Artikel geschrieben, der auch erklärt, wie man die Titel-Struktur bei Movable-Type anpassen kann.
