Die HTML-Ebene (H1, H2, H3) bestimmt die Gliederung für Google und Screenreader. Die CSS-Klasse bestimmt nur, wie groß es aussieht. Wähle die Ebene nach Bedeutung — nie nach Optik.
Zwei Dinge, die oft verwechselt werden
| HTML-Ebene | CSS-Klasse | |
|---|---|---|
| Wo einstellen | Reiter Inhalt | Reiter Erweitert |
| Beispiel | H2 | t-heading--l |
| Bestimmt | Bedeutung, Gliederung | Größe, Aussehen |
| Wer liest das | Google, Screenreader | Menschen |
Warum die Trennung nützlich ist
Auf klassischen Websites sind Größe und Ebene gekoppelt: Eine H2 ist groß, eine H4 klein. Wer eine kleine Überschrift braucht, nimmt eine H4 — auch wenn inhaltlich eine H2 richtig wäre. Die Gliederung wird nach Optik gebaut, und Google liest eine unlogische Struktur.
Im te. Design System sind beide entkoppelt. Du kannst eine H2 klein darstellen, wenn das Layout es verlangt — die Gliederung bleibt korrekt.
Die Regeln für die Ebene
- Genau eine H1 pro Seite. Sie sagt, worum es auf der Seite geht.
- H2 für die Hauptabschnitte, davon beliebig viele.
- H3 für Unterpunkte innerhalb einer H2.
- Keine Ebene überspringen. Nach einer H2 kommt H3, nicht H4.
- Überschriften sind keine Auszeichnung. Wenn ein Satz nur groß aussehen soll, ohne ein Abschnitt zu sein, nimm ein Text-Widget mit
t-text--xl.
Ein praktisches Beispiel
Ein Hero-Bereich mit einer kleinen Zeile über der Hauptüberschrift:
| Element | Ebene | Klasse |
|---|---|---|
| „Webdesign für den Mittelstand“ | — (Text-Widget) | t-label--s |
| „Ihre Website als Werkzeug“ | H1 | t-heading--xxl |
| Einleitender Absatz | — | t-text--l |
Die kleine Zeile oben ist bewusst keine Überschrift, sondern ein Label. Sie ist Gestaltung, nicht Gliederung — und würde als H2 die Struktur verfälschen.