HTML-Überschriftselemente
HTML-Überschriften (<h1> - <h6>) strukturieren den Inhalt eines Dokuments. Sie helfen, Text logisch zu gliedern und wichtige Teile wie Titel, Untertitel und Abschnittsüberschriften hervorzuheben.
Visuelles Erscheinungsbild von Überschriften
Das folgende Beispiel zeigt, wie HTML-Überschriften in unterschiedlichen Größen und Stilen dargestellt werden. <h1> ist die größte, <h6> die kleinste.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Hierarchie und Struktur
Überschriften sollten in hierarchischer Reihenfolge verwendet werden. <h1> steht für das Hauptthema der Seite, während <h2>-<h6> Unterabschnitte darstellen. Überspringe keine Ebenen (z. B. <h1> gefolgt von <h4>), da dies die logische Struktur stört.
Semantische Bedeutung
Überschriften dienen nicht nur dem Design — Suchmaschinen, Screenreader und andere Tools verwenden sie zur Inhaltsinterpretation. Eine gut strukturierte Überschriftenhierarchie verbessert das SEO.
Beispiel für strukturierte Inhalte
Dieses Beispiel zeigt eine einfache Struktur einer Webseite mit unterschiedlichen Überschriftenebenen.
Tipps zur Verwendung von Überschriften
- Verwende pro Seite nur ein <h1>.
- Folge einer logischen Hierarchie — überspringe keine Überschriftsebenen.
- Verwende Überschriften nicht nur zum Stylen — nur wenn der Inhalt tatsächlich eine Überschrift ist.
- Stelle sicher, dass jede <h2> mindestens eine Unterüberschrift oder einen Inhalt darunter hat.
Aufgabe: Erstelle eine <h1>-Überschrift mit dem Text 'Main Title'!
<!DOCTYPE html>
<html>
<head>
<title>Headings</title>
</head>
<body>
</body>
</html>Vorschau
Barrierefreiheit und SEO
Gut strukturierte Überschriften helfen nicht nur Lesern, sondern auch technischen Hilfsmitteln. Screenreader erstellen daraus z. B. Navigationslisten, und Suchmaschinen bevorzugen logisch strukturierte Inhalte.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
