Überschriften, Abschnitte und Orientierung richtig aufbauen

Überschriften geben einer Webseite eine lesbare Ordnung. Sie benennen Themen, zeigen Beziehungen und helfen beim gezielten Einstieg in einen längeren Inhalt. Diese Aufgabe entsteht aus dem Zusammenspiel von Wortwahl, HTML-Ebene und sichtbarer Gestaltung. Eine große Schrift allein ist keine Überschrift. Umgekehrt muss eine technisch korrekt ausgezeichnete Überschrift auch inhaltlich sagen, was im folgenden Abschnitt zu finden ist.

Dieser Artikel entwickelt die Struktur einer ausdrücklich fiktiven Fahrradwerkstatt. Interessenten sollen Leistungen unterscheiden, den Ablauf verstehen und die Kostenklärung finden. Das Beispiel ist keine tatsächlich betriebene Werkstattseite. Sein HTML wird als eigenständiges Dokument geprüft. Die Prüfung kann die vorhandenen Überschriften, Verweise und Ebenen feststellen. Sie ersetzt keine vollständige Prüfung mit assistiven Technologien und keine Beobachtung tatsächlicher Besucher.

1. Erst die Fragen der Leser ordnen

Eine brauchbare Gliederung beginnt außerhalb des HTML-Editors. Schreibe auf, welche Fragen die Seite beantworten soll. Bei der Werkstatt sind das etwa: Welche Arbeiten werden angeboten? Wie läuft eine Reparatur ab? Wie werden die Kosten besprochen? Diese Fragen bilden die Hauptabschnitte. Inspektion und Bremsenservice gehören unter Leistungen. Terminvereinbarung und Fahrradabgabe gehören unter Ablauf. Die Beziehungen folgen dem Inhalt und nicht der verfügbaren Schriftgröße.

Prüfe anschließend die Reihenfolge. Wer zuerst entscheiden muss, ob die Werkstatt die benötigte Arbeit übernimmt, braucht die Leistungen vor dem Ablauf. Eine Seite für bereits vereinbarte Termine könnte dagegen die Abgabe zuerst behandeln. Es gibt keine universell richtige Abfolge für alle Seiten eines Unternehmens. Entscheidend ist der konkrete Besuchsanlass. Derselbe Betrieb kann für unterschiedliche Aufgaben verschiedene Seiten mit eigenen Schwerpunkten benötigen.

Verwende dafür einen einfachen Lesetest: Lies nur die geplanten Überschriften hintereinander. Ergibt sich eine nachvollziehbare Antwortfolge? Wenn mehrere Abschnitte jeweils Mehr erfahren heißen, fehlt die Unterscheidung. Wenn unter Ablauf plötzlich eine Unternehmensgeschichte steht, stimmen Erwartung und Inhalt nicht überein. Diese Prüfung kostet wenig und erkennt strukturelle Probleme früh. Sie setzt noch keine Messung der späteren Bedienbarkeit voraus.

2. Die Seitenüberschrift als konkretes Versprechen schreiben

Die Hauptüberschrift sollte den Inhalt dieser Seite benennen. Fahrrad reparieren lassen ist für das Beispiel aussagekräftiger als Willkommen oder Entdecke neue Möglichkeiten. Sie muss nicht jeden Suchbegriff und jede angebotene Arbeit enthalten. Eine überladene Überschrift erschwert den Einstieg. Die folgenden Abschnitte können die Einzelheiten erläutern. Der Titel erhält damit eine klare Aufgabe, ohne die ganze Seite in einen Satz zu pressen.

Für eine überschaubare Unternehmensseite ist eine eindeutige Hauptüberschrift im Hauptinhalt eine gute redaktionelle Konvention. Sie macht die Verantwortlichkeit des Seitentitels sichtbar und vereinfacht die Pflege. Daraus sollte keine falsche Behauptung entstehen, jedes Dokument mit mehr als einem h1 sei allein deshalb automatisch unzulässig. Im konkreten Beispiel wird bewusst ein h1 verwendet. Das ist eine nachvollziehbare Arbeitsentscheidung und keine vollständige Konformitätsaussage.

