HTML Überschriften - h1 bis h6 erklärt
Überschriften sind das Inhaltsverzeichnis deiner Webseite. Sie strukturieren deinen Content und helfen sowohl Nutzern als auch Suchmaschinen zu verstehen, worum es auf deiner Seite geht.
Die 6 Überschriften-Level
HTML bietet dir 6 verschiedene Überschriften-Levels:
<h1>Überschrift Level 1 - Die Größte</h1>
<h2>Überschrift Level 2</h2>
<h3>Überschrift Level 3</h3>
<h4>Überschrift Level 4</h4>
<h5>Überschrift Level 5</h5>
<h6>Überschrift Level 6 - Die Kleinste</h6>Wie sie aussehen:
h1 ████████████████ (Sehr groß, fett)
h2 ██████████████ (Groß, fett)
h3 ████████████ (Mittel, fett)
h4 ██████████ (Normal, fett)
h5 ████████ (Klein, fett)
h6 ██████ (Sehr klein, fett)
Die Hierarchie verstehen
Überschriften funktionieren wie ein Buchinhaltsverzeichnis:
<h1>Mein Kochbuch</h1>
<h2>Vorspeisen</h2>
<h3>Salate</h3>
<h4>Caesar Salat</h4>
<h4>Griechischer Salat</h4>
<h3>Suppen</h3>
<h4>Tomatensuppe</h4>
<h4>Kürbissuppe</h4>
<h2>Hauptgerichte</h2>
<h3>Pasta</h3>
<h4>Spaghetti Carbonara</h4>
<h4>Lasagne</h4>
<h3>Pizza</h3>
<h4>Margherita</h4>
<h4>Salami</h4>
<h2>Desserts</h2>
<h3>Kuchen</h3>
<h4>Schokoladenkuchen</h4>
<h4>Käsekuchen</h4>Erklärung:
<h1>= Das Buch selbst (Haupttitel)<h2>= Große Kapitel<h3>= Unterkapitel<h4>= Abschnitte in den Unterkapiteln<h5>&<h6>= Noch weitere Untergliederungen
Die goldene Regel: Nur EINE h1 pro Seite
Wichtig: Jede Seite sollte genau eine <h1> haben!
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<h1>HTML Grundlagen lernen</h1>
<h2>Was ist HTML?</h2>
<p>HTML steht für...</p>
<h2>HTML Tags</h2>
<p>Tags sind...</p>
</body>
</html><h1>Willkommen auf meiner Webseite</h1>
<h1>Über mich</h1> <!-- ❌ Zweite h1 -->
<h1>Kontakt</h1> <!-- ❌ Dritte h1 -->Warum nur eine h1?
- SEO: Google nutzt die h1, um zu verstehen, worum es auf der Seite geht
- Accessibility: Screenreader lesen die h1 als Haupttitel vor
- Struktur: Wie ein Buch nur einen Haupttitel hat
Überschriften-Hierarchie nicht überspringen
Du solltest die Reihenfolge nicht überspringen:
<h1>Haupttitel</h1>
<h2>Abschnitt 1</h2>
<h3>Unterabschnitt 1.1</h3>
<h3>Unterabschnitt 1.2</h3>
<h2>Abschnitt 2</h2><h1>Haupttitel</h1>
<h4>Was?? Wo sind h2 und h3?</h4> <!-- ❌ Übersprungen! -->
<h2>Zurück zu h2?</h2> <!-- ❌ Verwirrend! -->Warum nicht überspringen?
- Verwirrend für Screenreader
- Schlechter für SEO
- Unlogische Struktur
Praktisches Beispiel: Blog-Artikel
So sieht eine typische Blog-Artikel-Struktur aus:
<!DOCTYPE html>
<html lang="de">
<head>
<title>10 Tipps für besseres HTML</title>
</head>
<body>
<!-- Haupttitel -->
<h1>10 Tipps für besseres HTML</h1>
<!-- Einleitung -->
<p>In diesem Artikel lernst du...</p>
<!-- Hauptabschnitte -->
<h2>1. Verwende semantisches HTML</h2>
<p>Semantisches HTML bedeutet...</p>
<h3>Was ist semantisch?</h3>
<p>Semantisch heißt...</p>
<h3>Beispiele für semantische Tags</h3>
<p>header, nav, main...</p>
<h2>2. Achte auf die Überschriften-Hierarchie</h2>
<p>Die Hierarchie ist wichtig, weil...</p>
<h3>Häufige Fehler</h3>
<p>Viele Anfänger machen den Fehler...</p>
<h4>Fehler 1: Mehrere h1 Tags</h4>
<p>Verwende niemals...</p>
<h4>Fehler 2: Levels überspringen</h4>
<p>Springe nicht von h1 direkt zu h4...</p>
<h2>3. Nutze aussagekräftige Überschriften</h2>
<p>Deine Überschriften sollten...</p>
<!-- Fazit -->
<h2>Fazit</h2>
<p>Jetzt kennst du die wichtigsten Tipps...</p>
</body>
</html>h1 ist NICHT für die Größe!
Häufiger Anfängerfehler: Viele denken, die Nummer steht für die Größe.
❌ FALSCH:
<h6>Hauptüberschrift</h6> <!-- Klein aber wichtig -->
✅ RICHTIG:
<h1>Hauptüberschrift</h1> <!-- Groß UND wichtig -->
Wenn du die Größe ändern willst, nutze CSS:
<h1 style="font-size: 16px;">Kleine h1</h1>
<h6 style="font-size: 48px;">Riesige h6</h6>
Merke: Die Zahl steht für die Wichtigkeit und Hierarchie, nicht für die Größe!
SEO & Barrierefreiheit
Warum Überschriften wichtig für SEO sind:
- Google liest h1 zuerst: Das ist dein Hauptkeyword
- h2 = Unterthemen: Google versteht, welche Themen du behandelst
- Struktur: Eine klare Hierarchie wird belohnt
Beispiel - Gutes SEO:
<h1>Pizza Rezept - Italienische Pizza selber machen</h1>
<h2>Zutaten für den Pizzateig</h2>
<h2>Schritt-für-Schritt Anleitung</h2>
<h3>Teig vorbereiten</h3>
<h3>Belegen und backen</h3>
<h2>Tipps vom Profi</h2>
Barrierefreiheit (Accessibility):
Screenreader nutzen Überschriften zur Navigation:
- User können zwischen Überschriften springen
- Die h1 wird zuerst vorgelesen
- Eine klare Hierarchie hilft blinden Menschen zu verstehen, wie die Seite strukturiert ist
Best Practices Zusammenfassung
✅ DO:
- Eine
<h1>pro Seite - Logische Hierarchie (h1 → h2 → h3)
- Aussagekräftige Überschriften
- Keywords in der h1
- Nicht zu viele Levels (max. h4 reicht meistens)
❌ DON'T:
- Mehrere h1 Tags
- Levels überspringen (h1 → h4)
- Leere Überschriften:
<h2></h2> - Überschriften nur für Styling nutzen
- Zu generische Überschriften: "Abschnitt 1", "Text"
Typische Seitenstruktur
So sieht eine typische Webseiten-Struktur aus:
<!DOCTYPE html>
<html lang="de">
<body>
<!-- Header -->
<header>
<h1>Meine Webseite - Haupttitel</h1>
<nav>...</nav>
</header>
<!-- Hauptinhalt -->
<main>
<article>
<h2>Neuester Blog-Artikel</h2>
<p>Inhalt...</p>
<h3>Unterabschnitt</h3>
<p>Mehr Inhalt...</p>
</article>
<aside>
<h2>Sidebar</h2>
<h3>Beliebte Artikel</h3>
<h3>Newsletter</h3>
</aside>
</main>
<!-- Footer -->
<footer>
<h2>Kontakt</h2>
<p>Kontaktinfo...</p>
</footer>
</body>
</html>📝 Quiz
Wie viele h1-Tags sollte eine Webseite haben?
📝 Quiz
Was ist der Unterschied zwischen h1 und h2?
Übungsaufgaben
Probiere selbst! Erstelle eine HTML-Seite mit folgender Struktur:
Aufgabe 1: Über-mich-Seite
- h1: Dein Name
- h2: "Über mich", "Meine Skills", "Kontakt"
- h3: Unter "Meine Skills" → "Frontend", "Backend"
- h4: Unter "Frontend" → "HTML", "CSS", "JavaScript"
Aufgabe 2: Rezept-Seite
- h1: Name des Rezepts
- h2: "Zutaten", "Zubereitung", "Tipps"
- h3: Unter "Zubereitung" → "Schritt 1", "Schritt 2", etc.
Aufgabe 3: Fehler finden
Finde die 3 Fehler in diesem Code:
<h1>Willkommen</h1>
<h1>Über uns</h1>
<h4>Details</h4>
<h2>Kontakt</h2>
Lösung anzeigen
- ❌ Zwei h1 Tags (sollte nur eine geben)
- ❌ Von h1 zu h4 gesprungen (sollte h2 sein)
- ❌ Keine logische Hierarchie
✅ Korrigiert:
<h1>Willkommen</h1>
<h2>Über uns</h2>
<h3>Details</h3>
<h2>Kontakt</h2>
Nächste Schritte
Jetzt kennst du Überschriften! Als Nächstes lernst du:
- Absätze (p, br, hr) - Wie du Texte strukturierst
- Text-Formatierung (strong, em) - Wie du Text hervorhebst
- Listen (ul, ol, li) - Wie du Aufzählungen erstellst
Tipps & Tricks
Automatische Nummerierung mit CSS Counters
h2 { counter-increment: section; }
h2::before { content: counter(section) ". "; }
Alle h2 bekommen automatisch "1.", "2.", "3."!
Skip-Level vermeiden im HTML
<!-- ❌ Schlecht -->
<h1>Titel</h1>
<h3>Untertitel</h3> <!-- h2 übersprungen! -->
<!-- ✅ Gut -->
<h1>Titel</h1>
<h2>Untertitel</h2>
SEO & Accessibility profitieren von korrekter Hierarchie!
Sticky Headers mit CSS
h2 {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
Headers bleiben beim Scrollen oben!
Weiter geht's! 🚀
Gut gemacht! 🎉
Du hast "HTML Überschriften - h1 bis h6 erklärt" abgeschlossen
Artikel bewerten
Bitte einloggen um zu bewerten
Das könnte dich auch interessieren
Das <a> Element - Links und Navigation
Vollständige Referenz zum HTML <a> (Anchor) Element: Attribute, Link-Typen, Sicherheit, Accessibility und Best Practices
Das <button> Element - Interaktive Schaltflächen
Vollständige Referenz zum HTML <button> Element: Typen, Attribute, States, Accessibility, Button vs Link und Best Practices
Das <div> Element - Container für Block-Inhalte
Vollständige Referenz zum HTML <div> Element: Syntax, Attribute, Default-Styling, Best Practices und praktische Beispiele