Schritt 1: Semantisches HTML

Eine Hauptüberschrift in Form eines H1-Elements gehört in jedes HTML-Dokument. Im vorliegenden Dokument steht diese Hauptüberschrift oben im Dokument.

Die weiteren Themen werden im Dokument mit je einer H2-Überschrift eingeleitet. Anschließend folgen die inhaltlichen Ausführungen in Form von Absätzen (P-Elementen) und sonstigen semantischen Auszeichnungen. Dieser Themenbereich wird zum Beispiel mit der H2-Überschrift Schritt 1: Semantisches HTML eingeleitet.

Wichtig ist es, darauf zu achten, dass die einzelnen Themenbereiche samt ihrer Überschrift nicht zu umfangreich ausfallen. Die Länge – beziehungsweise Höhe – des umfangreichsten Themenbereichs wird als Höhe des CSS-Sichtbereichs verwendet werden.

Schritt 2: Abgrenzungen

Nachdem alle H2-Überschriften samt ihren nachfolgenden Ausführungen in das vorliegende Dokument aufgenommen wurden, benötigen wir ein HTML-Element zur Umhüllung jedes solchen Themenbereichs. Semantisch kommt das FIELDSET-Element in Betracht: es erzeugt im Normalfall einen Rahmen, welcher den darin befindlichen Inhalt vom nachfolgenden optisch trennt.

Auf das im FIELDSET-Element angebbare LEGEND-Element wird hier verzichtet, da der textliche Inhalt bereits durch die im FIELDSET angegebene H2-Überschrift beschrieben wird.

Jedes FIELDSET-Element erhält zusätzlich ein ID-Attribut mit einem eindeutigen Wert zugeordnet. Dadurch können die einzelnen Textabschnitte per Verlinkung im Dokument direkt angesprungen werden.

Schritt 3: Verlinkung

Ein Inhaltsverzeichnis soll die einzelnen Textabschnitte direkt verlinken. Als semantisches Element bietet sich hier ein Liste von Links an. In unserem Beispiel wird eine UL-Liste oberhalb des 1. Textbereichs angelegt. Deren LI-Elemente enthalten die Links in Form von A-Elementen.

Das HREF-Attribut der A-Elemente verweist jeweils auf die Textposition, welche durch das jeweilige FIELDSET umgeben ist und durch den Wert des zugehörigen ID-Attributs eindeutig gekennzeichnet ist.

Die Positionierung der Links ist ein eigenes Thema. In unserem Fall wurden die Links in Form von Schaltflächen nebeneinander, oberhalb des sichtbaren Textbereichs gestaltet.

Schritt 4: Sichtbeschränkung

Die Aufmerksamkeit des Lesers soll nun auf jeweils ein einziges Thema gelenkt werden:

Es bietet sich an, alle Themenbereiche, welche gerade außerhalb der Aufmerksamkeit des Lesers liegen, auszublenden und nur das aktuelle Thema eingeblendet zu lassen. Hierfür wird ein sämtliche FIELDSETS umfassendes HTML-Element benötigt. Da es nur eine gestalterische Rolle hat, kommt ein DIV-Element in Betracht. Zur leichteren Ansprechbarkeit per CSS erhält es ein ID-Attribut mit dem Wert content.

Jedes FIELDSET und das genannte DIV-Element bekommt per CSS eine feste Höhe zugewiesen: die Höhe des längsten Themenbereichs.

Zusätzlich bekommt unser DIV-Element die CSS-Eigenschaft overflow:hidden zugeordnet.

Weitere gestalterische Elemente, zum Beispiel für den hier sichtbaren Rahmen, können bei Bedarf ergänzt werden.