Wie kann ich Kapitel- und Versnummern in einer Bibel-HTML-Datei korrekt darstellen?

1 Im Anfang schuf Gott Himmel und Erde.

2 Und die Erde war wüst und leer, und Finsternis lag auf der Tiefe; und der Geist Gottes schwebte auf dem Wasser.

3 Und Gott sprach: Es werde Licht! Und es wurde Licht.

1 So wurden vollendet Himmel und Erde mit ihrem ganzen Heer.

2 Und Gott vollendete am siebenten Tage seine Werke, die er machte; und ruhte am siebenten Tage von allen seinen Werken, die er gemacht hatte.

Um Kapitel- und Versnummern in einer Bibel-HTML-Datei korrekt darzustellen, ist es wichtig, sowohl semantische Struktur als auch optische Hervorhebung zu berücksichtigen. Kapitel werden idealerweise als Überschriften gekennzeichnet, um die klare Gliederung im Text zu verdeutlichen und die Navigation etwa für Screenreader zu erleichtern. In dem Beispiel wird dafür eine div mit einer Klasse chapter-number verwendet, die zudem die Rolle heading und ein geeignetes aria-level erhält. So wissen assistive Technologien, dass hier eine Kapitelüberschrift steht.

Versnummern werden nahe am Versanfang platziert und per span mit der Klasse verse-number ausgezeichnet. Wichtig ist, dass sie nicht Teil des Fließtexts sind, sondern visuell und semantisch klar abgegrenzt werden. Eindeutige IDs und aria-labels bieten zusätzliche Informationen für Screenreader.

Zusätzlich können CSS-Styles dafür sorgen, dass die Versnummern optisch kleiner oder in Hochstellung angezeigt werden, um sie vom eigentlichen Text abzuheben, ohne die Lesbarkeit zu verschlechtern.

Für die beste Nutzererfahrung ist es zudem hilfreich, Kapitel und Verse entsprechend zu strukturieren, sodass eine einfache Verlinkung auf einzelne Stellen möglich ist. Dazu dienen IDs wie kapitel-1 oder vers-1-1 (Kapitel 1, Vers 1).

Zudem sollte man darauf achten, den Textfluss nicht zu stören. Deshalb sind Versnummern meistens auf der gleichen Textzeile wie das Bibelzitat, aber dennoch klar getrennt gestylt. Screenreader lesen so nicht ungewollt die Nummer als Teil des Verses vor, sondern erkennen sie als separate Information.

Zusammengefasst sorgt die Kombination aus semantisch korrektem HTML (Überschriften für Kapitel, separate span-Elemente mit passenden Beschriftungen für Verse) und ansprechendem CSS für eine klare, zugängliche und ansprechende Darstellung der Kapitel- und Versnummern in einer Bibel-HTML-Datei.