Überschriften

Überschriften strukturieren Text und gliedern den Inhalt einer Seite. Für sehende Besucher sind Überschriften meist klar erkennbar. Nutzer von Hilfsmitteln wie einem Screenreader können solche optischen Merkmale jedoch nicht wahrnehmen und brauchen "logische", im Quelltext der Seite festgehaltene Auszeichnungen.
Stand 24.10.2012

Inhaltsübersicht:

1. Gliederung von Texten durch Überschriften
2. Abstufung von Überschriften durch verschiedene Ordnungen
3. Überschrift h1 - nur einmal oder beliebig oft pro Seite?

Gliederung von Texten durch Überschriften

Überschriften (engl. Headings) gliedern die Inhalte einer Seite in Abschnitte. Für sehende Besucher sind Überschriften i.d.R klar erkennbar: Sie sind größer, haben eine andere Schrift oder sind durch Rahmen und spezielle Hintergrundfarben hervorgehoben. Nutzer eines Screenreader, z.B. blinde und stark sehbehinderte Besucher, die sich Inhalte akustisch ausgeben lassen, können solche optischen Merkmale nicht wahrnehmen und brauchen "logische", im Quelltext der Seite festgehaltene Auszeichnungen, um sich auf der Seite zu orientieren.

Bildbeschreibung "Überschriften": Bildschirmfoto der optischen Browser-Ansicht des nachfolgenden Quelltext-Beispiels. Überschriften strukturieren lange Texte.

Seitenanfang

Abstufung von Überschriften durch verschiedene Ordnungen

Zur logischen Auszeichnung von Überschriften stehen die Elemente <h1> bis <h6> zur Verfügung. Diese Abstufung ist als Untergliederung zu verstehen, das <h1>-Element entspricht der obersten Ebene. Suchmaschinen beziehen diese Strukturierung in ihre Bewertung mit ein - je höher die Ebene, desto wichtiger der Inhalt.

Wichtig ist, dass Überschriften entsprechend ihrer Ordnung abgestuft werden. Überschriften erster Ordnung dienen der Angabe einer Hauptüberschrift, mit Überschriften zweiter Ordnung können Kapitel ausgezeichnet werden und Überschriften dritter Ordnung können Unterkapitel kennzeichnen. Eine Überschrift der dritten Ordnung sollte also niemals auf eine Überschrift der ersten Ordnung folgen.

Beispiel XHTML-Datei - Überschriften in verschiedenen Ordnungen (Ausschnitt):

<!-- Überschrift 1. Ordnung --> <h1>Barrierefreie Gestaltung von Internetseiten</h1>
<!-- Überschrift 2. Ordnung --> <h2>Einleitung</h2>
<!-- Überschrift 3. Ordnung --> <h3>Barrierefreiheit</h3>
<!-- Absatz --> <p>Textabsatz.</p>
<!-- Weitere Überschrift 3. Ordnung --> <h3>Zielstellung</h3>
<!-- Absatz --> <p>Textabsatz.</p>

In HTML5 gibt es neu das <hgroup>-Element, welches direkt aufeinander folgende Überschriften unterschiedlicher Ebenen gruppiert.

Seitenanfang

Überschrift h1 - nur einmal oder beliebig oft pro Seite?

Über den "richtigen" Einsatz von <h1>-Elementen wird im Web viel diskutiert. Die einen sagen, eine Überschrift erster Ordnung darf in jedem Dokument nur genau einmal vorkommen, die anderen vertreten den Ansatz, dass mehrere h1-Elemente pro Seite verwendet werden können. Hauptsächlicher Diskussionsbestandteil ist dabei, ob sowohl der eigentliche Inhalt als auch die Navigation eine Überschrift erster Ordnung zugesteilt bekommen sollten.

Objektiv betrachtet ergeben sich daraus folgende Umsetzungsvorschläge:

nur eine h1-Überschrift

• wenn ein kleines Webprojekt mit wenigen Links vorliegt, die direkt von der Startseite aus erreichbar sind und
• wenn die Navigation mit etwaigen Unternavigationen (Hauptnavigation, Bereichsnavigation, Hilfsnavigation) direkt am Seitenanfang angeordnet ist oder
• wenn die Navigation über Sprunglinks direkt ansteuerbar ist

mehrere h1-Überschriften

• wenn die Seite mehrere gleichberechtigte Themen beinhaltet, die keine Gemeinsamkeit haben und somit unter keiner Hauptüberschrift zusammengefasst werden können
• wenn Inhalts- und Navigationsbereiche gleichgestellt sind (komplexe Navigationsbereiche, die sich auf jeder Unterseite eines umfangreichen Webprojektes wiederholen) und die Navigation nicht direkt am Seitenanfang angeordnet oder über Sprunglinks ansteuerbar ist

Mit der Einführung von neuen Strukturierungscontainern in HTML5 (<article>, <nav>, <footer> usw.) erübrigt sich die Diskussion zur Verwendung der Überschriftenebenen. Jeder Bereich wird bei Bedarf durch eine Überschrift erster Ordnung (<h1>) eingeleitet (siehe HTML5 zur Strukturierung).

Seitenanfang