Texthierarchie

Die Überschriften (H1-H6) sind in sechs Ebenen unterteilt und schaffen eine klare visuelle Gliederung von der Hauptüberschrift (H1) zu den untergeordneten Ebenen (H6). Normale Absätze (Paragraphen) bilden den Fließtext und sorgen für ein einheitliches Textbild.

Überschrift (H1–H6)

H1 – Hauptüberschrift (größte Schriftgröße, höchste Gewichtung, einmalig pro Seite), H2–H6 – absteigende Hierarchieebenen mit jeweils kleinerer Schriftgröße und geringerer visueller Gewichtung.

H1

<h1>Überschrift 1</h1>

H2

<h2>Überschrift 2</h2>

H3

<h3>Überschrift 3</h3>

H4

<h4>Überschrift 4</h4>

H5

<h5>Überschrift 5</h5>

H6

<h6>Überschrift 6</h6>

Visuelle Darstellung

Überschriften müssen in einer klaren Hierarchie angewendet werden und demensprechend semantisch korrekt sein. In Ausnahmefällen kann die visuelle Darstellung von Überschriften abweichen, jedoch muss die Semantik erhalten bleiben. Für diese Anwendungen können Klassen verwendet werden, um die visuelle Darstellung zu steuern.

Ich bin eine H3, dargestellt als H4

<h3 class="h4">Ich bin eine H3, dargestellt als H4</h3>

Standardmäßig sind Überschriften bold, können jedoch mittels Klasse font-regular auch regular dargestellt werden.

Ich bin eine schlanke Überschrift

<h4 class="font-regular">Ich bin eine schlanke Überschrift</h4>

Absatz

Normale Textabsätze folgen einer einheitlichen Formatierung.

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

<p>Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.</p>

Liste

Sortierte Listen haben nummerierte Punkte zur Darstellung einer Reihenfolge oder Priorität.

1. Erster Listeneintrag
2. Zweiter Listeneintrag
3. Dritter Listeneintrag

<ol>
    <li>Erster Listeneintrag</li>
    <li>Zweiter Listeneintrag</li>
    <li>Dritter Listeneintrag</li>
</ol>

Unsortierte Listen enthalten einen Punkt zur Auflistung ohne festgelegte Reihenfolge.

• Ein Listeneintrag
• Ein weiterer Listeneintrag
• Noch ein Listeneintrag

<ul>
    <li>Ein Listeneintrag</li>
    <li>Ein weiterer Listeneintrag</li>
    <li>Noch ein Listeneintrag</li>
</ul>

Hervorhebung

Fett

Einzelne Textpassagen werden fett ausgezeichnet, um auf wichtige Inhalte oder Schlüsselbegriffe hinzuweisen.

Text in bold

<strong>Text in bold</strong>

Strukturierung

Horizontale Linie

Horizontale Linien dienen als visuelles Trennelement, um Inhalte klar voneinander abzugrenzen. Sie werden verwendet, um Abschnitte oder Themenblöcke zu strukturieren.

---

<hr />