Überschriftsystem: H1-, H2- und H3-Regeln

Ein Überschriftsystem ist die geordnete Menge aus einem Seitentitel und seinen Abschnittsbezeichnungen. Es verwandelt eine lange Seite in einen lesbaren Pfad für Menschen und eine maschinenlesbare Gliederung für Suchmaschinen, assistive Technologien und KI-Antwortsysteme.

Der Seitentitel oben ist die einzige H1 dieser Seite. Jede wesentliche Spezifikation darunter ist eine H2, und jede Untergliederung innerhalb eines Hauptabschnitts ist eine H3. Diese live Gliederung ist das gerenderte Element: seine Ebenen drücken Beziehungen aus, nicht Schriftgrößen.

Warum dieses Element wichtig ist

Leser konsumieren selten eine lange Seite in einem einzigen, ununterbrochenen Durchgang. Sie scannen nach einer erkennbaren Frage, vergleichen Abschnittsbezeichnungen mit ihrem aktuellen Bedarf und entscheiden, wo sie langsamer werden möchten. Beschreibende Überschriften verringern diesen Aufwand, weil jede ein kleines Versprechen darüber macht, was folgt. „Wie stabile Überschrifts-IDs Zitationen bewahren" ist auf einen Blick nützlich; „Ein paar weitere Gedanken" ist es nicht.

Dieselbe Hierarchie unterstützt die maschinelle Extrahierbarkeit, das heißt, ein automatisiertes System kann einen Abschnitt identifizieren, verstehen, wie er zum Seitenthema gehört, und ihn abrufen, ohne ihn mit einem benachbarten Abschnitt zu verwechseln. H1 legt den Seitengegenstand fest. H2 unterteilt diesen Gegenstand in primäre Anliegen. H3 verengt eine H2 auf eine Methode, einen Fall, ein Kriterium oder eine Ausnahme. Eine übersprungene Ebene verbirgt diese Beziehung und zwingt einen Parser dazu, zu erraten, ob ein Unterabschnitt ein Geschwister, ein Kind oder ein unabhängiger Block ist.

Überschriften schaffen auch adressierbare Abschnitte. Ein Fragmentbezeichner ist der Teil einer URL nach dem #, wie zum Beispiel #qa-checkliste. Suchergebnisse, interne Links, Browser-Lesezeichen und KI-Antworten können auf dieses genaue Ziel verweisen. Eine nachlässig umbenannte automatisch generierte ID kann daher eine URL zerstören, selbst wenn die Seite selbst noch existiert. Die Überschrift ist keine Dekoration: Ihr Text definiert den Abschnitt und ihre ID wird zu einer dauerhaften öffentlichen Adresse.

Befolgen Sie die Element-Schreibregeln , wenn der Zweck eines Abschnitts einem getypten Element entspricht. Eine H2 mit dem Namen „Warnung" ersetzt keine Warnbox, und eine H2 mit dem Namen „Vergleich" ersetzt keine Vergleichstabelle. Überschriften bieten eine Dokumenthierarchie; getypte Elemente bieten zweckspezifische Struktur. Beide können erforderlich sein.

Wann es verwendet wird

Verwenden Sie das Überschriftsystem auf jeder substanziellen indexierbaren Seite. Selbst eine kurze Seite benötigt eine H1. Fügen Sie H2-Abschnitte hinzu, wenn sich der Leser zwischen verschiedenen Fragen, Phasen, Kriterien oder Beweisgruppen bewegen muss. Fügen Sie H3-Unterabschnitte nur dann hinzu, wenn eine H2 mindestens zwei wirklich unterschiedliche Teile enthält, die von einer separaten Navigation profitieren.

Die Grenzfälle sind visuelle Bezeichnungen, die wie Überschriften aussehen, aber nicht zur Artikelgliederung gehören:

