Sinnhafte Websites - 1. Überschriften | Markup Webdesign Journal

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.

13 Antworten

Jeena Paradies am Feb 22, 2005 | Reply

Zum Navigationsmenü. Ich mache das zwar auch so, halte es aber eigentlich nicht für richtig im Submenü die Überschriften mit einem h4 kennzuzeichnen. In einem Weblog zum Beispiel weiß ich nie, ob es nicht auch noch eine h5 oder gar h6 Überschrift geben wird, denn ich kenne ja meinen zukünftigen Content nicht. Dann nämlich währe plötzlich die Überschrift des Submenüs wichtiger als die Unter-Überschrift im Text, wobei das Submenü eigentlich nur reine Metainformation ist. Ich kenne allerdings keine 100% befriedigende Antwort darauf was man dort stattdessen verwenden sollte, vielleicht ein strong?

Und zweitens sollte das nicht passieren, ohne gleichwertigen Ersatz zu schaffen.

Entweder verstehe ich dich nicht ganz, oder du die intention des w3c in Bezug auf XHTML2 ;-). Es wird nicht nur gleichwertiger ersatz geschaffen, sondern ein weitaus mächtigeres Werkzeug geschaffen, wodurch Herarchien weit über die h6 Grenze möglich sind und gleichzeitig fast auf das gruppierende element div verzichtet werden kann. Siehe dazu: XHTML2 The section element.
Björn am Feb 23, 2005 | Reply

Entweder verstehe ich dich nicht ganz, oder du die intention des w3c in Bezug auf XHTML2.

Nein, ich habe mich mit XHTML2 noch nicht wirklich beschäftigt. Ist ja auch noch etwas hin ;)

Danke für den guten Link! Bis heute abend im Chat.
Horst am Feb 23, 2005 | Reply

Zuerst einmal: Sehr nette Einführung :-)

Wegen h in XHTML2: Das ist einer der Gründe, weshalb ich mich schon sehr auf XHTML2 freue. Für mich persönlich besteht einen Artikel (oder was auch immer), immer auch einzelnen Bereichen, was man mit der hX-Abtrennung nur irgendwie halbherzig nachbaun kann. Mit sections (wie auch in docbook) schaut das schon viel sauberer aus IMO :-)

Das Beispiel, das hier geführt wird, kommt mir aber eher unglücklich vor. Da sind mehrere h-Elemente auf einer Ebene, was meiner Meinung nach irgendwie den Sinn von sections wieder aufhebt.
bs am Feb 23, 2005 | Reply

Bisher wurde ja nur vorgeschlagen, die h1-h6 Überschriften zu missbilligen bzw. zu entfernen.

Die Idee, die Wichtigkeit einer Überschrift an der Verschachtelung der Sektionen fest zu machen ist eigentlich ganz gut. Nur muss man auch sehen, dass es so evtl. zu einem Aufblähen des CSS kommt, wie z.B. in diesem Besipiel zu sehen:

h {font-family: sans-serif; font-weight: bold; font-size: 200%} section h {font-size: 150%} /* A second-level heading */ section section h {font-size: 120%} /* A third-level heading */
etc.

Mal sehn, wie die Entwicklung hier weiterverläuft.
Minz Meyer am Feb 25, 2005 | Reply

Ehrlich gesagt, zerbreche ich mir bei jeder Webseite aufs Neue den Kopf, wie ich die Überschriften aufteile. Nicht zu vergessen das title Element, welches hier ein wenig unter den Tisch fällt.

Ich denke das Hauptproblem dieser Überschriftenordnung ist einfach die, dass die h1 bis h6 Elemente zu einer Zeit eingeführt wurden, als das Web noch eindimensional war.

Und bei linearen Dokumenten macht das dann ja durchaus auch Sinn. Aber heutzutage kann man auf einer Webseite links floaten, rechts, oben, unten, wo auch immer und stellt auf einer Seite nicht nur unbedingt den jeweiligen relevanten Inhalt dar, sondern auch Navigationsleisten, Linklisten und so weiter.

Da halte ich den section Ansatz dann doch für sinnvoller, aber so richtig ausgegart scheint mir das auch noch nicht zu sein.

Schau mer mal was kommt.
Martin Labuschin am Okt 21, 2005 | Reply

Das H1 ist nicht das beste Element für den Titel der Seite. Wie bereits erwähnt, ist der -tag dafür da.

Vor kurzem habe ich mit Wolfgang Bartelme einen Artikel darüber geschrieben:

Deutsche Version
Englische Version
Markus Petschenig am Feb 13, 2006 | Reply

@ Labuschin: Wird der title-Tag im Bereich immer als erstes von den Screenreadern gelesen?

Wenn dies der Fall ist, dann wäre es natürlich angebracht die Überschrift(en) ersten Grades (H1) anderwertig zu verwenden. Aber andererseits wäre h1 besser geeignet, wenn User mit Browser surfen, bei denen CSS abgeschaltet ist, denn meines Erachtens schaut man nicht wirklich oft auf die Titelleiste des Browserfensters um den Titel des Dokuments zu entnehmen oder?

Kann mir eventuell jemand einen Screenreader für Testzwecke empfehlen? Wäre sehr dankbar!
Jakob am Feb 14, 2006 | Reply

In diesem Zusammenhang ist meiner Meinung nach noch erwähnenswert dem h Element ein Hintergrundbild zuzuweisen und den Headline-Text durch ein untergeordnetes span Element mit der Eigenschaft display:none; zu verbergen. Somit ist ja auch die Zugänglichkeit für Menschen, die Screenreader benutzen gewährleistet, Robots freuen sich und die Gestaltung der Überschriften erweist sich als flexibler.

MfG Jakob
Rahner am Aug 20, 2006 | Reply

Dieser Artikel ist wirklich hilfreich!
Danke!
Besonders die Stelle mit den Bildern innerhalb von werde ich in meinem neuen Portal verwirklichen.