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 W3C Validator oder mit Outline Tool kann man das testen.
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
Die Elemente <article>, <aside>, <nav> und <section> gehören zum sogenannten Sectioning Content. Als HTML5 eingeführt wurde, war die Vision der Entwickler groß: Jedes dieser vier Elemente sollte ein eigenständiges Unterdokument bilden. Die Idee war, dass man darin immer wieder mit einer <h1> anfangen kann und der Browser die Überschrift automatisch tiefer einstuft (z. B. eine <h1> innerhalb einer <section> wird wie eine <h2> behandelt).
Die Realität heute: Dieses dynamische Outline-Modell ist gescheitert. Kein moderner Browser hat diese Automatik je gelernt, und Screenreader für blinde Menschen kamen damit nicht zurecht. Daher wurde das automatische Outline-Modell offiziell aus dem HTML-Standard gelöscht.
Heute gilt wieder die goldene Regel der linearen Hierarchie: Es gibt nur eine einzige, seitenweite Überschriften-Struktur. Eine Überschrift ordnet sich immer strikt unter die vorherige Ebene ein – völlig egal, ob sie in einer <section> oder im freien <body> steht.
Daher sollten die Elemente <article>, <section> und <aside> zwar im Regelfall eine Überschrift bekommen – welche Stufe (<h2>, <h3> etc.) das ist, hängt aber rein davon ab, an welcher Stelle der Seite das Element steht.
Um zu verstehen, warum man die Überschriften sauber durchzählen muss, schauen wir uns drei Beispiele im W3C-Validator an.
Outline 1: Zeigt die klassische, saubere Hierarchie direkt im Dokumentkörper.
Outline 2: Versucht das alte HTML5-Modell mit mehreren <h1>-Tags in den Sektionen. Wenn du das heute im Validator testest, erhältst du deutliche Warnungen. Für SEO und Barrierefreiheit ist das fatal, da Screenreader hier den Überblick verlieren.
Outline 3 (Die moderne Best Practice): Hier nutzen wir die Sektionen, zählen die Überschriften aber logisch linear von oben nach unten durch (<h1> ➡<section> mit <h2> ➡ <h3>). Das ist heute der einzig richtige Weg für valides HTML, barrierefreies Webdesign und optimales
Outline 1 testen Validator
Outline 2 testen Validator beachte die Warnungen
Outline 3 testen Validator linearer Aufbau, heutiger Standard
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