Youtube Video

h1 - h6 Überschriften

Outline Struktur

siehe auch Wiki Outline
siehe auch Dokumentkörper und Abschnitte Elemente Stefan Münz
siehe auch WhatWG Headings und Sections

Mit den tags h1, h2, h3, h4, h5, h6 definiert man Überschriften in 6 hierachischen Stufen. Überschriften sind ein wichtiges semantisches Element und sollten unbedingt auf die richtige Art eingesetzt werden. Lesegeräte für Blinde und Suchmaschinen berücksichtigen die Struktur, die durch die Überschriften vorgegeben ist. Verwenden Sie Überschriften nicht, um die Textgröße zu verändern.

Eine Überschrift gilt für alle Inhalte bis zur nächsten Überschrift gleicher oder höherer Ordnung. Durch Überschriften entsteht also eine natürliche Hierachie von Themen und untergeordneten, spezielleren Themen, so wie es in einem Buch beispielsweise den Titel, die Kapitel und Abschnitte gibt. Das nennt man in HTML die Outline Struktur. Mit dem Sectioning Content Modell kann diese natürliche Ordnung aufgebrochen werden, indem man Sectioning Elemente einsetzt, in denen ein komplett anderes Thema erscheint.
Mit dem W3C Validator oder mit Outline Tool kann man das testen.

Hierachie und Reihenfolge

Die h1 Überschrift leitet das übergeordnete Thema ein. Die anderen Überschriften können nach ihrer Bedeutung mehrmals aufgeführt werden.

Nach HTML Syntax darf man soviele Überschriften einfügen wie man will. Unter Seo Gesichtspunkten sollte eine h1 nur einmal auf der Seite erscheinen.

Unter SEO Gesichtspunkt sollten die weiteren Überschriften in ihrer logischen Reihenfolge aufgeführt werden. Auf eine h2 folgt eine h2 oder h3 aber nicht eine h4. Allerdings lässt es sich manchmal nicht vermeiden, dass eine Hierachieebene übersprungen wird.

Beispiel Sonnensystem Beispiel testen im Validator und Outline aktivieren

nav, aside, section, article

Die Elemente article, aside, nav, section des Content Models Sectioning können mit den Elementen header und footer strukturiert werden. Diese 4 Elemente bilden eine Art Unterdokument, in denen eine eigene Outline Strukur durch die Überschriftenelemente (h2-h6) gebildet werden kann. Man schafft mit Sectioning eigene Erstreckungsräume. Dadurch sind Überschriften innerhalb dieser 4 Sectioning Elemente unabhängig von denen außerhalb. Die Elemente article, section und aside sollten eine Überschrift bekommen. Desweiteren erzeugen sie auch einen Knoten in der umgebenden Outline Struktur.
siehe w3C

Definiert man eine neue Hierachie mit Überschriften in einem Section-Element sollte diese neue Hierachie nicht mit einer h1 beginnen, sondern mit einer h2. Diese bildet dann die erste oder höchste Überschriftenebene innerhalb des Elements. Macht man es anders und beginnt mit einer h1 bewertet der Validtor es mit einem Warnhinweis nicht mit einem Fehler. Es ist zwar valide aber anscheinend keine gute Idee denn für Screenreader und SEO ist es nicht optimal.

so sieht's aus (einfaches Beispiel)
so sieht's aus (komplexes Beispiel)

Warum man eine h1 nicht mehrmals benutzen sollte

Im folgenden gibt es 3 Beispiele.
Outline 1 zeigt eine Überschriftenhierachie, wobei die Überschriften direkt im body liegen. Während bei Outline 2 die gleiche Outlinestruktur erzeugt, aber auch mit Sectioning Elementen. Vergleiche beide Beispiele mit dem W3org Validator und aktiviere die Option Outline. Beim zweiten Beispiel erhält man die Warnungen, dass man hier mehrere h1 Überschriften gesetzt hat.

Die Lösung ist man beginnt in den Section Elementen mit einer h2. In diesem Beispiel leiten die beiden section Elemente die zweite Outline Ebene ein, daher die h2. Nun beginnt dieser eigenständige Section Bereich aber nicht mit der Hauptüberschrift für diesen Bereich. Das ist aber nicht weiter tragisch denn die Regel ist: Das erste Überschriften-Element  in einem  Sectioning-Element bestimmt die Hauptüberschrift für diesen Abschnitt. Diese Lösung ist Outline 3

Outline 1 testen Validator
Outline 2 testen Validator beachte die Warnungen
Outline 3 testen Validator

Outline 1

<h1>Überschrift h1</h1>
    <h2>Überschrift h2</h2>
        <h3>Überschrift h3</h3>
    <h2>Überschrift h2</h2>
        <h3>Überschrift h3</h3>

Outline 2 

<h1>Überschrift h1</h1>
    <section>
    <h1>Überschrift h1</h1>
        <h2>Überschrift h2</h2>
    </section>
    <section>
    <h1>Überschrift h1</h1>
        <h2>Überschrift h2</h2>
    </section>

Outline 3 

<h1>Überschrift h1</h1>
    <section>
    <h2>Überschrift h2</h2>
        <h3>Überschrift h3</h3>
    </section>
    <section>
    <h2>Überschrift h2</h2>
        <h3>Überschrift h2</h3>
    </section>

Hier das gleiche nochmal mit Inhalt auch in 3 Versionen nach dem gleichen Schema