Unterscheide die sichtbare Seitenüberschrift vom Titel des Browserdokuments. Beide können dasselbe Thema behandeln, erfüllen aber unterschiedliche Aufgaben. Der Dokumenttitel kann zusätzlich den Anbieter nennen. Die sichtbare Überschrift muss in der Seite selbst verständlich sein. Weder ein Firmenlogo noch eine Brotkrumennavigation ersetzt diesen klaren Einstieg. Prüfe nach einer redaktionellen Änderung beide Stellen, damit sie nicht versehentlich unterschiedliche Leistungen versprechen.

3. Ebenen nach Beziehungen vergeben

Im Werkstattbeispiel ist Fahrrad reparieren lassen die erste Ebene. Leistungen, Ablauf und Kosten klären sind gleichrangige Hauptabschnitte und erhalten h2. Inspektion und Bremsenservice sind Unterthemen von Leistungen und erhalten h3. Termin vereinbaren und Fahrrad abgeben stehen als h3 unter Ablauf. Kosten klären besitzt im kurzen Beispiel keine weitere Untergliederung. Nicht jeder Abschnitt benötigt zusätzliche Ebenen.

Wähle eine Ebene nicht deshalb, weil ihre voreingestellte Darstellung gerade passt. Wenn die zweite Ebene kleiner aussehen soll, wird ihre Gestaltung angepasst. Sie wird nicht durch h4 ersetzt. Für das Beispiel ergibt ein Sprung von h1 direkt zu h3 keine hilfreiche zusätzliche Bedeutung. Die fehlende übergeordnete Ebene sollte geklärt werden. Beim Zurückkehren aus einem Unterthema ist dagegen ein Wechsel von h3 zu h2 selbstverständlich sinnvoll.

Das WAI-Tutorial zu Überschriften erläutert die strukturierende Funktion der Ebenen. Nutze dieses Prinzip mit Blick auf den tatsächlichen Inhalt. Die Anzahl der Absätze entscheidet nicht mechanisch über die Ebene. Auch ein langer Abschnitt kann ein einzelnes Thema behandeln. Mehr Gliederung ist erst dann hilfreich, wenn sie eine erkennbare Beziehung zwischen eigenständigen Teilfragen ausdrückt.

4. Die Wortwahl unabhängig vom Layout prüfen

Eine Überschrift muss auch ohne das zugehörige Bild und ohne den vorausgehenden Absatz Orientierung geben. Kosten klären benennt im Beispiel einen konkreten Abschnitt. Transparent und fair beschreibt dagegen eine Haltung, ohne den enthaltenen Inhalt sicher erkennbar zu machen. Eine solche Formulierung kann im Fließtext sinnvoll sein. Als alleinige Abschnittsbezeichnung bleibt sie für die gezielte Suche unpräzise.

Die Erläuterung zu WCAG 2.2, Erfolgskriterium 2.4.6 behandelt die beschreibende Funktion von Überschriften und Beschriftungen. Das lässt sich nicht auf eine feste Mindestlänge reduzieren. Ein kurzes Wort kann in seinem Kontext ausreichen. Für den Werkstattartikel wird die Verständlichkeit deshalb anhand konkreter Fragen beurteilt: Welche Arbeit steht hier? Welcher Schritt folgt? Wo wird über Kosten gesprochen?

Vermeide außerdem künstliche Unterschiede zwischen fast identischen Überschriften. Ablauf und So läuft es ab wären als zwei gleichrangige Abschnitte schwer auseinanderzuhalten. Trenne stattdessen die Inhalte sauber oder führe sie zusammen. Wiederkehrende Komponenten dürfen ähnliche Titel besitzen, wenn sie auf verschiedenen Seiten dieselbe Funktion erfüllen. Innerhalb einer einzelnen langen Seite müssen die Bezeichnungen jedoch zuverlässig zum jeweiligen Inhalt führen.

