Ü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 vorkommt, 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 blau eingefärbt, wie wir das von Links gewohnt sind.
Schauen wir uns nun die einzelnen Attribute des Anchor-Elements <a …> 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: sie kann entweder einen absoluten oder einen relativen Pfad beinhalten.
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 ein Nutzer, der sich auf https://www.sistrix.de/frag-sistrix/ befindet und auf einen Link mit href=”/onpage-optimierung/hallo.html” klickt. Der Browser steuert dann automatisch die URL https://www.sistrix.de/frag-sistrix/onpage-optimierung/hallo.html an.
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 so interpretiert, dass die Seite in einem neuen Tab geöffnet werden soll.
Bei der Nutzung von target=“_blank“ wird aus Sicherheitsgründen angeraten auch ein rel=“noopener“ einzusetzen. Viele Content-Management-Systeme wie WordPress fügen dieses Attribut automatisch hinzu.
Es gibt noch weitere Targets, jedoch finden diese auf den meisten Webseiten keine Verwendung.
title=““
Man kann einem Link einen Title verpassen. Wird ein optionaler Titel angegeben, so wird dieser als Tooltip angezeigt, wenn man mit der Maus über den Link fährt.
rel=“nofollow„
Diese Auszeichnung des Links mit einem rel=“nofollow“ ist optional und sagt Google, dass über diesen Link kein Vertrauen weitergegeben werden darf und der Googlebot dem Link nicht folgen soll.
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 Quellcode ein id-Attribut zu einem beliebigen Element hinzugefügt. Wir haben beispielsweise in diesem Beitrag die id=“sprungmarke“ im <h2>-Tag der Überschrift dieses Abschnittes eingefügt.
Wir hätten die Sprungmarke auch in einem <span > oder einem <div > hinzufügen können. Von nun an, kann man mit einem <a href=“#sprungmarke“>Hier gehts zum Abschnitt „Links als interne Sprungmarke“</a> direkt zu diesem Textabschnitt springen. Dies ist sehr praktisch wenn man ein Inhaltsverzeichnis erstellen möchte.
Man kann diese Sprungmarke auch von anderen Seiten aus direkt ansprechen, indem ein absoluter Link auf <a href=“https://www.sistrix.de/frag-sistrix/html-anchor/#sprungmarke“> gesetzt wird.
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 HTML-Anker könnt ihr den Besuchern eurer Seite wie auch deren Browsern sowie 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.
