Skip to main content

HTML-Anker als Sprungmarken setzen: So geht’s

  • Benutzerbild von Christoph


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 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.
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

kleiner Spielzeug-Einkaufswagen im Fokus, im Hintergrund arbeitet eine Person an einem Laptop

Warenkorbabbrüche reduzieren – Tipps und Tools

  • luisa
  • von Luisa Losereit
  • 19.05.2025

Beim Online-Shopping verlassen im Durchschnitt 7 von 10 Besucher Ihren Warenkorb, bevor sie den Einkauf abschließen. Ihre Webseite performt gut in den Suchergebnissen, zieht Traffic an, wird von potenziellen Kunden gefunden und Ihre Besucher verweilen gerne auf Ihrer Webseite. Doch trotz dieser vielversprechenden Signale werden die Warenkörbe gefüllt, aber die […]

Strawberry - Der KI-Browser

Strawberry – Der KI-Browser

  • Oliver Lindner / Gründer und Geschäftsführer
  • von Oliver Lindner
  • 15.05.2025

Strawberry – der KI-Browser, der Surfen und Arbeiten revolutioniert Einführung in Strawberry: Was ist das und warum spricht jeder darüber? Strawberry ist ein neuartiger KI-Browser – also ein Webbrowser mit eingebauter künstlicher Intelligenz. Diese sogenannten „Companions“ (Begleiter) unterstützen dich beim Surfen und übernehmen auf Wunsch sogar Aufgaben für dich. Das […]

Person tippt auf Laptop; vor dem Bildschirm schweben verschiedene Icons wie Dollarzeichen, Likes, Kleidung, Bücher, etc.

10 Best Practices – So gestalten Sie besser sichtbare Produktseiten

  • luisa
  • von Luisa Losereit
  • 12.05.2025

Mit einem Onlineshop mehr Sichtbarkeit zu erzielen, kann mit einigen Hürden verbunden sein. Die meisten Shopbetreiber investieren viel Zeit in die Optimierung der Startseite und vernachlässigen die Produktseiten. Obschon die Startseite wichtig für die Sichtbarkeit ist, spielen auch gut optimierte Produktseiten eine wichtige Rolle für Ihr SEO. Zudem suchen Kunden […]

Ist SEO tot

SEO – Tot oder lebendig? Ein Mythos wird entlarvt.

  • Oliver Lindner / Gründer und Geschäftsführer
  • von Oliver Lindner
  • 05.05.2025

Es gibt wohl kaum ein Thema, das so häufig totgesagt wurde wie SEO (Suchmaschinenoptimierung). Immer wieder, wenn neue Technologien auf den Markt kommen oder Google ein Update veröffentlicht, hört man die Rufe: „Ist SEO tot?“ Doch diese Frage wird meist viel zu schnell gestellt. Ganz im Gegenteil: SEO lebt – […]

verschiedene Icons wie Zahnräder, Menschen und Graphiken passend zum Begriff CRO dargestellt, mit Mann im Hintergrund, der darauf zeigt

Nutzerführung für lokale Kunden auf Ihrer Website inkl. Praxisbeispiele

  • luisa
  • von Luisa Losereit
  • 28.04.2025

Die Usability und User-Experience (UX) ist wichtig für die Conversion-Optimierung und entscheidet darüber, ob und wie lange ein Besucher auf einer Webseite verweilt und eine Konversion stattfindet. Lokale Kunden suchen in der Suchmaschine nach Problemlösungen in der unmittelbaren Umgebung und besuchen Ihre Webseite. Damit potenzielle Kunden auf Ihrer Seite verweilen […]

Mann hält Lupe in einer Hand, in der die Target Audience mit Icons von Menschen dargestellt wird, im Hintergrund sind unscharf weitere Icons abgebildet

Regionales Targeting auf Facebook und Instagram

  • luisa
  • von Luisa Losereit
  • 17.04.2025

Um Ihre Zielgruppe besser zu erreichen, stehen Ihnen bei Facebook und Instagram viele Möglichkeiten für regionales Targeting zur Verfügung. Diese Vorgehensweise des zielgruppenspezifischen Targetings ist sehr effektiv und mächtig, sofern sie richtig eingesetzt wird. Es hilft Ihnen Werbeanzeigen an einen klar definierten Personenkreis auszuspielen. Hierfür stehen Ihnen in beiden Netzwerken […]