• Ein Kartentitel benennt eine einzelne wiederholte Karte; er ist nicht automatisch ein Dokumentabschnitt.
• Eine Callout-Bezeichnung wie „Tipp" oder „Wichtig" kennzeichnet den Boxtyp; sie wird nicht allein dadurch zu einer H2, dass sie fett gedruckt ist.
• Ein Diagrammtitel kennzeichnet eine Abbildung. Er gehört in die Bildunterschrift oder den zugänglichen Namen der Abbildung, es sei denn, das Diagramm beginnt einen vollständigen Abschnitt.
• Eine Navigationsmenübezeichnung, Breadcrumb, ein Tab, Accordion-Steuerelement, eine Fußzeilenüberschrift und ein modaler Titel benötigen möglicherweise Komponentsemantik, aber sie gehören nicht in die Hauptartikelhierarchie.
• Ein großer Werbeslogan ist Anzeigentext. Die Schriftgröße kann ihn nicht zur H1 des Dokuments befördern.

Fügen Sie keine Überschrift nur hinzu, um einen einzigen Satz einzuleiten, eine fortlaufende Erklärung zu unterteilen oder visuellen Freiraum zu schaffen. Verwenden Sie dafür Absatzabstände oder redaktionelle Bearbeitung. Eine nützliche Überschrift markiert einen Abschnitt, der substanziell genug ist, um ein bestimmtes Leserbedürfnis zu beantworten.

Wo Überschriften platziert werden

Die Position drückt die Abstammung aus. Platzieren Sie die H1 am Anfang des Hauptinhalts, nach Breadcrumbs oder anderer Seitennavigation und vor der Einleitung. Platzieren Sie jede H2 vor einem primären Abschnitt. Platzieren Sie eine H3 nur nach ihrer übergeordneten H2 und dem orientierenden Inhalt des übergeordneten Elements, niemals vor der ersten H2 und niemals als einen aus visuellen Gründen gewählten gleichrangigen Eintrag.

Zwei Überschriften dürfen in verfassten Artikelinhalten nicht benachbart sein. Jede Überschrift muss nützlichen Inhalt besitzen, bevor die nächste Überschrift derselben oder einer tieferen Ebene kommt. Diese Regel verhindert leere Abschnittsbezeichnungen, gibt dem Leser Kontext vor einer Unterabschnittsliste und erzeugt extrahierbare Passagen anstatt einer bloßen Gliederung.

Anatomie

Die beschriftete Anatomie besteht aus fünf Teilen:

1. H1: der eindeutige Seitengegenstand und die Spitze der Inhaltsgliederung.
2. H2: eine primäre Frage, Phase oder Dimension innerhalb dieses Gegenstands.
3. H3: ein untergeordnetes Thema, das ohne seine übergeordnete H2 nicht richtig verstanden werden kann.
4. Eigener Inhalt: die Antwort, die Belege, Anleitungen oder Erklärungen zwischen einer Überschrift und der nächsten Überschrift auf derselben oder einer höheren Ebene.
5. Stabile ID: das Fragment-Ziel, das an die Überschrift angehängt und nach der Veröffentlichung beibehalten wird.

Die Beziehung bleibt gültig, wenn sich die Typografie ändert. Ein Theme kann H2 auf mobilen Geräten mit einer kleineren Schriftart darstellen, muss aber im HTML H2 bleiben. Umgekehrt verleiht ein großer und fetter Absatz einer Überschrift weder Überschriftssemantik noch ein Fragment-Ziel.

Gestaltungsbeispiele

Gestaltungsvarianten entsprechen semantischen Ebenen und realen Umbruchzuständen, nicht willkürlichen Farboptionen.

H1-Seitentitel: zeigen Sie den eindeutigen Gegenstand am Anfang des Hauptinhalts. Eine unterstützende Beschreibung darf folgen, aber kein Eyebrow, Logo oder Hero-Slogan wird zu einer weiteren H1.

