HTML Grundlagen: Links auf Sprungziele mit <a href="#Sprungmarke">Linktext</a>

Ankerlinks erstellen und Sprungziele definieren

Oft ist es auf einer Seite mit viel Inhalt notwendig oder sinnvoll, mit einem Link direkt zu einem Sprungziel innerhalb der Seite zu springen. Damit ein Anker-Link sichtbar funktioniert, muss auf der Seite genügend Inhalt vorhanden sein. Das heißt, es müsste normalerweise gescrollt werden, um den gewünschten Abschnitt zu sehen.

Das HTML Tag <a href="URL#Sprungmarke"> wird als »Sprungbefehl« benutzt. Dabei ist das Rautezeichen # wichtig. Es zeigt dem Web-Browser an, dass er auf der Seite zu der Sprungmarke springen soll. Die Angabe der URL kann weggelassen werden, wenn sich das Sprungziel auf der aktuellen Seite befindet.

Für das Springen zu einer Sprungmarke müssen zwei Bedingungen erfüllt sein.

  1. ein Sprung-Link

  2. ein Sprung-Ziel

Ein Sprung-Link unterscheidet sich nur wenig vom bereits bekannten HTML Hyperlink.

Bei der Benennung des Sprungziels kann ein beliebiger Name vergeben werden.

Verweis auf einen Anker auf der gleichen Seite

Ein Verweis auf einen Anker im gleichen HTML-Dokument wird durch folgenden Code erzeugt:

<a href="#AnkerName">LinkText</a>
  1. Gib für AnkerName den Namen an, den Du für den Anker verwenden möchtest. Beachte die oben genannten Einschränkungen für die Benennung eines Sprungziels.

  2. Gib für LinkText den Text an, der auf deiner Webseite angezeigt werden soll. Hier sind auch Leerzeichen, Sonderzeichen und Umlaute erlaubt.

Verweis auf einen Anker auf einer anderen Seite

Ein Verweis auf einen Anker in einem anderen HTML-Dokument wird mit folgendem Code erzeugt:

<a href="URL#AnkerName">LinkText</a>
  1. URL kann eine andere Datei deiner Website sein oder eine Datei, die auf einem anderen Server liegt. Ankerlink

  2. Zwischen URL und und #AnkerName darf kein Leerzeichen stehen.

  3. Gib für AnkerName den Namen an, den Du für den Anker verwenden möchtest. Beachte die oben genannten Einschränkungen für die Benennung des Sprungziels.

  4. Gib für LinkText den Text an, der auf deiner Webseite angezeigt werden soll. Hier sind auch Leerzeichen, Sonderzeichen und Umlaute erlaubt.

Sprungmarke setzen

Damit der Anker-Link funktioniert, muss jetzt noch die Sprungmarke gesetzt werden. Überschriften und Zwischenüberschriften gliedern einen Text und informieren darüber, wovon ein Textabschnitt handelt. Der Anker zu einem Textabschnitt oder Absatz wird häufig auf die zugehörige Überschrift gesetzt.

<h2 id="AnkerName">Das ist die Überschrift für den Abschnitt</h2>
  1. <h2> … </h2> bezeichnet eine Überschrift 2. Ordnung (Englisch Heading).

  2. Das Sprungziel muss nicht unbedingt eine Überschrift sein. Das Attribut id="AnkerName" kann für jedes beliebige HTML-Element benutzt werden. Sinnvoll sind insbesondere die Überschriften H1 bis H6 und P für Absätze.

  3. Für AnkerName musst Du den Namen angeben, den Du im Anker-Link für den Anker gewählt hast. Achte auf die korrekte Schreibweise, denn Groß- und Kleinschreibung wird unterschieden.

In früheren Versionen von HTML wurde ein Anker mit <a name="AnkerName">Linktext</a> gesetzt. Dies ist in HTML5 nicht mehr zulässig und sollte nicht mehr benutzt werden.