1. Überschriften (Headings)

Es gibt genau sechs Ebenen. Sie sollten hierarchisch verwendet werden (keine Ebene überspringen).

H1: Die Hauptüberschrift

H2: Wichtige Abschnitte

H3: Unterabschnitte

H4: Weitere Unterteilungen

H5: Noch tiefere Unterteilungen

H6: Die tiefste Unterteilung

2. Text-Elemente

Diese werden für den eigentlichen Inhalt und dessen Formatierung genutzt.

Dies ist ein normaler Textabsatz (Paragraph) mit etwas kursiver Betonung.

Ein blaues Wort inmitten eines Satzes durch ein span-Element.

Hier ist ein Hyperlink zu se-di.de.

Ein Text mit einem
Zeilenumbruch mittendrin.

3. Struktur-Elemente (Layout)

Diese "Container" helfen dabei, die Seite in logische Bereiche zu gliedern.

Header, Footer, Main und Nav werden auf dieser Seite bereits aktiv als grobe Struktur genutzt.

4. Listen

Ungeordnete Liste (ul)

• Erstes Element
• Zweites Element
• Drittes Element

Geordnete Liste (ol)

1. Erster Schritt
2. Zweiter Schritt
3. Dritter Schritt

5. Formulare und Interaktion

Damit Nutzer Daten eingeben können.

6. Medien

Beispiele für das Einbetten von Medien.

Bild (img) mit Animation

7. Schwer lesbare Schriftarten (Barrierefreiheit-Check)

Ein Beispiel dafür, wie wichtig die richtige Schriftwahl für die Barrierefreiheit ist. Hier ist 10-mal derselbe Text in schwer lesbaren Schriftarten:

Dies ist ein Beispieltext, der die Lesbarkeit demonstrieren soll.

Dies ist ein Beispieltext, der die Lesbarkeit demonstrieren soll.

Dies ist ein Beispieltext, der die Lesbarkeit demonstrieren soll.

Dies ist ein Beispieltext, der die Lesbarkeit demonstrieren soll.

Dies ist ein Beispieltext, der die Lesbarkeit demonstrieren soll.

Dies ist ein Beispieltext, der die Lesbarkeit demonstrieren soll.

Dies ist ein Beispieltext, der die Lesbarkeit demonstrieren soll.

Dies ist ein Beispieltext, der die Lesbarkeit demonstrieren soll.

Dies ist ein Beispieltext, der die Lesbarkeit demonstrieren soll.

Dies ist ein Beispieltext, der die Lesbarkeit demonstrieren soll.