Skip to main content

HTML-Anker als Sprungmarken setzen: So geht’s

  • christoph pawletko


PDF herunterladen

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.

HTML-Anker Sprungmarke
Für Inhaltsverzeichnisse sind HTML-Anker optimal.

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.

HTML-Anker Beitragsbild
Per HTML lassen sich interne und externe Sprungmarken setzen.

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

Kommentare

Hallo Christoph,

ich, Mitte 70, lerne viel aus Ihrer SEO-Küche, aber im Fall der "HTML-Anker als Sprungmarken"-Seite bin ich in einem ganz speziellen Fall auch hier leider nicht weitergekommen (https://www.seo-kueche.de/blog/html-anker-als-sprungmarken-setzen/).

Auf der Website mit den wöchentlichen Edeka-Angeboten https://www.edeka.de/eh/minden-hannover/edeka-meissner-nollendorfplatz-8-9/angebote.jsp möchte ich mein entsprechendes Lesezeichen in Firefox dahingehend ergänzen, dass der Browser direkt zu den neuen Angeboten bei "Tiernahrung" springt. Also Edeka-Seiten-URL pus direkt im Anschluss der Anker zu Tiernahrung, so dass man nicht noch endlos durch alle anderen Angebote scrollen muss.

Ziemlich weit oben auf der Edeka-Seite finden sich unter der Überschrift "Kategorien" Links zu den einzelnen Artikelgruppen weiter unten, die auch funktionieren. Allerdings kann man diese Links bzw. Sprungmarken nicht auslesen, wenn man sie anklickt oder den Mauszeiger darüber hält.

Auch die ausführliche Beschäftigung mit dem Quelltext und die noch ausführlichere mit der Untersuchen-Funktion von Firefox haben mich nicht zum Erfolg geführt. Alle von mir ausprobierten Möglichkeiten führten zu nichts. Und die Firefox-Erweiterung "Display #Anchors" gab auch nichts her.

Am nächsten gekommen bin ich dem Sprungziel möglicherweise mit dem Anker #<h2 id="Tiernahrung">12</h2> , den ich an die URL angehängt habe, aber passiert ist genauso wenig wie beim Anker #Tiernahrung und allem, was dazwischen ist. Man landet weiterhin am Kopf der Seite.
https://www.edeka.de/eh/minden-hannover/edeka-meissner-nollendorfplatz-8-9/angebote.jsp#<h2 id="Tiernahrung">12</h2>

Eigentlich ist das Sprungmarkenprinzip (selbst für mich als Laien) ja gar nicht so kompliziert, aber hier komme ich nicht weiter. Ohne Ihre Zeit allzu sehr in Anspruch nehmen zu wollen, aber haben Sie eine Ahnung, wie ich in diesem Fall den Anker hätte entdecken können?

Danke und Gruß
Hans Konrad


Hast du eine Frage oder Meinung zum Artikel? Schreib uns gerne etwas in die Kommentare.

Ihre E-Mail Adresse wird nicht veröffentlicht

Jetzt den SEO-Küche-Newsletter abonnieren

Ähnliche Beiträge

Newsletter Ideen Titelbild

7 Newsletter Ideen: Wie ihr euren E-Mail-Marketing-Erfolg maximiert

  • Nina
  • von Nina Dollhopf
  • 24.05.2024

Tipps für euren Newsletter: So wird euer E-Mail-Marketing effektiver Ein gut durchdachter Newsletter kann nicht nur die Bindung zu bestehenden Kunden stärken, sondern auch neue Kunden gewinnen und den Vertrieb ankurbeln. Hier stellen wir euch innovative Newsletter-Ideen vor, die eure E-Mail-Strategie aufs nächste Level stellen und eure Professionalität unter Beweis […]

So erstellen Sie relevante Inhalte für die gesamte Customer Journey

Relevante Inhalte entlang der gesamten Customer Journey erstellen

  • oliver lindner
  • von Oliver Lindner
  • 17.05.2024

Ein nahtloses Kundenerlebnis von der ersten Interaktion mit einem potenziellen Kunden bis hin zu allen weiteren Kontaktpunkten zu schaffen, ist das Ziel jedes Unternehmens. Dieses Ideal zu erreichen, erfordert zunächst ein tiefes Verständnis für die Reise, die Kunden durchlaufen, und die Fähigkeit, gezielt und wirkungsvoll mit ihnen zu kommunizieren. Die […]

Sieger SEO-Contest Titelbild 2024

marmato gewinnt SEO-Contest 2024 von Agenturtipp.de

  • christoph pawletko
  • von Christoph
  • 15.05.2024

Der SEO-Contest 2024 von Agenturtipp hat einen Sieger: Die marmato GmbH Nachdem es an den Stichtagen noch teilweise starke Ranking-Veränderungen gab, konnte sich das marmato Team letztlich durchsetzen und den Sieg beim Contest mit nach Hause nehmen. Glückwunsch von uns und natürlich auch an die Zweit- und Drittplatzierten und alle […]

KI-Tools für die Recherche: So vereinfachen Sie wissenschaftliches Arbeiten

  • oliver lindner
  • von Oliver Lindner
  • 07.05.2024

Künstliche Intelliz (KI) verändert die Art und Weise, wie wir recherchieren und wissenschaftlich arbeiten. Immer mehr KI-basierte Tools unterstützen Forschende und Studierende bei der Literatursuche, Datenanalyse und Schreibprozess. Wir stellen die besten KI-Tools für die Recherche vor und zeigen, wie sie das wissenschaftliche Arbeiten erleichtern. Literaturrecherche mit KI-Unterstützung Ein zentraler […]

Titelbild SEO Contest 2024

SEO-Contest 2024: Die erste Halbzeit ist vorbei!

  • christoph pawletko
  • von Christoph
  • 29.04.2024

SEO-Contest RankensteinSEO: So ist der Zwischenstand zur Halbzeit Auch dieses Jahr veranstaltet Agenturtipp.de wieder den beliebten SEO-Contest, diesmal mit dem Keyword “RankensteinSEO”. Als Sponsor blicken wir diesmal als neutraler Beobachter auf die ersten Zwischenstände und sind gespannt, wer am Ende die Nase vorn hat. Die wichtigsten Infos zum SEO-Contest auf […]

SEA Camp Jena 2024 Titelbild

Unser Fazit zum SEA-Camp 2024 in Jena

  • rudolf
  • von Rudolf Kaiser
  • 29.04.2024

Unser Fazit vom SEA-Camp 2024 in Jena: Neueste Insights und Entwicklungen im Suchmaschinenmarketing Das SEA-Camp 2024 in Jena war ein bedeutendes Ereignis für Marketing-Professionals aus ganz Deutschland. In intensiven Diskussionen und Workshops wurden die neuesten Trends und Herausforderungen im Performance-Marketing analysiert und erörtert. Neuerungen im Suchmaschinenmarketing: KI, Automatisierung und Datenschutz […]