HTML Academy · Lektion

Überschriften h1–h6 und ihre Hierarchie

Verwenden Sie Überschriftenebenen, um eine aussagekräftige Dokumentstruktur zu erstellen.

Überschriften h1–h6 und ihre Hierarchie ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Die sechs Überschriftenebenen

HTML stellt sechs Überschriftselemente von <h1> bis <h6> bereit:

h1 — Haupttitel der Seite (am wichtigsten)
h2 — Hauptabschnitte
h3 — Unterabschnitte
h4, h5, h6 — Tiefer verschachtelte Unterabschnitte (selten erforderlich)

Sie werden visuell immer kleiner dargestellt, aber ihre Größe wird durch CSS gesteuert — nicht durch die Nummer.

Semantische Hierarchie

Überschriften bilden eine Dokumentstruktur — ein Inhaltsverzeichnis für Ihre Seite:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

Die h1-Regel

Bewährte Vorgehensweisen für <h1>:

Verwenden Sie genau ein <h1>-Element pro Seite
Es sollte mit dem <title>-Element übereinstimmen oder eng darauf bezogen sein
Es bezeichnet das Hauptthema der Seite
Suchmaschinen gewichten es für SEO besonders stark

Keine Ebenen überspringen

Überschriftenebenen müssen in der richtigen Reihenfolge verwendet werden — überspringen Sie beispielsweise nicht h3 und gehen Sie direkt zu h4:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

Überschriften zur Navigation

Benutzerinnen und Benutzer von Screenreadern nutzen Überschriften, um auf langen Seiten zu navigieren:

Mit der Taste H springen sie zwischen Überschriften
Screenreader listen alle Überschriften wie ein Inhaltsverzeichnis auf
Eine korrekte Hierarchie ermöglicht die Navigation auf der Seite ohne visuelle Wahrnehmung

Darstellung und Semantik

Wählen Sie eine Überschriftenebene nicht wegen ihrer visuellen Größe — verwenden Sie dafür CSS:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

Überschriften in Abschnitten

Bei der Verwendung von HTML5-Elementen zur Abschnittsstrukturierung beginnt die Überschriftenhierarchie in jedem Abschnitt neu:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

Tipps zur Barrierefreiheit von Überschriften

Beachten Sie für die Barrierefreiheit die folgenden Regeln für Überschriften:

Jede Seite muss mindestens eine Überschrift enthalten
Der Hauptinhaltsbereich sollte mit einem <h1> beginnen
Verwenden Sie Überschriften nicht nur, um Text fett oder größer darzustellen
Verwenden Sie fett formatierten Text nicht als Ersatz für Überschriften

SEO und Überschriften

Suchmaschinen verwenden Überschriften, um den Inhalt einer Seite zu verstehen:

<h1> hat das größte Gewicht für SEO
Verwenden Sie die Zielkeywords auf natürliche Weise in Überschriften
Überschriften gliedern Inhalte und verbessern die Lesbarkeitsmetriken
Suchmaschinen zeigen Überschriften in Ergebnissen an (Featured Snippets)

Standardstile des Browsers

Browser wenden auf Überschriften Standardstile an:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

Überschriften in der Navigation

Überschriften können auch in Navigationsbereichen verwendet werden:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Kurzer Test

Wie viele h1-Elemente sollte eine gut strukturierte Seite normalerweise enthalten?

Zusammenfassung: Überschriften

Das Wichtigste zur Überschriftenhierarchie:

Sechs Ebenen: h1 bis h6
Ein h1-Element pro Seite — der Haupttitel
Verwenden Sie die Ebenen in der richtigen Reihenfolge — überspringen Sie niemals eine Ebene
Überschriften bilden eine barrierefreie Dokumentstruktur
Verwenden Sie CSS für die visuelle Größe, nicht die Überschriftennummern

Häufig gestellte Fragen

Ist die Lektion „Überschriften h1–h6 und ihre Hierarchie“ kostenlos?

Ja — der vollständige Text von „Überschriften h1–h6 und ihre Hierarchie“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Überschriften h1–h6 und ihre Hierarchie“?

Verwenden Sie Überschriftenebenen, um eine aussagekräftige Dokumentstruktur zu erstellen. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Überschriften h1–h6 und ihre Hierarchie“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu HTML Academy