HTML Anchor

Über einen HTML Anker wird eine Verlinkung in ein Dokument eingefügt. Der Anker selbst ist Teil des HTML Quellcodes der Seite und kann mit einer Reihe von Informationen über den Link angereichert werden.


Wie ist ein Link aufgebaut?

Was genau ein HTML Anker macht lässt sich am besten erklären, wenn wir uns einen beispielhaften Link, wie er im HTML Quelltext einer Seite vorkommen könnte, einmal genauer anschauen:

<a href="www.sistrix.de" target="_blank" title="Die Homepage" rel="nofollow">Der Ankertext</a>

Im Browser wird auf der Webseite nachher nur „Der Ankertext“ zu sehen sein. Dieser wird automatisch vom unterstrichen und blau eingefärbt, wie wir das von Links im Internet gewohnt sind.

Schauen wir uns nun die einzelnen Elemente des HTML Anchors näher an.

href=““

Wenn der Browser eine Seite ausserhalb des aktuellen Dokuments ansteuern soll, muss ihm mitgeteilt werden welche Seite aufgerufen werden soll. Hierfür wird dem Anker eine Hypertext Referenz hinzugefügt, die eine Adresse des zu öffnenden Dokuments enthält.

Es gibt eine wichtige Unterscheidung bei der Angabe der Adresse, da diese entweder einen absoluten oder einen relativen Pfad beinhalten kann. Ein absoluter Pfad enthält die genaue Adresse, inklusive des Protokolls, dem Host, der Domain und aller Verzeichnisse bis hin zum gewünschten Dokument. Ein Beispiel für einen absoluten Pfad wäre: https://www.sistrix.de/frag-sistrix/

Relative Pfade hingegen sind kürzer und sagen nur aus, was an die aktuelle Position (auf der Webseite) angehängt werden muss, um zur neuen Adresse zu kommen. Bei relativen Pfaden wäre ein Beispiel, dass ich mich auf https://www.sistrix.de/frag-sistrix/ befinde und auf einen Link mit href=”/onpage-optimierung/hallo.html” klicke. Der Browser steuert dann die URL https://www.sistrix.de/frag-sistrix/onpage-optimierung/hallo.html an. Ein weiteres Beispiel wäre die Situation, dass ich auf https://www.sistrix.de/frag-sistrix/ bin und auf einen Link mit href=”hallo.html” klicke. In diesem Fall, führt mich mein Browser auf die URL https://www.sistrix.de/frag-sistrix/hallo.html.

target=““

Diese Anweisung ist optional und bietet die Möglichkeit festzulegen, in welchem Fenster der Link geöffnet werden soll? Wenn kein Target definiert ist, wird die verlinkte Seite im aktuellen Browserfenster oder -Tab geöffnet. Das gleiche Verhalten würde man mit dem target=“_self“ erreichen, jedoch ist es einfacher die entsprechende Auszeichnung wegzulassen.

Das am häufigsten genutzte Target ist target=“_blank“. Hiermit wird dem Browser gesagt, dass er die Zielseite in einem neuen Fenster öffnen soll. Bei den meisten neuen Browsern wird diese Anweisung jedoch so interpretiert, dass die Seite in einem neuen Tab geöffnet werden soll.

Es gibt noch weitere Targets, jedoch finden diese auf den meisten Webseiten keine Verwendung.

title=““

Ich kann einem Link einen Title verpassen, muss dies jedoch nicht. Wird ein Titel mit angegeben, so wird dieser als Tooltip angezeigt, wenn ich mit der Maus über den Link fahre.

rel=“nofollow

Diese Auszeichnung des Links mit einem rel=“nofollow“ ist optional und sagt Google, dass diesem Link kein Vertrauen geschenkt werden soll. Diesem Link wird Google nicht folgen und es wird kein Vertrauen über diese Verlinkung weitergegeben. Wenn Du mehr über rel=“nofollow“ erfahren möchtest, schau dir bitte unsere Frag-SISTRIX Seite zu Nofollow an.

Links als interne Sprungmarken

HTML Anker können nicht nur genutzt werden um andere Dokumente oder Seiten zu verlinken, es ist auch möglich, innerhalb eines HTML Dokumentes auf einen anderen Abschnitt derselben Seite zu springen. In diesem Fall wird der HTML Anker als Sprungmarke bezeichnet.

Um eine Sprungmarke in ein Dokument einzufügen, wird an der gewünschten Stelle im HTML Quellcode ein id-Attribut zu einem beliebigen Element hinzugefügt. Ich habe beispielsweise in diesem Beitrag die id=“sprungmarke“ im <h2> Tag der Überschrift dieses Abschnittes eingefügt.

Ich hätte die Sprungmarke auch genauso gut einem <span > oder einem <div > hinzufügen können. Von nun an, kann ich mit einem <a href=“#sprungmarke“>Hier gehts zum Abschnitt „Links als interne Sprungmarke“</a> direkt zu diesem Textabschnitt springen. Dies ist sehr praktisch wenn ich zum Beispiel ein Inhaltsverzeichnis erstellen möchte.

Ich kann diese Sprungmarke auch von anderen Seiten aus direkt ansprechen, indem ich einen absoluten Link auf <a href=“https://www.sistrix.de/frag-sistrix/html-anchor/#sprungmarke“> setze.

Eine praktische Sprungmarke, die mit dem HTML5 Standard ins Repertoire aufgenommen wurde, ist href=“#top“. Damit springt der Browser automatisch an den Anfang der Seite, auch wenn keine #top ID erstellt wurde.

Fazit

Über den HTML Anker könnt ihr den Besuchern eurer Seite wie auch deren Browsern und Google die Möglichkeit geben, andere Seiten aufzusuchen. Zudem können viele Informationen im Anker selbst übergeben werden, wovon meistens jedoch nur href, target und häufiger auch rel=“nofollow“ genutzt werden.

Neben diesen Attributen gibt es noch viele weitere, die Ihr zB in der Wissensdatenbank von Mozilla auf https://developer.mozilla.org/de/docs/Web/HTML/Element/a finden könnt.

SEO-Themen von A bis Z