Überschriften in HTML richtig anwenden

KATEGORIE: (X)HTML & CSS VOM 25.01.2010 1

Überschriften in HTML
Überschriften in Zeitungen und Büchern kennt jeder. Sie bieten dem Leser zum einen – auf Grund ihrer Größe, einen schnellen Überblick über den Inhalt und zum anderen strukturieren sie einen Text. In HTML ist es genauso. Wie bei Printerzeugnissen wird durch unterschiedliche Größen der Überschriften dem Inhalt eine gewisse Gewichtung gegeben. Das nennt sich Semantik.

Gewichtung der Überschriften

In HTML haben Überschriften eine wichtige semantische Bedeutung. Sie bilden nicht nur optisch eine Gewichtung der Inhalte, sondern auch für „blinde“ Leser, wie Suchmaschinen aber auch Screenreader und sonstige Anwendungen für Sehbehinderte. Deshalb sollte die Überschriftenstruktur semantisch korrekt angewendet werden. HTML bietet Überschriftengrößen von <h1> bis <h6>. Diese haben, von <h1> ausgehend, eine abnehmende Gewichtung, <h6> hat die geringste Gewichtung. Die <h1> ist somit unsere Headline. Sie sollte eine kurze Aussage über das gesamte Dokument machen. Logischerweise sollte sie auch nur einmal im Dokument angewendet werden – ein Zeitungsartikel hat ja auch nur eine Hauptüberschrift. Eine geringere Gewichtung zur Headline hat eine Kapitelüberschrift. Ihr Geltungsbereich geht über eine bestimmte Anzahl von Absätzen. Die nächst geringere Gewichtung hat eine Überschrift über einem Absatz, sie bezieht sich ausschließlich auf den folgen Textabsatz. Dieses Prinzip der Überschriftenhierarchie sollte für die Struktur des Dokuments angewendet werden.

Die Struktur eines Dokumentes

Wie sähe diese Struktur nun in der Praxis aus? Hier mal eine grobe, schematisierte Darstellung einer Webseite:

Hierarchie der Überschriften
Die <h1> bis <h4> stehen stellvertretend für die Überschriften, die Felder stehen für die Inhalte. Je dunkler die Felder werden, umso mehr nehmen sie an Gewichtung ab. Die <h1> beschreibt im optimalen Fall den Inhalt des gesamten Dokuments. Sie sollte, wie schon erwähnt, üblicherweise nur einmal vorkommen. Ausnahmen ergäben sich für separate, längere Abschnitte in ein und demselben Dokument. Die weitere Anwendung der Überschriften ist recht simpel: es wird stets die nächst kleinere Überschriftgröße gewählt, solange der darauf folgende Inhalt ein „Kind“ des vorherigen ist. „Kind“ steht im Sinne der Hierarchie für ein untergeordnetes Element. Bei zwei oder mehr parallelen Inhaltsblöcken in einem Dokument, wird innerhalb der Blöcke ebenfalls die Überschriftenhierarchie angewendet. Diese Anwendung der Überschriften erzeugt eine logische Abfolge der Inhalte und sollte wenn möglich nicht gebrochen werden.

Fehler bei der Anwendung von Überschriften

Häufig werden Überschriften im Rahmen der Standard-Browserstyles genutzt. Es werden dann kleinere Überschriftengrößen eingesetzt, weil die logische, nächst kleinere eine unpassende Formatierung hat. So wird dann die <h2> durch eine <h4> ersetzt. Andere nutzen den Überschriften-Tag zur Auszeichnung und Hervorhebung von Textabschnitten, weil dann mal eben die Formatierung passt. Hier kommt das mächtige Werkzeug CSS ins Spiel: das Browser-Stylesheet kann überschrieben werden. Wenn die <h2> zu groß sein sollte, wird die Schriftgröße mittels CSS verkleinert und die semantische Hierarchie bleibt erhalten.

Der Überschriften-Tag hat bei einer Textauszeichnung generell nichts verloren. Der Einsatz von Auszeichnungs-Tags wie <strong> oder <em> sind in diesen Fällen passend. Auch diese Tags können mit CSS formatiert werden, um sie dem Design der Seite anzupassen.

Welche Bedeutung die korrekte HTML-Auszeichnung von Überschriften für Sehbehinderte hat, kann bei Selamet Aydogdu, einem blinden Autor im Access-for-all-Blog nachgelesen werden.

Ein Kommentar zu „Überschriften in HTML richtig anwenden“

  1. Mike   7.08.2013, 17:27

    Vielen Dank für Deinen Artikel. Nicht zuletzt wegen der Grafik für die Überschriften finde ich den Beitrag sehr interessant und als gutes Nachschlagewerk für Neulinge.