Strukturierung von Dokumenten: Überschriften

HTML sieht sechs Ebenen für Überschriften (heading) vor: <h1>, <h2>, …. <h6>.

Überschriften haben in HTML eine besondere Bedeutung:

• Überschriften haben eine eigene (browser-spezifische) Darstellung im Browser.
• Assistierende Lesegeräte nutzen die Überschriften, um den Leser durch den Text zu führen.
• Suchmaschinen nutzen die Überschriften für ihre Suchalgorithmen.

Das folgende Beispiel stellt eine Seite mit allen sechs Überschriftenebenen dar. Sie können die HTML-Inhalte des beispiels auf der linken Seite verändern - rechts sehen Sie die Darstellung im Browser.

See the Pen HTML - Überschriften by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Überschriften auf einer Webseite haben einerseits eine stilistische Wirkung, auf der anderen Seite spielen Überschriften bei der Suchmaschinenoptimierung eine besondere Rolle:

1. Die <h1>–Überschrift ist die Hauptüberschrift auf jeder Seite, d.h., sie sollte den Hauptinhalt und die Absicht der Seite beschreiben. Daher sollte genau eine <h1>–Überschrift auf jeder Seite vorkommen. Suchmaschinen verwenden die <h1>–Überschriften als Informationstext bei der Darstellung von Suchergebnissen. Daher sollte der Inhalt einer <h1>–Überschrift gut überlegt sein: er sollte auch ohne weiteren Kontext aussagekräftig sein, die Inhalte der zugehörigen Seite treffend beschreiben, aber auch das Interesse des Lesers wecken. D.h., die <h1>–Überschrift sollte die wichtigsten Keywords einer Seite enthalten.
2. Will man auf seiner Seite noch ein bis zwei weitere Keywords platzieren, werden diese in <h2>- und <h3>–Überschriften geführt. Wichtig ist hier allerdings, dass diese zusätzlichen Überschriften zum Inhalt und zur Struktur der Seite passen.
3. Die <h1>– bis <h6>–Überschriften unterscheiden sich in der Regel in Größe und im Aussehen (z.B. Farbe, Fettdruck und Schriftart) im Browser: Während die <h1>–Überschrift oftmals mit einer großen Schrift dargestellt wird, ist eine <h6>–Überschrift meistens deutlich kleiner. Analog zur Schriftgröße sollte es sich mit der Wichtigkeit der Überschriften verhalten: <h1> steht für sehr wichtig und <h6> für weniger wichtig. Dieser Aufbau hilft meistens nicht nur dem Leser, sondern auch bei der Suchmaschinenoptimierung. Die Inhalte der einzelnen Überschriften haben einen erheblichen Einfluss darauf, ob und mit welchen Keywords eine Seite in den Trefferlisten der Suchmaschinen erscheint.