5. Abschnitte, Artikel und Container sinnvoll unterscheiden

HTML bietet verschiedene Elemente für unterschiedliche Aufgaben. Ein Abschnitt kann zusammengehörige thematische Inhalte bündeln. Ein neutraler Container kann allein für die Anordnung benötigt werden. Ein eigenständig verständlicher Beitrag ist eine andere Einheit als eine beliebige Spalte im Layout. Der HTML Living Standard beschreibt die einschlägigen Elemente und Überschriften. Für dieses Beispiel werden ausdrücklich benannte Überschriftenebenen verwendet.

Behandle eine neue section nicht als automatischen Ersatz für die passende Ebene. Im gezeigten Dokument bleiben die Beziehungen mit h1, h2 und h3 im tatsächlichen Markup erkennbar. Ebenso wenig muss jeder Absatz in eine eigene section. Eine semantische Einheit braucht einen inhaltlichen Grund. Wenn ein Container lediglich zwei Elemente nebeneinander anordnet, kann ein div die angemessene neutrale Wahl sein.

Eine hilfreiche Prüfung lautet: Würde der Abschnitt auch ohne sein Layout als eigener thematischer Teil benannt werden? Bei Leistungen ist das der Fall. Bei der linken Hälfte einer dekorativen Fläche nicht unbedingt. Zu viele bedeutungstragende Elemente erzeugen keine bessere Struktur, wenn ihre Bedeutung unklar bleibt. Der Textplan und die HTML-Struktur sollten dieselben Beziehungen ausdrücken. Erst danach wird entschieden, wie diese Beziehungen sichtbar angeordnet werden.

6. Ein vollständiges kleines HTML-Beispiel lesen

Das folgende Dokument zeigt die acht Überschriften des Werkstattbeispiels. Die Navigation verweist auf drei tatsächlich vorhandene Abschnittskennungen. Sie ist ausdrücklich als Navigation innerhalb der Seite benannt. Die Texte versprechen keine direkte Onlinebuchung und kein festes Reparaturangebot. Termin und Kosten werden besprochen. Damit bleiben Benennung und dargestellter Ablauf miteinander vereinbar.

<!doctype html>
<html lang="de">
<meta charset="utf-8">
<title>Fahrrad reparieren lassen | Fiktive Werkstatt</title>
<main>
  <h1>Fahrrad reparieren lassen</h1>
  <p>Leistungen, Ablauf und Kostenklärung im Überblick.</p>
  <nav aria-label="Auf dieser Seite">
    <ul>
      <li><a href="#leistungen">Leistungen</a></li>
      <li><a href="#ablauf">Ablauf</a></li>
      <li><a href="#kosten">Kosten klären</a></li>
    </ul>
  </nav>
  <section id="leistungen">
    <h2>Leistungen</h2>
    <h3>Inspektion</h3>
    <p>Wir besprechen den benötigten Prüfumfang.</p>
    <h3>Bremsenservice</h3>
    <p>Die nötigen Arbeiten werden am Fahrrad geklärt.</p>
  </section>
  <section id="ablauf">
    <h2>Ablauf</h2>
    <h3>Termin vereinbaren</h3>
    <p>Zuerst besprechen wir einen passenden Termin.</p>
    <h3>Fahrrad abgeben</h3>
    <p>Bei der Abgabe halten wir den Auftrag fest.</p>
  </section>
  <section id="kosten">
    <h2>Kosten klären</h2>
    <p>Umfang und voraussichtliche Kosten werden abgestimmt.</p>
  </section>
</main>
</html>

Die wenigen Absätze sind zur Übersicht bewusst kurz. Für eine echte Werkstatt müssten konkrete Leistungsgrenzen, Kontaktwege und tatsächliche Vereinbarungen ergänzt werden. Das würde nicht automatisch weitere Überschriftenebenen erfordern. Zuerst wäre zu prüfen, welche zusätzlichen Fragen eigenständige Abschnitte brauchen. Die Beispieltexte dürfen nicht ungeprüft als reale Betriebsinformationen übernommen werden.

