HTML Grundlagen: Erfahre, wie du Anker-Links richtig einsetzt – Tipps für eine optimale Verlinkung

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 Anchor-Link (Deutsch: Ankerlink) sichtbar funktioniert, muss die Seite genügend Content (Inhalt) haben. Das heißt, es müsste 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 kann man weglassen, 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 Buchstaben (a bis z und A bis Z) und die Ziffern 0 bis 9 enthalten. Das erste Zeichen muss ein Buchstabe sein.

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

• Leerzeichen, Umlaute und Sonderzeichen sind nicht zulässig.

• 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. Für Ankername muss man den Namen angeben, der für den Anker verwendet werden soll. Beachte die oben genannten Einschränkungen für die Benennung des Sprungziels.

2. Für Linktext wird der Text angegeben, der auf der Webseite als klickbarer Link (Ankertext) angezeigt werden soll. 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 Seite deiner Website oder eine Webpage einer anderen Domain sein.

2. Zwischen URL, # und Ankername darf kein Leerzeichen stehen.

3. Für Ankername wird der Name angegeben, der als Anker verwendet werden soll. Beachte die oben genannten Einschränkungen für das Sprungziel.

4. Der Linktext (Anchor Text) ist der klickbare Text des Links. Er sollte kurz und prägnant formuliert sein. Normalerweise verwendet man als Linktext ein oder mehrere Wörter, die den Inhalt des Linkziels beschreiben. Leerzeichen, Sonderzeichen und Umlaute sind zulässig.

Sprungmarke setzen

Damit der Ankerlink funktioniert, muss nur noch die Sprungmarke gesetzt werden.

Überschriften und Zwischenüberschriften strukturieren den Text. Sie informieren den Leser über den Inhalt eines Textabschnitts. Der Anker zu einem Abschnitt wird oft auf die entsprechende Ü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.