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

SEOkomm 2023 Zusammenfassung

SEOKomm 2023 – Recap mit allen wichtigen Kernaussagen

  • Jonas SEO Berater
  • von Jonas
  • 28.11.2023

Lasst die Affen aus dem Zoo! – Wir hatten tierisch Bock nach einem Jahr mit vielen, teilweise sich überlappenden Google Updates und dem allgegenwärtigen Thema der KIs darüber in Salzburg mit anderen SEOs in den Austausch zu gehen, Kontakte zu knüpfen und den top Speakerinnen und Speakern auf den Bühnen […]

Google Such Tipps titelbild

Die besten Google Such Tipps

  • christoph pawletko
  • von Christoph
  • 24.11.2023

7 Tricks: So sucht ihr auf Google schneller und effektiver Die Nutzung von Google als Suchmaschine hat sich als essenzieller Aspekt unseres täglichen Lebens etabliert. Allerdings erbringt sie nicht immer die erwarteten oder gewünschten Suchergebnisse. Das ist vor allem ärgerlich, wenn man sehr spezifisch sucht und nicht fündig wird. Glücklicherweise […]

Social Media Marketing Days 2023

Social Media Marketing Days 2023

  • Melissa
  • von Melissa Knappe
  • 17.11.2023

Unser Recap: Das waren die Social Media Marketing Days 2023 Wir waren bei den Social Media Marketing Days 2023 dabei und haben gute Nachrichten für alle, die diesen verpasst haben. Denn natürlich haben wir nicht nur einiges an Wissen mitgenommen, sondern dieses auch für euch festgehalten. So bekommt ihr in […]

Top Company kununu 2024

Die SEO-Küche erhält erneut das kununu Top Company-Siegel für 2024!

  • christoph pawletko
  • von Christoph
  • 08.11.2023

Wir setzen den Standard hoch – Die SEO-Küche wieder mit dem kununu Top Company-Siegel ausgezeichnet! Es ist offiziell: Auch in diesem Jahr zählen wir zu den rund fünf Prozent der beliebtesten Unternehmen auf kununu und sind stolz darauf, das Top Company-Siegel 2024 tragen zu dürfen. Dieser Erfolg ist eine echte […]

Titelbild Spoofing

Vorsicht Erpressermails: Phishing, E-Mail-Spoofing und Phishing

  • Jan
  • von Jan
  • 25.10.2023

Wie schütze ich mich vor Erpressermails? – Ein Leitfaden zum Durchatmen Erpressermails können echt nerven, oder? Aber keine Sorge, Panik ist der falsche Weg! Erfahrt hier, warum diese Mails meist nur heiße Luft sind und wie ihr euch effektiv schützt. Von Passwort-Tricks bis zu proaktiven Maßnahmen – ich rüste euch […]

Die SEO-Küche auf der deGUT 2023

  • sophie peisker
  • von Sophie
  • 20.10.2023

Unser Fazit für die deGUT 2023 Am 13. Oktober 2023 öffneten sich bereits zum 39. Mal die Tore der deGUT Messe in Berlin, und auch dieses Jahr war die ARENA Berlin erneut Veranstaltungsort für zwei spannende Tage voller Gespräche und Vorträge. Unsere Kolleg:innen Sophie, Jascha und Thomas haben die SEO-Küche […]