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.
✨ Ask Lara
Please sign in to ask Lara about HTML headings.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.