7. Gleichrangige Themen sichtbar gleich behandeln

Gestaltung soll die bereits festgelegten Beziehungen unterstützen. Gleichrangige Hauptabschnitte erhalten eine verlässliche gemeinsame Darstellung. Unterthemen müssen von ihnen unterscheidbar bleiben. Das kann über Schriftgröße, Gewicht und Abstand geschehen. Ein Farbwechsel allein reicht als einziges Signal für unterschiedliche Bedeutung häufig nicht aus. Prüfe besonders, ob die sichtbare Gestaltung die Leser zu einer anderen Gruppierung verleitet als das Markup.

Abstände sind dabei Teil der Aussage. Wenn Bremsenservice näher am folgenden Hauptabschnitt als am eigenen Text steht, wirkt die Zuordnung unsicher. Ein wiederkehrender Abstand vor einer Überschrift und ein bewusst kleinerer Abstand zu ihrem Inhalt können die Verbindung verdeutlichen. Dafür gibt es keinen universellen Pixelwert. Schrift, Zeilenlänge und Bildschirmbreite bestimmen mit, welche Abstände im konkreten Entwurf funktionieren.

Betrachte auch lange Überschriften. Eine Formulierung, die auf einem großen Bildschirm einzeilig bleibt, kann auf einem schmalen Gerät mehrere Zeilen benötigen. Sie darf weder abgeschnitten noch durch eine feste Höhe verdeckt werden. Die Gliederung bleibt dieselbe, auch wenn sich der Umbruch verändert. Eine mobile Darstellung sollte deshalb den Platzbedarf lösen und nicht die semantische Ebene verkürzen oder austauschen.

8. Orientierung mit passenden Seitenelementen ergänzen

Überschriften und Landmarks helfen auf unterschiedlichen Ebenen. Der Hauptinhalt, eine Navigation und ergänzende Inhalte können als unterschiedliche Bereiche erkennbar sein. Die ARIA Authoring Practices zu Landmarks beschreiben diese Orientierung. Daraus folgt nicht, dass jeder kleine Abschnitt eine zusätzliche benannte Region werden sollte. Eine Vielzahl gleichartiger Bereiche kann die Übersicht verschlechtern.

Im Werkstattbeispiel genügt für die kurze Seite eine Navigation zu drei Hauptabschnitten. Ein langes Handbuch könnte ein ausführlicheres Inhaltsverzeichnis benötigen. Dieses sollte auf vorhandene Ziele verweisen und verständliche Bezeichnungen verwenden. Eine automatisch erzeugte Liste muss nach redaktionellen Änderungen dieselben Ziele behalten oder kontrolliert aktualisieren. Doppelte Kennungen oder nicht mehr vorhandene Fragmente führen zu vermeidbaren Sackgassen.

Ein Sprunglink zum Hauptinhalt löst wiederum eine andere Aufgabe als das Inhaltsverzeichnis. Er kann wiederkehrende Seitenteile überspringen. Das Verzeichnis erschließt die Themen innerhalb eines Inhalts. Beide Elemente sollten nicht aus Gewohnheit eingefügt werden, sondern im tatsächlichen Seitenrahmen sinnvoll funktionieren. Prüfe dazu die echte Navigation mit Tastatur. Ein sichtbarer Verweis ist noch kein Beleg dafür, dass sein Ziel zuverlässig erreicht wird.

9. Wiederverwendbare Komponenten im Kontext prüfen

Eine Karte mit der Überschrift Inspektion kann innerhalb eines Leistungsabschnitts ein h3 benötigen. Wird dieselbe Karte auf einer eigenständigen Übersichtsseite anders eingebettet, kann ihr Kontext eine andere Ebene verlangen. Eine Komponente sollte deshalb nicht jede Einbausituation mit einem starr festgelegten h2 beantworten. Das Ziel ist eine nachvollziehbare Struktur der gesamten Seite, nicht nur korrekt aussehender Einzelbausteine.

