Lädt...

HTML-Überschriften

Sie können bereits Elemente und Attribute schreiben. Diese Lektion behandelt Überschriften — die Tags, die den Haupttitel und die Abschnittstitel einer Seite kennzeichnen. Gute Überschriften helfen Lesern beim Scannen und helfen Browsern sowie Hilfsmitteln, die Gliederung zu verstehen.

Was sind HTML-Überschriften?

HTML-Überschriften sind sechs Titel-Ebenen: h1, h2, h3, h4, h5 und h6. h1 ist die höchste Überschriftsebene der Seite. h6 ist die niedrigste. Diese Tags stehen für Bedeutung und Struktur. Die visuelle Größe können Sie später mit CSS ändern; wählen Sie eine Überschriftsebene nicht nur, weil Sie größeren oder kleineren Text wollen.

Direkte Antwort

Nutzen Sie Überschriften für eine klare Gliederung. Bevorzugen Sie ein klares h1 für das Seitenthema. Nutzen Sie h2 für Hauptabschnitte darunter, dann h3 für Unterabschnitte und so weiter. Halten Sie Ebenen möglichst in Reihenfolge — von h1 direkt zu h4 zu springen macht die Gliederung oft schwerer nachvollziehbar.

Überschriftsebenen

html

HTML Code

<h1>Haupttitel der Seite</h1>
<h2>Abschnittstitel</h2>
<h3>Unterabschnittstitel</h3>
<p>Absatztext unter dem Unterabschnitt.</p>

Das Beispiel lesen

h1 führt das gesamte Seitenthema ein
h2 startet einen Hauptabschnitt unter diesem Thema
h3 startet einen kleineren Teil in diesem Abschnitt
Der Absatz ist normaler Fließtext, keine Überschrift

Warum die Reihenfolge der Überschriften zählt

Überschriften erzeugen eine Dokumentgliederung, ähnlich einem Inhaltsverzeichnis. Screenreader und manche SEO-Tools nutzen diese Gliederung. Wenn Sie Ebenen nur wegen des Aussehens überspringen, wird die Struktur verwirrend, auch wenn die Seite für Sie „gut aussieht“.

Ein h1, dann Abschnitte

Für Anfängerseiten in diesem Kurs behalten Sie ein klares h1. Organisieren Sie den Inhalt dann mit h2 und tieferen Ebenen nach Bedarf. Fortgeschrittenere Gliederungsmuster kommen später; meistern Sie zuerst dieses einfache, lesbare Muster.

Eine kleine Seitengliederung

html

HTML Code

<h1>Stadtführer</h1>
<h2>Unterwegs</h2>
<p>Tipps für Bus und Bahn.</p>
<h2>Essen</h2>
<h3>Street Food</h3>
<p>Schnelle lokale Snacks.</p>
<h3>Restaurants zum Sitzen</h3>
<p>Orte für eine längere Mahlzeit.</p>

Überschriften sind kein Leerraum

Nutzen Sie keine leeren Überschrift-Tags für vertikalen Leerraum. Packen Sie nicht jede fette Phrase in eine Überschrift. Wenn Text kein echter Abschnittstitel ist, verwenden Sie einen Absatz oder ein anderes geeignetes Element.

Selbst ausprobieren

Erstellen oder öffnen Sie eine HTML-Datei mit dem Basisgerüst
Fügen Sie ein h1 hinzu, das das Seitenthema nennt
Fügen Sie zwei h2-Abschnitte mit je einem kurzen Absatz hinzu
Unter einem h2 fügen Sie ein h3 und einen kurzen Absatz hinzu
Speichern und Seite öffnen — prüfen Sie, ob die Gliederung leicht zu scannen ist

Häufige Fehler

Überschriftsebenen nur nach Schriftgröße statt nach Struktur wählen
Ohne Grund von h1 zu h4 springen
Viele h1-Tags auf einer einfachen Anfängerseite, wenn ein klarer Haupttitel reicht
Lange Absätze in Überschrift-Tags stecken
Überschriften als dekorative Abstände ohne echten Abschnittstitel nutzen

Zusammenfassung

Überschriften nutzen h1 bis h6 für Titelniveaus
Sie bauen Struktur und Gliederung, nicht nur visuelle Größe
Bevorzugen Sie ein klares h1, dann geordnete h2–h6-Abschnitte
Überspringen Sie Ebenen nicht nur wegen des Stylings
Halten Sie Überschriftstext kurz und titelartig
Größe später mit CSS stylen; HTML-Überschriften semantisch halten

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache