HTML Grundlagen: Ankerlinks und Sprungmarken – Tipps und Tricks für die Optimierung deiner Website

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 Ankerlink sichtbar funktioniert, muss die Seite genügend Content Deutsch: Inhalt) haben. Das heißt, es müsste normalerweise gescrollt werden, um zu dem gewünschten Abschnitt zu kommen.

Einen Ankerlink definiert man durch:

<a href="URL#Sprungcode"> 

Mit diesem HTML-Code wird ein Sprungbefehl definiert. Dabei ist das Rautezeichen # notwendig. Es zeigt dem Browser an, dass er auf der Seite zu der Sprungmarke springen soll.

Die Angabe der URL ist nicht notwendig und kann weggelassen, werden, wenn sich das Sprungziel auf der aktuellen Seite befindet.

Für das Springen zu einer Sprungmarke müssen 2 wichtige Bedingungen erfüllt sein:

1. ein Sprunglink

2. ein Sprungziel

Was ist ein Sprunglink?

Ein Sprunglink unterscheidet sich nur wenig von dem bereits bekannten HTML Hyperlink.

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

• Der Name für die eindeutige ID ist beliebig wählbar. Er darf nur die Buchstaben a – z, A – Z und die Ziffern 0 – 9 enthalten. Das erste Zeichen muss ein Buchstabe sein.

• Zusätzlich sind der Bindestrich ('-') und der Unterstrich ('_') erlaubt.

• Leerzeichen, Umlaute und Sonderzeichen sind nicht erlaubt.

• Zwischen Groß- und Kleinschreibung wird unterschieden.

• Der Name darf nur einmal pro Webseite 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 Einschränkungen für die Bennenung des Sprungziel.

2. Gib für Linktext den Text an, der auf deiner Webseite angezeigt werden soll. Der Linktext wird auch als klickbarer Ankertext bezeichnet. Er kann ein Wort oder eine Wortgruppe sein. Leerzeichen und Sonderzeichen sind zulässig.

Verweis auf einen Anker auf einer anderen Webseite

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

<a href="URL#Ankername">Linktext</a>

1. Die URL kann eine andere Webseite deiner eigenen Website oder eine Seite auf einem anderen Server sein.

2. Zwischen URL, # 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 das Sprungziel.

4. Der Anchor-Text bzw. Linktext ist der klickbare Text eines Links. Er sollte kurz und prägnant formuliert sein. Normalerweise verwendet man als Linktext ein Wort oder mehrere Wörte, um den Inhalt des Linkziels zu beschreiben. Leerzeichen, Sonderzeichen und Umlaute sind erlaubt.

Sprungmarke setzen

Damit der Ankerlink funktioniert, muss jetzt noch die Sprungmarke gesetzt werden. Überschriften und Zwischenüberschriften gliedern den Text und informieren den Besucher darüber, wovon ein Abschnitt handelt. Der Anker zu einem Abschnitt oder Absatz wird oft auf die zugehörige Überschrift oder einen Absatz 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 benutzt hast. Achte auf die korrekte Schreibweise, denn Groß- und Kleinschreibung wird unterschieden.

Das Setzen einer Sprungmarke steigert die Usability deiner Seite und hilft dem User bei der Navigation durch deine Website. Besonders bei sehr langen Seiten wird der Nutzer über eine seiteninterne Navigation duch Ankerlinks und Sprungmarken direkt zu der Stelle geführt, die ihn interessiert.