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

Keine Kommentare vorhanden


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

Tripple Featured Snippets Titelbild

Tripple-Featured Snippets

  • christoph pawletko
  • von Christoph
  • 08.06.2023

Google testet wieder mit Dreifach-Featured Snippets Google verändert immer wieder die Darstellung der Suchergebnisse (SERPs) und testet aktuell eine neue Variante der bekannten Featured Snippets. So werden zu bestimmten Suchanfragen Tripple-Featured Snippets nebeneinander angezeigt. Ein Featured Snippet ist eigentlich die Position Null der Suchergebnisse, denn es wird oft über dem […]

WebP-Bilder Vo- und Nachteile

WebP-Bilder: Das Google Bildformat

  • christoph pawletko
  • von Christoph
  • 02.06.2023

WebP-Bilder, JPEG oder PNG Bilder für Websites? Ein gewöhnlicher Website-Nutzer gibt einer Website oft nur drei Sekunden Ladezeit, bevor er entscheidet, sie zu verlassen. Insbesondere Websites und Online-Shops, die viele hochauflösende Bilder enthalten, können mit diesem Problem konfrontiert werden. Auch für das Google Ranking ist die Ladegeschwindigkeit einer Seite ein […]

Google Bewertungen Titelbild

So reagiert ihr auf eine schlechte Google Bewertung

  • christoph pawletko
  • von Christoph
  • 26.05.2023

Wie mit negativen Google Rezensionen umgehen? Jeder, der ein Google-Konto besitzt, hat die Möglichkeit, Rezensionen für verschiedene Orte und Geschäfte zu verfassen. Positive Kundenfeedbacks können sehr vorteilhaft für Unternehmen sein, da sie anderen Nutzer:innen ein positives Bild vermitteln. Doch negative Google-Bewertungen können umgekehrt auch erheblichen Schaden verursachen. Wir leiten euch […]

Redaktionsplan erstellen Titelbild

Redaktionsplan erstellen: Darum ist es so wichtig für euren Blog

  • christoph pawletko
  • von Christoph
  • 12.05.2023

Unsere Tipps: Redaktionsplan erstellen Seid ehrlich – wie gut läuft euer Content-Marketing? Hat euer Blog eine feste Fangemeinde und generiert er stetig neue Leser? Falls das nicht der Fall ist, könnte es daran liegen, dass ihr einfach zu wenig postet. Eure Leserinnen und Leser erwarten regelmäßig fesselnde und vor allem […]

Page Experience als Ranking Faktor

Page Experience als Ranking Faktor oder nicht?

  • christoph pawletko
  • von Christoph
  • 05.05.2023

Was wird aus der Page Experience? In der Dokumentation zu Helpful Content wurde von Google kürzlich ein Abschnitt über die Page Experience hinzugefügt. Dafür wird der Page Experience Report in der Google Search Console verändert, die Berichte über Mobilfreundlichkeit und das dafür genutzte Mobile Friendly Testing Tool entfallen am dem […]

DKIM Dumps

DKIM-Dumps

  • Jan
  • von Jan
  • 27.04.2023

DKIM-Dumps – Einfach erklärt! DKIM-Dumps – ein spannendes und aktuelles Thema im Bereich der E-Mail-Sicherheit. In einer Zeit, in der Cyberkriminalität immer mehr zunimmt und die Bedrohung durch Phishing-Angriffe allgegenwärtig ist, ist es entscheidend für Unternehmen, ihre E-Mails zu schützen. Eine Möglichkeit dazu bieten DKIM-Dumps – aber was genau verbirgt […]