Überschriften: h1 bis h6

~7 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

Du kennst <h1> schon. Aber es gibt insgesamt sechs verschiedene Überschriften-Größen: <h1> bis <h6>. Die Zahl steht für die Wichtigkeit: h1 ist die wichtigste (und größte) Überschrift, h6 die unwichtigste (und kleinste).

Alle sechs Größen im Vergleich

<h1>Das ist eine h1-Überschrift</h1>
<h2>Das ist eine h2-Überschrift</h2>
<h3>Das ist eine h3-Überschrift</h3>
<h4>Das ist eine h4-Überschrift</h4>
<h5>Das ist eine h5-Überschrift</h5>
<h6>Das ist eine h6-Überschrift</h6>

Wenn du das in deine index.html einfügst (probier es aus!), siehst du: Jede Stufe wird automatisch etwas kleiner angezeigt. Das macht der Browser ganz von allein, ohne dass wir CSS brauchen.

Die wichtigste Regel bei Überschriften

Viele Anfänger denken, man wählt die Überschriften-Stufe danach aus, wie groß der Text aussehen soll. Das ist ein Denkfehler! Die richtige Regel lautet: Überschriften-Stufen beschreiben die Struktur deiner Seite, nicht das Aussehen.

Es gibt auf einer Seite normalerweise genau eine <h1>: die Hauptüberschrift der ganzen Seite.
<h2> sind die großen Abschnitte darunter (wie Kapitelüberschriften in einem Buch).
<h3> sind Unterabschnitte innerhalb eines h2-Abschnitts.
So geht es verschachtelt weiter bis zu <h6> - die aber in der Praxis selten gebraucht wird.

Stell dir ein Inhaltsverzeichnis eines Buches vor: Das Buch selbst hat einen Titel (h1). Jedes Kapitel hat eine Überschrift (h2). Wenn ein Kapitel Unterabschnitte hat, bekommen die h3. Genau nach diesem Muster baust du auch eine Webseite auf.

Achtung: Wähle NIE eine Überschriftenstufe nur, weil sie "schön groß" oder "schön klein" aussieht. Wie eine Überschrift aussieht (Größe, Farbe, Schriftart) ist später Aufgabe von CSS. In HTML geht es nur um die Bedeutung: "Wie wichtig ist dieser Text im Vergleich zum Rest der Seite?"

Unsere Webseite strukturieren

Lass uns Finns Webseite jetzt eine richtige Struktur geben:

index.html

<body>

  <h1>Finns Fußball-Webseite</h1>

  <h2>Über mich</h2>

  <h2>Meine Lieblingsspieler</h2>

  <h2>Meine Mannschaft</h2>
  <h3>Trainingszeiten</h3>
  <h3>Unsere Erfolge</h3>

</body>

Speichere und schau dir das im Browser an. Du siehst schon ein grobes Skelett deiner Webseite - noch ohne echten Text darunter, aber mit einer klaren, sinnvollen Struktur. Genau diesen Text füllen wir im nächsten Kapitel mit richtigen Absätzen.

Vorheriges Kapitel Kommentare in HTML: Notizen, die niemand sieht Nächstes Kapitel Absätze mit <p>