HTML: Anchors & Sprungmarken (Ankerlinks)
Eine Sprungmarke besteht aus zwei Teilen:
(1) Link mit href="#ziel-id" und
(2) Ziel mit id="ziel-id".
Beim Klick springt der Browser zum Element mit dieser id.
| Baustein | Beispiel | Wichtig |
|---|---|---|
| Link (Anker) | Kontakt |
#kontakt muss exakt zur Ziel-id passen |
| Ziel (Sprungmarke) | |
id ist eindeutig (pro Seite nur einmal) |
| Link auf andere Seite | /seite/#kontakt |
Funktioniert nur, wenn die Ziel-id auf der Seite existiert |
Regeln für gute IDs
- Eindeutig: jede
idnur einmal pro Seite. - Einfach: keine Leerzeichen, lieber
kebab-case(z. B.preise-und-zeiten). - Stabil: IDs nicht ständig ändern (sonst brechen Links).
Häufige Stolperfallen
- Nichts passiert: Ziel-
idfehlt oder ist anders geschrieben. - Fixer Header verdeckt das Ziel: nutze
scroll-margin-topam Ziel. - UX: Optional
scroll-behavior: smooth;für weiches Scrollen.
Praktische Extras
:targetkann das angesprungene Element kurz hervorheben.- „Zum Inhalt springen“-Link (Skip-Link) verbessert Barrierefreiheit.
Editor wird geladen…