HTML-Anker als Sprungmarken setzen: So geht’s

Wie setzt man mit HTML einen Anker?

Das Setzen von HTML-Ankern als Sprungmarken kann dazu beitragen, Webseiten übersichtlicher zu gestalten, insbesondere bei sehr langen Seiten. Der Besucher kann über einen seiteninternen Verweis mittels Sprungmarke direkt zu der Stelle auf der Seite springen, die für ihn von Interesse ist. Jedes Element innerhalb eines HTML-Dokuments kann mit dem Anchor-Tag zu einer Sprungmarke werden, was auch für Inhaltsverzeichnisse von Blog-Seiten mit Verweisen auf weitere Artikel oder Links zu anderen HTML-Seiten geeignet ist. Auch für E-Commerce Seiten, können Sprungmarken per HTML-Anker in den Textinhalten der Kategorien (Kategorietexte) Website-Besucher:innen zu den relevanten Inhalten oder per Filter sortierten Produktgruppen führen.

Durch die Verwendung von Sprungmarken mit HTML-Ankern wird die Struktur der Website verbessert und die Navigation für den Nutzer erleichtert, was zu einer insgesamt besseren User Experience beiträgt.

So werden HTML-Anker gesetzt

Ein HTML-Anker wird genutzt, um interne oder externe Verweise durch Sprungmarken und Hyperlinks zu definieren. Das Sprungziel kann von jeder beliebigen Stelle des Dokuments erreicht werden und wird über href (Hypertext-Referenz) und a (Anker) definiert. Eine Sprungmarke wird durch das Hashtag „#“ gekennzeichnet und der Punkt, zu dem gesprungen werden soll, wird mit dem id-Attribut definiert. Die id muss einen eindeutigen Namen haben und darf nur lateinische Buchstaben, arabische Ziffern, Punkt, Bindestrich und Unterstrich als Werte enthalten. Sprungmarken sind besonders hilfreich für lange Webseiten oder Inhaltsverzeichnisse von Blog-Seiten, um dem Nutzer Zeit zu sparen und die Seite übersichtlicher zu gestalten.

Sprunganweisung zum mit id gekennzeichneten Ziel:

<a href="#ueberschrift4">Gehe zu Überschrift 4</a>

Dieser HTML-Befehl sagt dem Browser wohin er bei einem Klick springen soll.

HTML-Anker für einen Zielpunkt setzen

<h2 id="ueberschrift4">Überschrift 4</h2>

Kennzeichnet das Sprungziel.

Seiteninterner Verweis

In unserem ersten Beispiel werden Besucher:innen mit einer Sprungmarke vom Inhaltsverzeichnis am Anfang der Seite zur gewünschten H2 Überschrift weiter unten geleitet.

Zielanweisung:

<ul>
<li><a href="#anker1>HTML-Anker seiteninterne Weiterleitung</a></li>
</ul>

Sprungmarke:

<h2 id="anker1">HTML-Anker seiteninterne Weiterleitung </h2>

Mit dieser Vorgehensweise können verschiedene Stellen im HTML-Dokument mittels Sprungmarke direkt angesteuert werden. Es ist dabei extrem wichtig, dass die verwendeten IDs eindeutige Namen haben. Auch ein Verweis zu einer Stelle im normalen Textfluss kann einfach umgesetzt werden, indem der Anker im entsprechenden Text platziert wird.

Zum Beispiel kann ein Verweis auf neue Bilder auf einer Webseite mit dem HTML-Code <a href=“#anker-bild“> Neue Bilder </a> umgesetzt werden. Dabei führt der Verweis zu den Bildern, die mit der id „anker-bild“ definiert wurden.

HTML-Anker auf eine Datei oder eine andere Seite

Um auf eine andere Seite oder Datei zu verlinken und dort einen HTML-Anker zu setzen, wird die URL der Zielseite zusammen mit dem dort definierten Anker verwendet. Bei seiteninternen Dateien kann dies mit relativen Links erfolgen, bei denen die Dienstart und Domain entfallen und somit Speicherplatz gespart wird. Dabei wird der Name des Unterverzeichnisses und der Datei angegeben, gefolgt von dem Anker.

Die Sprungmarke auf eine seiteninterne Datei (Unterverzeichnis) erfolgt per relativen Links. Die Kennzeichnung http:// sowie die Domain www.seo-kueche mit Länderkürzel .de entfällt hier und sorgt für kürzeren Code.

< a href="unterverzeichnis/dateix.htm" "#anker3">Unterverzeichnis Dateix</a>

Wenn man auf eine externe Website verlinken möchte, wird ein absoluter Link verwendet, bei dem die vollständige URL der Zielseite angegeben wird, gefolgt von dem Anker. Wenn kein Anker angegeben ist, springt der Browser zum Seitenanfang der jeweiligen Unterseite oder URL.

< a href="http://www.seite-y.de/ziel" "#anker4">Link-Ziel</a>

Wird die Sprungmarke #anker3 weggelassen, springt der Browser immer direkt zum Seitenanfang.

Wegen position:fixed sieht man das Ziel des HTML-Ankers nicht

Wenn einem Header mit Navigation auf einer Website der Wert position:fixed zugewiesen wird, kann es zu einem Problem mit der Sichtbarkeit des Ankers kommen. Der Header bleibt beim Scrollen fest an seiner Position, während der Browser den Anker an den Seitenanfang setzt. Das Sprungziel wird dadurch vom Header überdeckt und Besucher:innen sehen den Inhalt nicht. Das kann Besucher:innen schnell verwirren.

Allerdings gibt es eine elegante Lösung für dieses Problem mittels CSS. Dem Anker wird ein Class-Selektor zugewiesen, mit dem die Sprungmarke um die Höhe des Headers nach unten verschoben wird. Dadurch wird sichergestellt, dass das Sprungziel sichtbar ist und nicht vom Header verdeckt wird.

So erhält der HTML-Anker einen Class-Selektor

<h3 id="anker5" class="position">Hier ist die h3 direkt unter dem Header</h3>




.position::before {

display: block;

content: "";

height:120px;

margin-top: -120px;

visibility: hidden;

}

Die HTML-Sprungmarke zum Seitenanfang

“Zurück zum Seitenanfang”: Die am meisten verbreitete Art einen HTML-Anker zu nutzen ist der einfache Sprung zurück zum Seitenanfang. Fast jede Webseite benutzt einen solchen HTML-Anker damit Besucher:innen ohne langes Scrollen direkt zum Beginn der Seite gelangen. Besonders auf sehr langen Unterseiten ist das für die User-Experience sehr wertvoll.

Um dies umzusetzen, gibt es drei Möglichkeiten:

<a href="">Zum Seitenanfang</a>

enthält keinen expliziten Verweis auf eine Sprungmarke, der Browser springt daher einfach zum Seitenanfang.

<a href="#">Zum Seitenanfang</a>

enthält auch keinen richtigen Verweis auf eine Sprungmarke, der Browser springt daher auch hier direkt zum Seitenanfang.

<a href="#top">Zum Seitenanfang</a>

verweist auf eine nicht vorhandene Sprungmarke, der Browser springt zum Seitenanfang.

Durch die Zuweisung von Pseudoklassen lassen sich mit CSS außerdem verschiedene Arten von Scroll-Buttons generieren.

Titelbild © Inna / stock.adobe.com

Beitragsbild © momius / stock.adobe.com

Beitragsbild © mirsad / stock.adobe.com