HTML-Überschriften - Kostenloses Online-Tutorial

Überschriften unterteilen eine Seite in beschriftete, hierarchisch geordnete Abschnitte – genauso wie Kapitel- und Abschnittstitel ein Buch gliedern. In HTML gibt es sechs Ebenen, von <h1> (die wichtigste) bis <h6> (die unwichtigste). Die richtige Ebene zu wählen bewirkt mehr als nur das Vergrößern von Text: Sie legt die Dokumentenstruktur fest, auf die Browser, Hilfstechnologien und Suchmaschinen angewiesen sind, um den Aufbau Ihres Inhalts zu verstehen.

Diese Seite behandelt die sechs Überschriften-Tags, wie ihre Ebenen zu einer Hierarchie verschachtelt werden, warum Größe und Ebene getrennte Konzepte sind, wie Screenreader-Nutzer über Überschriften navigieren und wie sich das <header>-Element von <h1>–<h6> unterscheidet.

Überschriften-Tags

In HTML gibt es 6 Überschriftenebenen: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>.

Die <h1>-<h6>-Tags werden verwendet, um Überschriften entsprechend ihrer Wichtigkeit zu kennzeichnen. Der <h1>-Tag steht für die wichtigste Überschrift der Webseite und <h6> für die unwichtigste und kleinste.

Beispiel der HTML-Überschriften-Tags `<h1>` - `<h6>`:

Wie verwendet man die HTML-Tags <h1>-<h6>?

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>

Probier es selbst »

Die vollständige Referenz zu jeder Ebene finden Sie unter HTML-Tags <h1>–<h6>.

Überschriftenhierarchie und Dokumentenstruktur

Überschriftenebenen sind nicht nur Größen – sie beschreiben Verschachtelung. Ein <h2> wird als Unterabschnitt des nächsten <h1> darüber gelesen, ein <h3> ist ein Unterabschnitt dieses <h2>, und so weiter. Zusammen bilden diese verschachtelten Ebenen die Dokumentenstruktur: einen Baum, der vermittelt, welche Teile der Seite zusammengehören.

Stellen Sie es sich wie ein Inhaltsverzeichnis vor:

<h1>Baking Bread</h1>          <!-- the page topic -->
  <h2>Ingredients</h2>         <!-- a section of "Baking Bread" -->
  <h2>Method</h2>              <!-- another section -->
    <h3>Kneading</h3>          <!-- a step inside "Method" -->
    <h3>Proving</h3>           <!-- another step inside "Method" -->
  <h2>Troubleshooting</h2>

Die Einrückung oben dient nur zur Veranschaulichung – Überschriften sind Geschwisterelemente im Markup, und die Ebenenzahlen sind es, die die Hierarchie erzeugen. Verwenden Sie ein <h1> für das Hauptthema der Seite, dann <h2> für die übergeordneten Abschnitte, <h3> für deren Unterabschnitte, und wählen Sie niemals eine niedrigere Ebene nur um Text kleiner erscheinen zu lassen.

Barrierefreiheit: Überschriftenebenen nicht überspringen

Screenreader-Nutzer lesen eine Seite selten von oben nach unten. Stattdessen rufen sie eine Liste aller Überschriften auf und springen direkt zu dem Abschnitt, den sie suchen – ähnlich wie beim Überfliegen eines Inhaltsverzeichnisses. Dies funktioniert nur, wenn die Ebenen in der richtigen Reihenfolge absteigen – <h1>, dann <h2>, dann <h3> – ohne Lücken.

Das Überspringen einer Ebene (z. B. ein <h1> gefolgt unmittelbar von einem <h3>) bricht die Struktur auf: Die Hilfstechnologie meldet eine fehlende Ebene, und Nutzer können nicht erkennen, ob sie in einen Unterabschnitt gesprungen sind oder einfach den Überblick verloren haben.

Schlecht – eine Ebene wird übersprungen:

<h1>Our Menu</h1>
<h3>Starters</h3>   <!-- jumps from h1 to h3, skipping h2 -->
<h3>Mains</h3>

Gut – die Ebenen steigen Schritt für Schritt ab:

<h1>Our Menu</h1>
<h2>Starters</h2>
<h2>Mains</h2>
<h3>Vegetarian Mains</h3>

Wenn eine Überschrift auf ihrer korrekten Ebene zu groß oder zu klein wirkt, ändern Sie das Erscheinungsbild mit CSS – nicht die Ebene.

Bedeutung von Überschriften