H2-Primärabschnitt: machen Sie den Abschnitt aus einem Inhaltsverzeichnis verständlich und lassen Sie ihm Inhalt folgen, der den Umfang festlegt.

H3-Unterabschnitt: verwenden Sie die tiefere Ebene, weil das Thema untergeordnet ist, nicht weil der Gestalter einen kleineren Text wünscht.

Umgebrochene Überschrift: erlauben Sie einen natürlichen zweizeiligen Umbruch auf schmalen Bildschirmen. Kürzen Sie eine klare Überschrift nicht zu einer mehrdeutigen Bezeichnung, nur um sie auf einer Zeile zu halten.

Verankerte Zustände: zeigen Sie Hover und Tastaturfokus, ohne den Anker zum einzigen Weg zu machen, das Ziel zu verstehen. Die direkte Navigation muss eine etwaige fixierte Kopfzeile ausgleichen, sodass die Überschrift nicht verdeckt wird.

Parameter

Das Überschriftsystem ist ein Dokumentvertrag und kein dekoratives Bauteil. Seine Parameter definieren die Gliederung, den Text, den die Leser sehen, den Inhalt, den jeder Knoten besitzt, und die URL, über die dieser Knoten erreicht werden kann.

Die Zeichen- und Wortgrenzen sind redaktionelle Richtwerte, kein Grund, notwendige Spezifität wegzulassen. Eine 94 Zeichen lange Überschrift, die zwei ähnliche Verfahren unterscheidet, ist besser als eine kurze, aber irreführende. Die strukturellen Grenzen sind streng: eine H1, keine übersprungenen Ebenen, keine doppelten IDs und keine leeren Abschnitte.

Syntax und Codebeispiele

Die kanonische portable Form umschließt die native Gliederung mit einer heading-system-Direktive. Die erste Überschrift wird dem Dokumenttitel zugeordnet; spätere Überschriften bleiben geordnete Inhaltsknoten. Explizite IDs werden hinzugefügt, sobald die Überschriften öffentlich werden.

Portable Markdown-Direktive

:::heading-system
# API-Schlüssel ohne Ausfallzeit rotieren

Ersetzen Sie die Anmeldedaten in jedem abhängigen Dienst, bevor Sie den alten Schlüssel widerrufen.

## Ersatz vorbereiten

Notieren Sie jeden Dienst, der aktuell die Anmeldedaten liest.

### Versteckte Verbraucher identifizieren

Überprüfen Sie geplante Jobs, Bereitstellungsgeheimnisse und lokale Integrationen.

## Verifizieren und widerrufen

Testen Sie den Ersatz, widerrufen Sie dann den offengelegten Schlüssel.
:::

Bei der Veröffentlichung fixieren Sie stabile IDs, anstatt zuzulassen, dass zukünftige Textänderungen sie neu generieren:

## Ersatz vorbereiten {#prepare-replacement}
### Versteckte Verbraucher identifizieren {#identify-hidden-consumers}

Hugo-Shortcode

{{< heading-system h1="API-Schlüssel ohne Ausfallzeit rotieren" >}}
## Ersatz vorbereiten {#prepare-replacement}

Notieren Sie jeden Dienst, der aktuell die Anmeldedaten liest.

### Versteckte Verbraucher identifizieren {#identify-hidden-consumers}

Überprüfen Sie geplante Jobs, Bereitstellungsgeheimnisse und lokale Integrationen.
{{< /heading-system >}}

Dies ist der Hugo-Adaptervertrag, keine Behauptung, dass dieses Repository einen heading-system-Shortcode registriert. Eine Hugo-Implementierung kann die H1 weiterhin aus dem Frontmatter und die Körperüberschriften über Markdown rendern, wie diese Seite es tut, vorausgesetzt, sie validiert dieselbe Hierarchie und bewahrt explizite IDs.

WordPress-Block

<!-- wp:heading {"level":2,"anchor":"prepare-replacement"} -->
<h2 id="prepare-replacement">Ersatz vorbereiten</h2>
<!-- /wp:heading -->

