Überschriften

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 Outline- Struktur.

Hierachie und Reihenfolge

Die h1 Überschrift leitet das übergeordnete Thema ein. Direkt auf einer HTML Seite sollte eine h1 Überschrift auf einer Seite nur einmal vorkommen. Seit HTML5 gibt es die Möglichkeit, dass man innerhalb von Sectioning Elementen auch wieder eine h1 Überschrift einfügen kann. Dazu später mehr.

Die anderen Überschriften können nach ihrer Bedeutung mehrmals aufgeführt werden. Die weiteren Überschriften müssen in ihrer logischen Reihenfolge aufgeführt werden. Auf eine h2 folgt eine h2 oder h3 aber nicht eine h4. Anders ausgedrückt, wenn eine Überschrift niedrigerer Ordnung aufgeführt wird, darf keine Hierachiebene übersprungen werden. Es darf auch eine Überschrift höherer Ordnung aufgeführt werden, sofern damit wieder ein neues, höher liegendes Thema eingeläutet wird, sofern es sich nicht um eine h1 handelt.

so sieht's aus
so sieht's aus mit Sectioning

nav, aside, section, article

Die Elemente nav, aside, section, article können mit einem header und footer Element versehen werden. Außerdem können diese Elemente eine eigene Outline Strukur mit Überschriften bekommen (h1 - h6).

Überschriften bilden eine hierachische- Struktur oder Outline Struktur Mit dem Sectioning Content Modell kann diese Ordnung aufgebrochen werden. Man schafft mit Sectioning eigene Erstreckungsräume. Dadurch sind Überschriften innerhalb von Sectioning Elementen unabhängig von denen außerhalb.

Hat man die Seite in mehrere Sectioning Bereiche unterteilt, so kann man innerhalb eines Sectioning Elements eine eigene hierachische Überschriftenordnung anlegen. Das wird auch von den Browser Style Sheets entsprechend dargestellt.

so sieht's aus (einfaches Beispiel)

so sieht's aus (komplexes Beispiel)

In diesen Beispielen wurde das section Element verwendet.

 

Überschriftengruppen hgroup

siehe auch diesen Artikel zu hgroup tot oder lebendig

Es kommt schon mal vor dass man Überschriften direkt untereinander aufführt. Beispielsweise auf eine h1 Überschrift folgt direkt eine h2 ohne weiteren Inhalt zwischen beiden Elementen. Wenn diese zweite Überschrift als Untertitel, alternativer Titel oder erklärender Titel dient, sollten beide Überschriften mit einem hgroup Element umschlossen werden. Es können auch mehr als 2 Überschriften innerhalb von hgroup vorkommen, aber keine anderen Blockelemente. In der Outline Struktur erscheinen diese "Untertitel" nicht.

<hgroup>
<h1>Die Erde</h1>
<h2>Der blaue Planet</h2>
</hgroup>

so sieht's aus

Ein hgroup sollte man nicht immer verwenden, wenn 2 Überschriften direkt aufeinanderfolgen, sondern nur wenn die zweite eine Art Untertitel darstellt. Im folgenden Beispiel würde ein hgroup meiner Ansicht nach falsch sein, da <h2>Reh</h2> ein Thema einleitet, welches als untergeordnetes Thema der h1 fungiert.

<h1>Die Tiere des Waldes</h1>
<h2>Reh</h2>
Das Reh ist ein schönes Tier...
<h2>Wildschwein</h2>
Das Wildschwein ist ein Schwein..
<h2>Eichhörnchen</h2>
Das fleißige Eichhörnchen, der muntere Gesell...

Testet man mit dem Outliner ein Beispiel mit einem hgroup Element, sieht man, dass innerhalb von hgroup nur die oberste Überschrift in der Hierachie erscheint und das macht auch Sinn, sofern die weiteren Überschriften nur als Untertitel dienen. Das Element hgroup macht jedoch keinen Sinn in folgendem Beispiel, wo die zweite Überschrift ein untergeordnetes Thema überschreibt.

<hgroup>
<h1>Die Tiere des Waldes</h1>
<h2>Reh</h2>
</hgroup>