HTML <h1>-<h6> Tags
Die Tags <h1> bis <h6> definieren HTML-Überschriften. <h1> ist die wichtigste, <h6> die unwichtigste Überschrift. Beispiele ausprobieren!
Die Elemente <h1> bis <h6> werden verwendet, um sechs Ebenen von HTML-Überschriften zu definieren. Dabei ist <h1> die höchste (oder wichtigste) Ebene und <h6> die unwichtigste.
Jede Webseite darf nur eine einzige <h1>-Überschrift haben. Da Suchmaschinen sie verwenden, um Struktur und Inhalt von Webdokumenten zu indexieren, sollten Sie relevante Schlüsselwörter darin einbauen.
User Agents können Überschriftsinformationen nutzen, um automatisch ein Inhaltsverzeichnis für ein Dokument zu erstellen.
Wenn Sie Text vergrößern oder verkleinern möchten, sollten Sie keine Überschriften-Tags verwenden. Nutzen Sie stattdessen die CSS-Eigenschaft font-size. Es wird empfohlen, keine Überschriftsebenen (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) zu überspringen und <h1> nur einmal pro Seite zu verwenden.
Überschriften-Tags haben auch einen SEO-Wert. Eine Suchmaschine versucht, zwei Dinge über Ihre Seite herauszufinden: worum es auf der Seite geht und wie gut sie ist. Eines der wichtigsten Merkmale, anhand derer Suchmaschinen den Seiteninhalt bestimmen, sind die Wörter innerhalb von Überschriften-Tags.
Wenn eine Seite einen einzelnen Inhalt hat, muss der Haupttitel in einem <h1>-Tag stehen, die größeren Abschnitte in <h2> und so weiter. Auf diese Weise können Sie Ihren Inhalt besser strukturieren. Denken Sie daran, dass niemand jedes Wort eines Inhalts liest.
Es gibt zwei Arten von Seiten mit Inhalt: Einzelinhaltseiten und Indexseiten. Auf Einzelinhaltseiten muss der Titel des Inhalts in einem <h1>-Tag nahe dem Anfang von <body> stehen. Auf einer Indexseite wird der Seitentitel oder der Indexname in der Regel in <h1> gesetzt. Die Titel aller aufgelisteten Einzelteile müssen dann <h2>-Tags verwenden.
Da die Tags <h1> bis <h6> Block-Level-Elemente sind, beginnen sie immer auf einer neuen Zeile und nehmen die gesamte verfügbare Breite ein.
Standardmäßig rendern Browser <h1>-<h6>-Tags mit folgendem CSS, wobei die font-size auf jeder Ebene kleiner wird, während font-weight fett bleibt:
margin-left: 0;
margin-right: 0;
font-weight: bold;
display: block;Syntax
Die Tags <h1>-<h6> werden paarweise verwendet, daher ist das schließende Tag erforderlich.
Beispiel für die HTML-Tags <h1>-<h6>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>First-level heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<h4>Fourth-level heading</h4>
<h5>Fifth-level heading</h5>
<h6>Sixth-level heading</h6>
</body>
</html>Die Elemente <h1>-<h6> dürfen nicht verwendet werden, um Unterüberschriften, Untertitel, alternative Titel und Slogans auszuzeichnen, es sei denn, sie sollen die Überschrift eines neuen Abschnitts oder Unterabschnitts sein.
Da das align-Attribut in HTML5 nicht mehr unterstützt wird, verwenden Sie stattdessen die CSS-Eigenschaft text-align.
Dokumentgliederung erstellen
Überschriften drücken keine Größe aus — sie drücken Struktur aus. Stellen Sie sich <h1>-<h6> als Inhaltsverzeichnis Ihrer Seite vor. <h1> benennt die gesamte Seite, jedes <h2> eröffnet einen Hauptabschnitt, und <h3> (und tiefer) verschachteln Unterabschnitte darin — ähnlich wie 1 → 1.1 → 1.1.1 in einer gedruckten Gliederung.
Im folgenden Beispiel hat ein Artikel einen <h1>-Titel, zwei <h2>-Abschnitte und einen <h3>-Unterabschnitt, der unter einem davon verschachtelt ist. Lesen Sie nur die Überschriften, und Sie verstehen bereits, was die Seite behandelt:
<!DOCTYPE html>
<html>
<head>
<title>Growing Tomatoes at Home</title>
</head>
<body>
<article>
<h1>Growing Tomatoes at Home</h1>
<p>A beginner's guide to a healthy tomato harvest.</p>
<h2>Choosing a Variety</h2>
<p>Cherry tomatoes are forgiving; beefsteak types need more care.</p>
<h2>Planting and Care</h2>
<p>Tomatoes need full sun and consistent watering.</p>
<h3>Watering Schedule</h3>
<p>Water deeply two to three times a week, more often in heat.</p>
<h3>Common Pests</h3>
<p>Watch for aphids and hornworms on the underside of leaves.</p>
</article>
</body>
</html>Die <h3>-Überschriften gehören zum <h2>-Abschnitt „Planting and Care", da sie danach erscheinen und Teile davon beschreiben. Beachten Sie, dass das Beispiel niemals von <h1> direkt zu <h3> springt — jede Ebene folgt der darüber liegenden.
Überschriften mit CSS gestalten
Um das Aussehen einer Überschrift zu ändern — Farbe, Größe, Ausrichtung oder Abstände — verwenden Sie CSS und nicht eine andere Überschriftsebene. Wählen Sie den Überschriften-Tag anhand seiner Position in der Gliederung und gestalten Sie ihn dann frei:
<!DOCTYPE html>
<html>
<head>
<title>Styled headings</title>
<style>
h1 {
color: #224cc5;
text-align: center;
}
h2 {
color: #22c599;
font-size: 22px;
}
h3 {
color: #bc22c5;
text-transform: uppercase;
letter-spacing: 2px;
}
</style>
</head>
<body>
<h1>Growing Tomatoes at Home</h1>
<h2>Choosing a Variety</h2>
<h3>Watering Schedule</h3>
</body>
</html>Barrierefreiheit und Überschriftenreihenfolge
Benutzer von Screenreadern lesen eine Seite selten von oben nach unten. Stattdessen rufen sie eine Liste der Überschriften auf und springen zwischen diesen, so wie ein sehender Leser fette Titel überfliegt. Dies funktioniert nur, wenn Ihre Überschriften eine korrekte, lückenlose Gliederung bilden.
Zwei Regeln machen Überschriften barrierefrei:
- Keine Ebenen überspringen. Verwenden Sie
<h1>→<h2>→<h3>, nicht<h1>→<h3>. Eine übersprungene Ebene lässt assistive Technologien einen Abschnitt ohne übergeordnetes Element melden. - Wählen Sie keine Überschrift nach ihrer visuellen Größe. Wenn Sie einen kleinen Abschnittstitel benötigen, verwenden Sie die korrekte Ebene (zum Beispiel
<h3>) und verkleinern Sie sie mit CSS font-size. Verwenden Sie niemals<h4>, nur weil es zufällig kleiner aussieht.
Die beiden folgenden Codeausschnitte zeichnen denselben Inhalt aus. Der erste zerstört die Gliederung, der zweite hält sie intakt:
<!-- ❌ Bad: skips from h1 to h3, then jumps back to h2 -->
<h1>Page Title</h1>
<h3>Introduction</h3>
<h2>Main Section</h2>
<h5>A Detail</h5>
<!-- ✅ Good: every level follows the one above it -->
<h1>Page Title</h1>
<h2>Introduction</h2>
<h2>Main Section</h2>
<h3>A Detail</h3>Verwenden Sie nur ein <h1> pro Seite. Das <h1> beantwortet die Frage „Worum geht es auf dieser Seite?" — mehrere <h1>-Tags verwirren diese Antwort sowohl für Suchmaschinen als auch für Screenreader. (Es gibt ältere Empfehlungen, die ein <h1> pro <article> oder <section> erlaubten; diese basierten auf einem Dokumentgliederungsalgorithmus, den kein Browser je umgesetzt hat — bleiben Sie daher bei einem einzigen <h1> pro Seite.) Der im Browser-Tab angezeigte Seitentitel wird separat mit dem <title>-Tag innerhalb von <head> gesetzt.
Einen umfassenderen Überblick darüber, wie die sechs Ebenen zusammenarbeiten, finden Sie im Kapitel HTML-Überschriften.
Attribute
Die Tags <h1> bis <h6> besitzen keine eigenen elementspezifischen Attribute. Zwei Attribute aus der globalen Menge werden bei Überschriften besonders häufig verwendet:
| Attribut | Wert | Beschreibung |
|---|---|---|
| id | text | Gibt der Überschrift einen eindeutigen Bezeichner, damit sie per Anker-Link (#section-name) oder über CSS und JavaScript angesprochen werden kann. |
| align | left, right, center, justify | Legt die horizontale Ausrichtung der Überschrift fest. Veraltet — wird in HTML5 nicht unterstützt; verwenden Sie stattdessen die CSS-Eigenschaft text-align. |
Eine häufige Verwendung von id ist es, Lesern zu ermöglichen, direkt zu einem Abschnitt zu springen:
<h2 id="planting">Planting and Care</h2>
<!-- Elsewhere on the page or site -->
<a href="#planting">Skip to Planting and Care</a>Die Tags <h1> bis <h6> unterstützen außerdem die globalen Attribute und die Ereignisattribute.