Halte die erlaubten Einbausituationen im Gestaltungssystem fest. Ein Baustein kann eine explizite Überschriftenebene erhalten oder in klar definierten Varianten angeboten werden. Welche Lösung geeignet ist, hängt von der technischen Umgebung und den redaktionellen Aufgaben ab. Wichtig ist, dass die Bedeutung nicht über eine zufällige CSS-Klasse gesteuert wird. Schriftgröße und semantische Ebene brauchen voneinander unabhängige Entscheidungen.

Teste mindestens einen vollständigen zusammengesetzten Inhalt. Einzelne Komponentenvorschauen zeigen nicht, ob zwei Bausteine versehentlich dieselbe Kennung erzeugen oder eine übergeordnete Überschrift fehlt. Eine technisch gültige Karte kann in einer falschen Umgebung trotzdem eine verwirrende Gliederung erzeugen. Die abschließende Prüfung gehört deshalb zur Seite mit allen tatsächlich eingebundenen Bereichen.

10. Typische Fehlentscheidungen gezielt korrigieren

Korrigiere zuerst die inhaltlichen Gruppen und dann die Auszeichnung. Ein automatischer Austausch aller h4 gegen h2 könnte ebenso falsch sein wie der Ausgangszustand. Die aktuelle Ebene allein verrät nicht, welche Beziehung beabsichtigt war. Bei gewachsenen Seiten lohnt sich deshalb ein kleiner Inhaltsplan mit den tatsächlichen Themen. Die Korrektur lässt sich anschließend begründen und bei späterer Pflege wiederverwenden.

Bewahre bestehende Sprungziele nach Möglichkeit, wenn andere Seiten darauf verweisen. Eine verständlichere Überschrift muss nicht zwingend eine neue Kennung erhalten. Werden Kennungen geändert, sollten die betroffenen Verweise geprüft werden. Eine rein sprachliche Verbesserung darf nicht unbemerkt einen funktionierenden Einstieg beschädigen. Das betrifft interne Inhaltsverzeichnisse ebenso wie bekannte Verweise aus anderen Beiträgen.

Ein weiterer häufiger Fall sind Fragenlisten. Nicht jede kurze Antwort braucht zwingend eine eigene Überschrift. Wenn eine Seite wenige eng verbundene Angaben wie Abgabezeit, benötigte Unterlagen und Abholhinweis zusammenstellt, kann eine Liste die übersichtlichere Form sein. Eine eigenständige Frage mit mehreren erklärenden Absätzen kann dagegen eine passende Unterüberschrift erhalten. Entscheide nach dem Informationsbedarf. Eine einheitliche optische Kachelform darf nicht darüber bestimmen, ob alle Inhalte dieselbe semantische Bedeutung bekommen.

Auch Suchmaschinenorientierung sollte die Gliederung nicht verzerren. Für die Werkstatt wäre eine Reihe fast gleicher Überschriften mit jeweils leicht verändertem Ortsnamen keine hilfreiche Antwortstruktur. Ein eigener Abschnitt muss einen eigenen Inhalt tragen. Beschreibe die tatsächlich vorhandenen Leistungen verständlich und verwende die Begriffe, die zu ihnen passen. Eine korrekt ausgezeichnete Ebene oder ein häufiger Suchbegriff garantiert weder eine bestimmte Platzierung noch die Erwähnung durch ein KI-System. Die redaktionelle Aufgabe bleibt, zutreffende Antworten auffindbar zu machen.

Bei übersetzten Seiten werden die Beziehungen ebenfalls kontrolliert. Eine Übersetzung kann erheblich mehr Platz benötigen oder einen anderen sprachlichen Satzbau verlangen. Das rechtfertigt nicht automatisch eine andere Hierarchie. Prüfe zuerst, ob dieselben Inhalte vorhanden sind. Wenn eine Sprachfassung bewusst einen zusätzlichen eigenständigen Hinweis braucht, muss dessen Einordnung inhaltlich begründet werden. Die Nummerierung einer Überschrift sollte dabei nicht ihre einzige verständliche Bezeichnung sein. Eine Liste aus Abschnitt eins, Abschnitt zwei und Abschnitt drei sagt ohne Kontext wenig über das enthaltene Thema aus.

