HTML-Anker setzen: Ankerlink, Anchor-Link, Sprungmarke, Textmarke ohne Plugin

Ankerlinks sind Verweise, die auf einen HTML-Anker (Anchor) bzw eine Text-, Sprungmarke innerhalb von HTML-Dokumenten leiten. Der HTML-Anker bzw. die HTM Sprungmarke kann dabei an beliebiger Stelle im gleichen oder in einem anderen HTML-Dokument liegen. Da man mit dem Klick auf einen Ankerlink zu einer anderen Stelle im Dokument springt, nennt man diese Textanker auch Sprungmarken. Es gibt verschiedene Szenarien, in denen es erforderlich oder sinnvoll ist einen solchen Ankerlink zum Verweis auf Textanker, Anchor, Text- oder Sprungmarke zu setzen.

Einsatzszenarien für HTML-Sprungmarken / Ankerlinks

Ein gutes Beispiel ist der Einsatz eines Inhaltsverzeichnisses am Beginn eines HTML Dokuments. Hier kann man durch Ankerlinks direkt auf die einzelnen Anschnitte verlinken. Auch wenn man auf einen bestimmten Absatz innerhalb des selben oder eines andren Dokuments verweisen möchte bieten sich Sprungmarken und Ankerlinks an. Das ist besonders bei Umfangreichen HTML-Dokumenten nützlich.

Einbinden von HTML-Anker und Anker-Link

Der Textanker wird dort eingefügt, wo man bei Klick auf den Ankerlink hin springen (daher auch „Sprungmarke“) soll. Die Erzeugung eines Ankerlinks und das Setzen eines HTML-Anker (Sprung- bzw. Textmarke, Anchor) ist sehr einfach. Es gibt zwei Varianten, HTML-Anker / Sprungmarken zu setzen, die zweite ist veraltet und sollte ab HTML5 nicht mehr verwendet werden.

Setzen eines HTML-Ankers – aktuelle Variante

Existiert am Ziel ein HTML-Tag, fügen wir hier ein ID-Attribut ein. Das Muster hierfür sieht so aus: id=“sprungmarkenname“

Beispiel:

[html] <h3 id="sprungzurbeispielueberschrift">Beispiel-Überschrift</h3>

[/html]

Ankerlink, der auf die Überschrift mit diesen HTML-Anker verweist

Mit folgendem Code erstellen wir einen Link zur von uns gesetzten Sprungmarke.

[html]<a href="#sprungzurbeispielueberschrift">Zur Beispiel-Überschrift</a>[/html]

Existiert am Ziel im HTML-Code kein HTML-Tag (z.B. im WordPress Editor), verwenden wir den span-Tag und setzen folgenden Code an der gewünschten Position im Dokument ein.

[html]<span id="sprungmarkenname"></span>[/html]

Ankerlink, der auf die Position mit diesen HTML-Anker verweist

Mit folgendem Code erstellen wir einen Link zur von uns gesetzten Sprungmarke.

[html]<a href="#sprungmarkenname">Zur Sprungmarke</a>[/html]

Setzen eines HTML-Ankers – veraltete Variante

Teilweise wird immer noch die Variante unter Verwendung von a name=““ empfohlen, die aber veraltet ist und ab HTML5 nicht mehr verwendet werden sollte. Der Vollständigkeit halber führen wir sie hier mit auf.

[html] <h3><a name="sprungmarkenname">Überschrift</a></h3>

[/html]

Beispiel und Test von Ankerlink und Sprungmarke

Ankerlink:

[html]<a href="#testsprung">Testsprung</a>[/html]

Sprungmarke an beliebiger Position:

[html]<span id="testsprung"></span>[/html]

Zum Testen hier klicken:
Testsprung

Sprungmarken zum Seitenanfang

Mit folgenden den Sprungmarken href=“#“ und href=“#top“ lässt sich ein Springen auf den Seitenanfang erreichen:

[html]<a href="#">Nach oben</a>[/html]

Beispiel: Nach oben

[html]<a href="#top">Top</a>[/html]

Beispiel: Top

Durch Neuladen zum Seitenanfang

Mit href=““ gelangt man durch durch Neuladen der Seite zum Seitenanfang.

[html]<a href="">Neuladen</a>[/html]

Beispiel: Neuladen

WordPress Plugin für Ankerlink, Textanker

Regelmäßig taucht auch die Frage nach einem WordPress Plugin für Textanker (Ankerlink) auf. Content Management Systeme wie WordPress existieren zahlreiche Plugins, mit deren Hilfe sich zusätzliche Funktionen einfügen lassen. Allerdings kann eine übermäßige Verwendung von Plugins, einerseits das System aufblähen, unübersichtlich und träge machen, andererseits aber auch Angriffsfläche für Angriffe bieten. Das alles insbesondere dann, wenn Plugins unsauber programmiert sind oder von den Erstellern nicht regelmäßig aktualisiert werden.

Es gibt auch diverse Textanker-, Anchor-, Ankerlink-Plugins für WordPress und andere CMS. Allerdings halten wir den Einsatz eines Plugins für eine Funktion, die sich so leicht ohne Plugin implementieren lässt für absolut überflüssig. Da es sich ohnehin empfiehlt, die Zahl der verwendeten Plugins in WordPress und anderen Content Management Systemen möglichst klein zu halten bzw. auf das wirklich notwendige zu beschränken, bieten einfach manuell umzusetzenden Lösungen, wie das Einfügen von Textanker, diesbezüglich Einsparpotential.

Ziel Sprungmarke zum testen des Ankerlinks vom Ankerlink Testsprung oben