HTML-Überschriften heben wichtige Themen und die Dokumentenstruktur hervor und verbessern dadurch die Nutzerinteraktion.
Verwenden Sie nur einen <h1>-Tag auf einer Webseite. Dieser Tag muss beschreiben, worum es auf Ihrer Seite geht, und außerdem ein Schlüsselwort enthalten, um das Ranking in Google zu verbessern.
Suchmaschinen verwenden Überschriften, um die Struktur und den Inhalt der Webseite zu indexieren.

Überschriftengröße

Browser geben jeder Überschriftenebene eine Standardgröße, wobei <h1> die größte und <h6> die kleinste ist. Sie können jede dieser Größen mit der CSS-Eigenschaft font-size überschreiben.

Der entscheidende Punkt: Die visuelle Größe einer Überschrift zu ändern ändert nicht ihre semantische Ebene. Ein <h2>, das riesig gestylt ist, bleibt in der Dokumentenstruktur ein <h2>, und ein winziges <h1> ist immer noch die Hauptüberschrift der Seite. Wählen Sie also den Tag danach aus, wo er in der Hierarchie steht, und passen Sie die Größe an das Design an – wählen Sie einen Tag niemals wegen seiner Darstellungsgröße.

Beispiel für die Änderung der Überschriftengröße mit der font-size-Eigenschaft:

Wie styled man einen HTML-<h1>-Tag mit der CSS-Eigenschaft font-size

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <h1>This is heading 1</h1>
  </body>
</html>

Probier es selbst »

Wichtige Hinweise

Verwenden Sie Überschriften-Tags nicht, um die Textgröße zu erhöhen oder den Text fett zu machen. Verwenden Sie stattdessen CSS-Eigenschaften wie font-weight und font-size. Denken Sie daran: Suchmaschinen verwenden Überschriften, um Inhalte zu strukturieren.
Überspringen Sie keine Überschriftenebenen. Verwenden Sie <h1> als Hauptüberschrift der Webseite, gefolgt von <h2>-Überschriften, dann den weniger wichtigen <h3>-Überschriften usw.
Vermeiden Sie es, <h1> mehr als einmal auf einer Seite zu verwenden.

Überschrift vs. Header: `<h1>`–`<h6>` vs. `<header>`

Diese beiden werden leicht verwechselt, weil die Namen ähnlich klingen, aber sie erfüllen unterschiedliche Aufgaben:

Eine Überschrift (<h1>–<h6>) ist ein einzelner Titel, der einen Inhaltsabschnitt beschriftet und ihm eine Ebene in der Dokumentenstruktur gibt.
Ein Header (<header>) ist ein Container für einleitende Inhalte am Anfang einer Seite oder eines Abschnitts – typischerweise ein Logo, der Seitentitel und die Navigation. Er enthält oft eine Überschrift, ist aber selbst keine.

Vergleich nebeneinander:

<!-- A heading: one ranked title -->
<h1>Weekly Newsletter</h1>

<!-- A header: a block of introductory content that wraps a heading -->
<header>
  <img src="logo.png" alt="Acme logo" />
  <h1>Weekly Newsletter</h1>
  <nav>
    <a href="/archive">Archive</a>
    <a href="/subscribe">Subscribe</a>
  </nav>
</header>

Kurz gesagt: Platzieren Sie eine Überschrift innerhalb eines Headers, wenn Sie einen betitelten Einleitungsblock benötigen; verwenden Sie eine einzelne Überschrift, wenn Sie nur einen Abschnitt beschriften möchten. Mehr dazu im Kapitel HTML-<header>-Tag.

Übungen

Übung

Welche Aussagen über HTML-Überschriften sind richtig? (Alle zutreffenden auswählen.)

HTML-Überschriften werden mit den Tags h1 bis h6 definiert.HTML kennt kein Konzept von Unterüberschriften oder Hierarchie.Der h1-Tag wird für die Hauptüberschrift einer Seite verwendet.HTML-Überschriften können nicht mit CSS gestylt werden.Der h1-Tag stellt standardmäßig kleineren Text dar als h6.

Übung

Sie benötigen eine kleine Beschriftung unterhalb eines Abschnittstitels. Was ist die richtige Vorgehensweise?

Wählen Sie die Überschriftenebene nach ihrer Position in der Struktur und legen Sie die Größe mit der CSS-Eigenschaft font-size fest.Verwenden Sie einen h6-Tag, weil er den kleinsten Überschriftentext erzeugt.Springen Sie von h2 zu h4, damit der Text automatisch kleiner wirkt.Umschließen Sie die Beschriftung mit h1 und verkleinern Sie sie mit CSS.