11. Die konkrete Ausgabe prüfen

Für das Beispiel lässt sich die tatsächliche Reihenfolge im Browser auslesen. Erwartet werden genau acht Überschriften mit den vereinbarten Ebenen. Zusätzlich werden die drei Fragmentziele und die Eindeutigkeit der Kennungen geprüft. Eine absichtlich beschädigte Variante mit einem h4 statt h3 muss dabei auffallen. So wird nicht nur festgestellt, dass irgendeine Prüfung erfolgreich ausgeführt wurde, sondern auch, ob sie den gemeinten Fehler erkennen kann.

Ergänze diese Strukturprüfung durch eine redaktionelle Sichtung. Lies die Überschriftenliste ohne Fließtext. Kontrolliere anschließend die sichtbare Gruppierung auf einem schmalen und einem breiten Bildschirm. Nutze die vorhandenen Bedienhilfen und assistiven Technologien der tatsächlichen Prüfumgebung, wenn eine entsprechende Prüfung verlangt wird. Ein ausgelesenes DOM ist kein Ersatz für jede Benutzererfahrung und keine vollständige Barrierefreiheitsbewertung.

• Beschreibt die Hauptüberschrift den Inhalt dieser Seite?
• Benennen die Hauptabschnitte unterscheidbare Fragen?
• Sind Unterthemen der richtigen übergeordneten Gruppe zugeordnet?
• Stimmen sichtbare und technische Beziehungen überein?
• Führen alle Verweise des Inhaltsverzeichnisses zum beabsichtigten Ziel?
• Bleiben lange Überschriften bei schmaler Darstellung vollständig sichtbar?
• Wurde die zusammengesetzte Seite geprüft?

12. Die Struktur bei Änderungen erhalten

Eine Gliederung bleibt nur hilfreich, wenn sie bei neuen Inhalten mitgepflegt wird. Wird das Werkstattangebot um eine weitere Leistung ergänzt, gehört sie zunächst in den bestehenden Leistungsabschnitt. Erst ein neuer eigenständiger Informationsbedarf begründet einen weiteren Hauptabschnitt. So wächst die Seite nachvollziehbar. Sie bekommt nicht für jede zusätzliche Textmenge eine neue Ebene oder einen beliebigen Zwischenruf.

Dokumentiere dafür die beabsichtigte Beziehung in einem kurzen Inhaltsplan. Dieser Plan sollte nicht jede Formulierung einfrieren. Er erklärt, welche Fragen gemeinsam behandelt werden und warum. Eine spätere Autorin kann dann eine neue Leistung ergänzen, ohne die Struktur neu erfinden zu müssen. Technische Prüfungen können weiterhin doppelte Kennungen und unerwartete Ebenen erkennen. Ob eine neue Überschrift den Inhalt verständlich beschreibt, bleibt eine redaktionelle Aufgabe.

Eine gute Überschriftenstruktur ist damit keine einmalige Formatierung. Sie ist eine verlässliche Vereinbarung zwischen Inhalt, Gestaltung und Implementierung. Die Werkstattseite zeigt diese Vereinbarung im kleinen Maßstab: ein erkennbares Thema, drei Hauptfragen und passend zugeordnete Unterthemen. Genau diese Klarheit sollte auch eine umfangreichere Unternehmenswebseite bewahren.

Quellen und fachlicher Stand

Stand der aufgerufenen Quellen: 9. November 2026. Ergänzend erläutert die MDN-Referenz zu HTML-Überschriften die Elemente. Das Werkstattdokument und seine Prüfung sind eigene begrenzte Lernbeispiele. Sie behaupten keine realen Werkstattleistungen, keine Nutzerstudie und keine vollständige WCAG-Konformität.