Wie implementiere ich eine automatische Kapitel- und Versnummerierung im HTML?

Automatische Kapitel- und Versnummerierung im HTML bedeutet, dass Überschriften und Absätze automatisch nummeriert werden, ohne dass jede Nummer manuell eingetragen werden muss. Das lässt sich sauber mit CSS (counter), HTML-Struktur und optional JavaScript umsetzen. Die Lösung ist zugänglich, wartbar und lässt sich an unterschiedliche Strukturen (Kapitel, Unterkapitel, Verse) anpassen.

Grundprinzip mit CSS-Countern

CSS bietet die Funktion counter-reset und counter-increment sowie die Pseudoelemente ::before/::after. Zuerst wird ein Zähler auf einem übergeordneten Element zurückgesetzt, dann bei jeder relevanten Überschrift hochgezählt und die Nummer über ein ::before-Pseudoelement eingefügt. Beispiel: body { counter-reset: chapter; } h1 { counter-increment: chapter; } h1::before { content: counter(chapter) ". "; } Für verschachtelte Nummerierung (z. B. Kapitel.Unterkapitel.Vers) werden mehrere Zähler angelegt: counter-reset für jede Ebene und counter-increment pro Ebene. Die content-Eigenschaft kann mehrere counter()-Aufrufe kombinieren: content: counter(chapter) "." counter(section) "." counter(verse) " ";.

HTML-Struktur und Semantik

Saubere Semantik verbessert Zugänglichkeit und Styling. Verwende h1, h2, h3 für Kapitel, Unterkapitel, Abschnitte bzw. spinelemente; Absätze (p) oder spezielle verse-Elemente für Verse. Beispielstruktur:

mit h1 für Kapitel, h2 für Abschnitt, p für Vers. Wenn Verse einzeln nummeriert werden sollen, kann man jedem Vers ein eigenes Element (z. B.

) geben. Für feinere Kontrolle sind container-Elemente (div.section) nützlich, auf denen lokale counter-reset-Anweisungen angewendet werden.

Beispiel: Kapitel, Abschnitt, Vers (CSS)

Setze auf body den Hauptzähler: body { counter-reset: chapter; } H1 inkrementiert Kapitel und setzt den Abschnittszähler zurück: h1 { counter-increment: chapter; counter-reset: section; } h1::before { content: "Kapitel " counter(chapter) ": "; font-weight: bold; } H2 für Abschnitt: h2 { counter-increment: section; counter-reset: verse; } h2::before { content: counter(chapter) "." counter(section) " "; } Für Vers-Nummerierung: .verse { counter-increment: verse; } .verse::before { content: counter(chapter) "." counter(section) "." counter(verse) " "; font-variant-numeric: tabular-nums; }

Alternative/Erweiterung mit JavaScript

Wenn die Struktur dynamisch ist (ein- und ausblendbare Kapitel, verschachtelte Listen, oder komplexe Bedingungen), ist JavaScript flexibler. Ein kurzes Script traversiert die DOM-Hierarchie, erhöht Zähler pro Ebene und setzt die Nummern als Textknoten oder data-Attribute. Vorteil: komplexe Logik, Anpassung an responsives Verhalten, Generierung von Sprungmarken (IDs) möglich. Nachteil: Abhängigkeit von JS für Nummern (CSS-Lösung funktioniert auch ohne JS).

Barrierefreiheit und Styling-Hinweise

Nummern sollten semantisch nicht den Inhalt ersetzen — Screenreader können CSS-Generated Content teils ignorieren. Bei wichtiger numerischer Information empfiehlt sich das Einfügen in das DOM (z. B. ), alternativ data-attribute oder aria-labels ergänzen. Für konsistente Optik nutze tabular-nums in font-feature-settings oder font-variant-numeric. Achte auf ausreichenden Kontrast und korrekte Fokusreihenfolge, wenn Nummern interaktive Sprunglinks erhalten.

Fazit

Für die meisten Fälle empfiehlt sich eine reine CSS-Lösung mit counters für einfache, performante und zugängliche automatische Nummerierung. JavaScript ergänzt bei dynamischen Anforderungen oder wenn die Nummern in der Dokumentstruktur selbst stehen müssen. Mit sauberer HTML-Semantik und ergänzender ARIA- oder DOM-Beschriftung erreichst du sowohl optisch korrekte als auch zugängliche Nummerierungen.