Mit HTML-Ankern (auch Sprungmarken genannt) ermöglichst du es deinen Besucherinnen und Besuchern, gezielt zu einem bestimmten Abschnitt einer Webseite zu springen – zum Beispiel direkt zum Seitenanfang, zu einem Kapitel oder zu einem Bild. Das verbessert sowohl die Usability als auch die interne Verlinkung, was sich positiv auf SEO auswirken kann.
Diese Anleitung richtet sich sowohl an Webmaster, die mit reinem HTML arbeiten, als auch an WordPress-Nutzerinnen und -Nutzer.
Was ist ein Anker (Sprungmarke)?
Ein Anker ist eine definierte Position innerhalb einer Webseite, die über einen speziellen Link direkt angesteuert werden kann. Der Browser springt beim Klick automatisch zu dieser Stelle – ohne manuelles Scrollen.
Typische Einsatzfälle:
- „Zum Seitenanfang“-Links
- Inhaltsverzeichnisse mit Direktlinks zu Kapiteln
- Lange Texte oder FAQ-Seiten
- Bildergalerien mit Vor- und Zurück-Navigation
Regeln für gültige Ankernamen (Best Practices)
Damit Anker zuverlässig funktionieren und HTML-konform bleiben, beachte bitte folgende Punkte:
- Keine Umlaute (ä, ö, ü), kein ß
- Keine Leerzeichen
- Keine Sonderzeichen
- Groß- und Kleinschreibung ist relevant
- Erlaubte Zeichen:
- a–z
- 0–9
_(Unterstrich)-(Minus).(Punkt)
- Das erste Zeichen sollte ein Buchstabe sein
Empfehlung:
Verwende sprechende, kurze IDs wie seitenanfang, kapitel3 oder bild_galerie.
Moderne Methode: Anker mit id statt name
Das klassische <a name="..."> ist veraltet. In modernem HTML (und XHTML) werden Anker ausschließlich über das id-Attribut definiert.
Beispiel (empfohlen):
<h2 id="ankername">Überschrift</h2>
A) Link zum Seitenanfang setzen
Variante 1: Reines HTML (Quelltext)
1. Anker am Seitenanfang setzen (im <body>):
<h1 id="anfang">Überschrift</h1>
2. Link am Ende eines Abschnitts setzen:
<a href="#anfang">Zum Seitenanfang</a>
Variante 2: Mit visuellen Webeditoren / WordPress
- Überschrift oder Element markieren
- In WordPress im Block „Erweitert“ eine HTML-Anker-ID vergeben (z. B.
anfang) - Weiter unten einen normalen Link setzen mit:
#anfang
B) Von oben zu einem Abschnitt nach unten springen
HTML-Variante
1. Link am Anfang der Seite:
<a href="#kapitel3">Kapitel 3</a>
2. Zielanker weiter unten setzen:
<h2 id="kapitel3">Kapitel 3</h2>
WordPress-Variante
- Ziel-Überschrift anklicken
- Im Block-Editor unter „Erweitert“ eine Anker-ID vergeben
- Oben im Text einen Link mit
#kapitel3setzen
C) Zu einem Anker auf einer anderen Seite verlinken
Beispiel
Seite 2 – Zielanker setzen:
<img id="bild2" src="bild2.jpg" width="500" height="375" alt="Bild 2">
Seite 1 – Direktlink zum Bild auf Seite 2:
<a href="seite2.html#bild2">Bild 2 auf Seite 2 direkt ansehen</a>
D) Bilderseiten miteinander verknüpfen (Galerie-Navigation)
Beispiel: Bild 35
<img id="bild" src="bild35.jpg" width="500" height="375" alt="Bild 35">
Navigation:
<a href="seite34.html#bild">vorheriges Bild</a>
<a href="seite36.html#bild">nächstes Bild</a>
Alternative: Zum Seitenanfang per JavaScript
<a href="javascript:scrollTo(0,0)">Top</a>
Wichtig:
Diese Methode funktioniert nur, wenn JavaScript im Browser aktiviert ist. Für Barrierefreiheit und SEO sind HTML-Anker die bessere Lösung.
Unterschiede zwischen HTML und XHTML bei Ankern
- XHTML erlaubt nur
id, nichtname - IDs müssen eindeutig und valide sein
Fazit
HTML-Anker sind ein einfaches, aber sehr wirkungsvolles Mittel, um lange Webseiten übersichtlich, benutzerfreundlich und suchmaschinenfreundlich zu gestalten. Egal ob du mit reinem HTML oder mit WordPress arbeitest: Mit korrekt gesetzten id-Attributen und klaren Linkstrukturen verbesserst du Navigation, Nutzererlebnis und interne Verlinkung nachhaltig.