HTMLCSSJavaScriptIndexRoadmapImpressum

Ankerlinks

Ankerlinks (auch Sprungmarken oder Anchor Links) sind Links, die nicht auf eine andere Seite, sondern auf eine bestimmte Stelle innerhalb derselben Seite springen.

Du verwendest Ankerlinks z. B. für:

  • Inhaltsverzeichnisse
  • Zürück nach oben - Buttons
  • lange FAQ-Seiten
  • Onepage-Websites

Ein Ankerlink besteht aus:

  1. einen Link der auf ein Ziel mit einer id verweist
  2. einem Ziel mit einer id als Attribut

Link setzen:

HTML Codebeispiel

1<a href="#kontakt">Zum Kontakt springen</a>

Ziel definieren:

HTML Codebeispiel

1<h2 id="kontakt">Kontakt</h2>

Komplettes Beispiel:

HTML Codebeispiel

1<a href="#unten">Nach unten springen</a>
2
3<div style="height: 1000px;"></div>
4
5<h2 id="unten">Hier ist das Ziel</h2>

Ausgabe

Nach unten springen

Hier ist das Ziel

Im nächsten Kapitel lernst du: Bilder einfügen <img>