<p>Notieren Sie jeden Dienst, der aktuell die Anmeldedaten liest.</p>

<!-- wp:heading {"level":3,"anchor":"identify-hidden-consumers"} -->
<h3 id="identify-hidden-consumers">Versteckte Verbraucher identifizieren</h3>
<!-- /wp:heading -->

WordPress sollte die H1 im Seitentitelfeld oder einem genehmigten Hero-Block speichern, nicht als zweiten Überschriftsblock im Artikelkörper. Legen Sie den HTML-Anker jeder veröffentlichten Überschrift explizit fest, damit eine spätere Textänderung nicht stillschweigend ihre URL ändert.

Beispiele

Gut: Die Gliederung sagt vollständige Antworten voraus

# So wählen Sie einen Rechnungsgenehmigungsworkflow aus

## Das Genehmigungsrisiko definieren
Erklären Sie, welche Rechnungswerte, Lieferanten und Ausnahmen geprüft werden müssen.

### Wertschwellen festlegen
Weisen Sie jeder Schwelle einen benannten Genehmiger zu und dokumentieren Sie, was an der Grenze passiert.

### Richtlinienausnahmen steuern
Leiten Sie fehlende Bestellungen und geänderte Bankdaten an einen separaten Prüfpfad weiter.

## Den Workflow testen
Führen Sie vor dem Start normale und außergewöhnliche Rechnungen durch den vollständigen Pfad.

Dies funktioniert, weil die H1 eine Aufgabe benennt, jede H2 eine primäre Phase nennt, jede H3 zu ihrem übergeordneten Element gehört und jeder Bezeichnung ein Inhalt folgt, der ihr Versprechen erfüllt. Ein Leser kann die Gliederung überfliegen und vorhersagen, wo Schwellenwerte, Ausnahmen und Tests abgedeckt werden.

Schlecht: Gestaltung ersetzt Hierarchie

# Rechnungsgenehmigung

### Dinge, über die man nachdenken sollte
## Weitere Informationen
### Ausnahmen
### Sonstiges

Dies scheitert aus vier unabhängigen Gründen. Es springt von H1 zu H3, verwendet Bezeichnungen, die keine Antwort vorhersagen, platziert Überschriften nebeneinander ohne eigenen Inhalt und lässt „Ausnahmen" ohne Erklärung vor der nächsten Überschrift. Die resultierende Gliederung suggeriert eine Abdeckung, die die Seite nicht bietet. Sie erzeugt zudem schwache automatisch generierte IDs wie #sonstiges, die bei einer Zitation außerhalb der Seite mehrdeutig sind.

Schema-Markup und Barrierefreiheit

Überschriften benötigen keinen eigenständigen Schema.org-Typ. Die H1 liefert oder spiegelt üblicherweise die headline eines Article, TechArticle oder einer anderen geeigneten Seitenentität, aber der sichtbare Wortlaut und das JSON-LD müssen denselben Gegenstand beschreiben. H2- und H3-Abschnitte bleiben HTML-Struktur; erzeugen Sie keine Schema-Entität für jede Überschrift. Eine Überschrift mit dem Titel „Häufig gestellte Fragen" erzeugt auch nicht automatisch FAQPage-Markup – die sichtbaren Frage-Antwort-Daten müssen den FAQ-Elementvertrag erfüllen.

Barrierefreiheit hängt von semantischem HTML und logischer Reihenfolge ab. Screenreader-Nutzer können nach Überschriften navigieren, eine Überschriftsliste inspizieren oder direkt zwischen Abschnitten springen. Dieser Arbeitsablauf bricht zusammen, wenn die Seite Ebenen aus gestalterischen Gründen überspringt, fette Absätze als unechte Überschriften verwendet oder Dienstprogramm- und Artikelüberschriften in einer inkohärenten Hierarchie vermischt.

