Überschriften und Hierarchie

Überschriften sind mehr als große Schrift. Sie sind die Gliederung deiner Seite, so wie das Inhaltsverzeichnis eines Buchs. HTML kennt sechs Ebenen, von h1 bis h6, und die allermeisten Seiten kommen mit dreien davon aus.

01 / 04Sechs Ebenen, eine Gliederung

h1 ist die wichtigste Überschrift, der Titel der Seite. Darunter gliederst du mit h2, und wenn ein h2-Abschnitt eigene Unterpunkte hat, mit h3.

<h1>Mein Kochblog</h1>
<h2>Vorspeisen</h2>
<h2>Hauptgerichte</h2>
<h3>Vegetarisch</h3>

Ein Titel, zwei gleichrangige Bereiche und ein Unterpunkt im zweiten. Genau so ist ein Kapitel aufgebaut.

Der Trick beim Denken: Lies nur die Überschriften der Seite von oben nach unten. Ergibt das ein sinnvolles Inhaltsverzeichnis, stimmt deine Hierarchie. Klingt es wie eine zufällige Aufzählung, stimmt sie nicht.

Diese Gliederung ist kein Selbstzweck. Screenreader bieten eine Liste aller Überschriften an, mit der Nutzer direkt zum gesuchten Abschnitt springen, ähnlich wie du eine Seite überfliegst. Suchmaschinen lesen daran ab, worum es geht. Und jedes Werkzeug, das ein Inhaltsverzeichnis erzeugt, tut es über die Überschriften.

02 / 04Genau eine h1

Die h1 ist der Titel der Seite. Erlaubt wären mehrere, sinnvoll ist genau eine: Ein Titel, der zweimal dasteht, ist keiner mehr. Was sonst passiert:

<h1>Mein Kochblog</h1>
<p>Rezepte für die Woche.</p>
<h1>Über mich</h1>
<p>Ich koche gern und selten kompliziert.</p>

Zwei h1 stellen zwei Themen gleichrangig nebeneinander, und niemand kann mehr erkennen, worum es auf der Seite eigentlich geht.

Auf der Seite sieht das harmlos aus, beide sind eben groß. Für jeden, der die Seite nicht sieht, ist es das nicht. Mach aus der zweiten h1 eine h2, dann ist „Über mich“ ein Abschnitt der Seite statt ein zweiter Titel.

Nebenbei: Die h1 ist nicht dasselbe wie der title aus dem Grundgerüst. Der title steht im Browser-Tab, die h1 auf der Seite. Sie dürfen sich ähneln, aber sie erfüllen verschiedene Aufgaben.

03 / 04Keine Ebene überspringen

Zweite Regel: Spring nicht von h2 direkt zu h4. Der typische Grund sieht so aus:

<h1>Mein Kochblog</h1>
<h4>Vorspeisen</h4>
<h4>Hauptgerichte</h4>

Aus den beiden h2 sind zwei h4 geworden, weil jemand die Schrift kleiner haben wollte.

Auf der Seite sieht das vielleicht sogar ruhiger aus. In der Gliederung klafft zwischen h1 und h4 jetzt aber ein Loch: Zwei Ebenen fehlen, und wer sich an der Hierarchie entlanghangelt, verliert den Faden. Es ist, als hätte ein Buch Kapitel und dann sofort Unter-Unter-Abschnitte.

04 / 04Nach Bedeutung wählen, nicht nach Größe

Das ist der eigentliche Kern beider Regeln: Die Ebene ergibt sich aus der Struktur, nicht aus dem gewünschten Aussehen. Wenn dir eine h2 zu groß erscheint, ist das eine Frage fürs CSS. Dort machst du sie kleiner, ohne die Gliederung anzufassen.

Der umgekehrte Fehler sieht so aus:

<h2>Eine echte Überschrift</h2>
<p>Text darunter.</p>

<p><strong>Nur fett gemacht</strong></p>
<p>Text darunter.</p>

Oben eine echte h2, unten ein Absatz mit strong darin. Beide sind fett, die Überschrift ist zusätzlich größer, und darum geht es hier gerade nicht. Nur: Das strong ist keine Überschrift. Es taucht in keinem Inhaltsverzeichnis auf, kein Screenreader springt dorthin, keine Suchmaschine wertet es als Abschnittstitel.

Die Faustregel dazu ist kurz: Beginnt hier ein neuer Abschnitt, nimm eine Überschrift. Willst du nur ein Wort betonen, nimm strong. Das Aussehen kommt später und ändert an dieser Entscheidung nichts.