Verwenden Sie tatsächliche <h1>, <h2>- und <h3>-Elemente. Halten Sie den Überschriftstext sichtbar; ein aria-label darf keinen klaren Bildschirmtext ersetzen. Ankersteuerelemente benötigen einen beschreibenden zugänglichen Namen, einen sichtbaren Tastaturfokus und ein Klickziel, das vom Überschriftstext getrennt ist, wenn das Verlinken der gesamten Überschrift die Auswahl erschweren würde. Wenn eine Fragment-URL geladen wird, muss der Tastaturfokus nicht automatisch springen, aber die Zielüberschrift muss sichtbar und nicht von einer fixierten Kopfzeile verdeckt sein.

Überschrifts-IDs müssen innerhalb der Seite eindeutig sein und mit einem Buchstaben beginnen. Halten Sie sie in Kleinbuchstaben, mit Bindestrichen, lesbar und frei von flüchtigen Daten oder Positionsnummern. Eine stabile ID kann #ergebnisse-verifizieren bleiben, auch wenn sich die sichtbare Überschrift von „Ergebnisse verifizieren" zu „Die neuen Anmeldedaten verifizieren funktioniert" verbessert. Wenn sich die Bedeutung des Abschnitts vollständig ändert, erstellen Sie eine neue ID und bewahren Sie das alte Fragment durch einen Alias oder ein dokumentiertes Weiterleitungsverhalten, sofern die Plattform dies unterstützt. Die separate Spezifikation Ankerlinks regelt die Ankernavigation und Interaktionsdetails.

Schreibregeln

Schreiben Sie die Gliederung der Seite, bevor Sie einzelne Bezeichnungen verfeinern. Jede Überschrift sollte die Frage „Was werde ich hier lernen, entscheiden oder tun?" in konkreter Sprache beantworten. Bevorzugen Sie „Jährliche und monatliche Abrechnungskosten vergleichen" gegenüber „Preisüberlegungen" und „Warum der Import doppelte IDs ablehnt" gegenüber „Fehlerbehebung." Beschreibend bedeutet nicht weitschweifig; es bedeutet, dass die Bezeichnung den tatsächlichen Inhalt des Abschnitts vorhersagt.

Verwenden Sie eine H1 mit 20–80 Zeichen. Bevorzugen Sie H2- und H3-Überschriften mit 2–12 Wörtern und nicht mehr als 90 Zeichen. Ein langer Leitfaden hat normalerweise 3–12 H2-Abschnitte. Eine H2 benötigt mindestens einen Satz zum Umfang oder zur Antwort vor einer H3. Verwenden Sie zwei oder mehr H3-Abschnitte unter einem übergeordneten Element, wenn die Unterteilung hilfreich ist; eine einzelne H3 deutet oft darauf hin, dass ihr Inhalt in die H2 eingegliedert werden sollte.

Verwenden Sie Satzfall, es sei denn, ein Eigenname oder Produktname erfordert Großschreibung. Fragen sind angemessen, wenn der Abschnitt die genaue Frage sofort beantwortet. Aussagekräftige Bezeichnungen eignen sich für Phasen, Kriterien, Ergebnisse und Spezifikationen. Halten Sie parallele Abschnitte grammatikalisch parallel: Verwenden Sie Verben für eine Prozesssequenz, Substantive für Vergleichskriterien oder Fragen für eine FAQ-Gruppe.

Setzen Sie niemals Folgendes in Überschriftentexte:

• Markdown-Links oder rohe URLs; sie erzeugen konkurrierende Ziele und instabile zugängliche Namen.
• Fußnotenmarkierungen oder Quellenzitate; platzieren Sie Belege im eigenen Inhalt.
• Emojis, die als Strukturbezeichnungen, Statusabzeichen oder dekorative Präfixe verwendet werden.
• Manuelle Nummerierungen, es sei denn, der Beitragstyp definiert eine stabile geordnete Sequenz.
• CTA-Sprache wie „Jetzt kaufen", Preisangaben, Dringlichkeit oder Werbeabzeichen.
• Gestaltungsanweisungen, HTML-Zeilenumbrüche oder gerätespezifische Abkürzungen.
• Ein zweiter Satz, der in den Absatz darunter gehört.

Schreiben Sie keine cleveren Bezeichnungen, die auf den umgebenden Text angewiesen sind, um Sinn zu ergeben. „Die Sache wird kompliziert" mag zur Stimme eines Essays passen, aber es liefert einem Suchergebnis, Inhaltsverzeichnis, einer Screenreader-Überschriftsliste oder einer KI-Zitation keinen nutzbaren Kontext. Bewahren Sie die Persönlichkeit in der Erklärung nach einer präzisen Überschrift.

Beitragstypen, die es verwenden

Das Frontmatter-Array postTypes steuert diese Beziehungen. Jeder aufgeführte Beitragstyp verwendet denselben Hierarchievertrag, während seine eigene Anatomie die genauen Abschnittsnamen und die Reihenfolge bestimmt.

QA-Checkliste

• Die Seite rendert genau eine sichtbare H1, und sie benennt den tatsächlichen Gegenstand der Seite.
• Die Gliederung verläuft von H1 zu H2 zu H3 ohne übersprungene Ebenen.
• Jede H3 hat ein eindeutiges, vorausgehendes übergeordnetes H2-Element.
• Auf jede Überschrift folgt sinnvoller eigener Inhalt vor der nächsten Überschrift.
• Jede H2 enthält einen orientierenden oder antwortenden Satz vor ihrer ersten H3.
• Der Überschriftstext ist beschreibend, wenn er allein in einem Inhaltsverzeichnis oder einer Screenreader-Überschriftsliste gelesen wird.
• Parallele Abschnitte verwenden parallele Grammatik und äquivalente Ebenen.
• Überschriftsebenen spiegeln Beziehungen wider, nicht Schriftgröße oder gewünschtes visuelles Gewicht.
• Getypte Zwecke verwenden weiterhin ihre erforderlichen Elemente; Überschriften imitieren keine Komponenten.
• Jede veröffentlichte Überschrift hat eine eindeutige, lesbare, stabile Fragment-ID.
• Vorhandene Fragment-IDs bleiben unverändert, wenn der sichtbare Wortlaut bearbeitet wird, ohne die Abschnittsbedeutung zu ändern.
• Die direkte Fragment-Navigation hinterlässt das Ziel sichtbar unterhalb einer etwaigen fixierten Kopfzeile.
• Der Überschriftstext enthält keine Links, Zitationen, Emoji-Bezeichnungen, Werbeabzeichen oder manuelle Zeilenumbrüche.
• Die HTML-Gliederung bleibt kohärent bei Vorhandensein von Menüs, Karten, Accordions, Modalen und anderen Seitenkomponenten.
• Die gerenderte Seite funktioniert bei schmaler Breite, wobei zweizeilige Überschriften ohne Beschneidung oder Überlappung umbrechen.

Weisen Sie die Seite zurück, wenn das visuelle Design poliert aussieht, die Gliederung jedoch fehlschlägt. Überschriftsfehler potenzieren sich: Eine übersprungene Ebene oder ein leerer Abschnitt zwingt jeden nachgelagerten Konsumenten dazu, härter zu arbeiten, um Beziehungen zu rekonstruieren, die die Quelle direkt hätte angeben sollen.

FAQ

Die folgenden Fragen klären die Fälle, die am wahrscheinlichsten inkonsistente Gliederungen über Editoren und Plattformen hinweg erzeugen. Ihre maßgeblichen Werte leben im strukturierten [[faq]]-Frontmatter oben, sodass die sichtbare Ausgabe und allfällige Schema-Ausgaben eine Quelle gemeinsam nutzen können.