Mit HTML innerhalb von einer Seite verlinken

Ein Menü oder ein Inhaltsverzeichnis kann zwar helfen, aber es ist ermüdend, auf einer langen Webseite nach oben zu gehen und dann nach unten zu scrollen, um das zu finden, wonach du suchst. Spare deinen Besuchern Arbeit, indem du direkt auf einen sogenannten Anchor, also einen „Anker“, verlinkst. Ein Anchor kann überall auf der Seite erscheinen und trägt einen kurzen "Fragment Identifier" vom id-Attribut. Füge das Raute-Zeichen # gefolgt vom Fragment Identifier am Ende der URL ein und du kannst direkt auf den Anchor verlinken.

Teil 1

Teil 1 von 2:

Einen Ziel-Anchor erstellen

PDF herunterladen

Das "anchor" Element <a></a> definiert eine Stelle auf der Seite, auf die du verlinken kannst. Alles zwischen den Tags <a> und </a>, üblicherweise Text oder ein Bild, kann das Ziel des Links sein.
2
Setze etwas in das Anchor-Element. Auch wenn es gültiges HTML ist, das Anchor-Element leer zu lassen, finden manche Browser es nicht, wenn zwischen <a> und </a> nichts steht.^{[1]XForschungsquelle} Tippe einfach den Text ein, auf den du verlinken möchtest:
- <a>Mein Lasagne-Rezept</a>
- Der a Tag verändert den Stil des Texts üblicherweise nicht.^{[2]XForschungsquelle} In diesem Beispiel wird "Mein Lasagne-Rezept" als gewöhnlicher Text angezeigt.
3
Füge deinem Anchor-Element ein id-Attribut hinzu. Durch das id-Attribut bekommt der Anchor einen eindeutigen Identifier, so dass du darauf verlinken kannst. Setze ihn wie folgt zwischen den <a> Tag:
- <a id="anchor-name-1">Mein Lasagne-Rezept</a>
4
Wähle einen Wert für deine ID. Im Beispiel oben haben wir "anchor-name-1" verwendet, aber am besten gibst du deinem Anchor einen sprechenden Wert, in diesem Fall etwa "lasagne". Dieser Wert muss eindeutig sein für diese ID. Wenn eine andere ID im gleichen Dokument den gleichen Wert hat, kann der Browser den Anchor, auf den du verlinken möchtest, nicht erkennen.
- In HTML4 muss der Wert mit einem Buchstaben beginnen. Du kannst Buchstaben, Zahlen, Bindestriche, Unterstriche, Doppelpunkte und Punkte verwenden.^{[3]XForschungsquelle}
- In HTML5 kannst du beliebige Zeichen außer Leerzeichen verwenden.^{[4]XForschungsquelle}
- Pass auf mit Groß- und Kleinschreibung. "Essen" und "essen" werden als der gleiche Wert angesehen und sollten nicht im gleichen Dokument stehen.^{[5]XForschungsquelle}
5
Füge stattdessen eine ID in ein Element ein. Du musst nicht jedes Mal das <a> Tag verwenden, wenn du einen Anchor erzeugen möchtest. Das id-Attribut kannst du in jedes HTML-Element einfügen.^{[6]XForschungsquelle}^{[7]XForschungsquelle} Alle modernen Browser sollten dies interpretieren können. Hier sind einige Beispiele:
- Anchor in einer Überschrift: <h2 id="biblio">Bibliographie</h2>
- Anchor in einem Bild: <img id="logo" src="https://de.wikihow.com/images/logo.png" />
- Anchor in einem Absatz: <p id="introparagraph">(einführender Absatz)</p>
- Denke daran, dass jede ID nur einmal auf einer Seite erscheinen darf.
Werbeanzeige

Teil 2

Teil 2 von 2:

Zum Ziel-Anchor verlinken

PDF herunterladen

1
Verlinke von einer anderen Stelle im gleichen Dokument auf den Anchor. Dies geschieht ähnlich wie jeder Link im Format <a href=" "> </a>. Verwende allerdings statt einer URL als Wert für das href-Attribut das Raute-Zeichen # gefolgt vom Wert für den Anchor. Um auf das Lasagne-Rezept aus dem Beispiel oben zu verlinken, würdest du dies eingeben:
- <a href="#lasagne">Klicke hier, um mein Lasagne-Rezept zu sehen.</a>
- Verwende genau die gleiche Schreibweise als beim Erstellen des Anchor. Manche Browser erkennen "#Lasagne" nicht als Link auf "lasagne".^{[8]XForschungsquelle}
2
Verlinke von einer anderen Webseite auf den Anchor. Du kannst auch von einer anderen Webseite auf den Anchor verlinken. Gib einfach die URL gefolgt von # und dem Wert des Anchor ein. Hier sind einige Beispiele:
- Verlinken von einer anderen Seite auf der gleichen Domain:
  <a href="recipes.html#lasagne">Gehe zu meinen Rezepten, um mein Lasagne-Rezept zu sehen.</a>
- Von einer beliebigen Stelle verlinken:
  <a href="http://wikicooking.org/recipes.html#lasagne">Sieh dir die Seite meines Freunds mit einem Lasagne-Rezept an.</a>
3
Verwandle ein Bild in einen Link. Wie bei jeder gewöhnlichen URL kannst du mit einem Bild auf einen Anchor verlinken:
- <a href="#lasagne"><img src="hühnchenlasagne.png" /></a>
Werbeanzeige

Tipps

Dies ist eine gute Möglichkeit zur Erstellung von Fußnoten. Laut der Konvention verlinkst du auf Fußnoten mit einer hochgestellten Zahl und eckigen Klammern.^{[9]XForschungsquelle} Als Beispiel:
Julius Caesar<sup><a href="#ftn1">[1]</a></sup>
verlinkt auf:
<a id="ftn1">Berühmter Roman und ein enger Freund von mir.</a>
Wenn deine Anchor-Links dich einfach auf der Seite nach oben bringen, dann prüfe, ob deine Webseite nicht den Browser auf eine etwas andere URL weiterleitet. Einige Browser leiten beispielsweise fälschlicherweise bei http://www.beispiel.com auf http://beispiel.com weiter.^{[10]XForschungsquelle} Dies kannst du beheben, indem du sicherstellst, dass all deine Anchor-Links auf http://beispiel.com/#anchor-name verweisen, damit keine Umleitung geschieht.

Werbeanzeige

Warnungen

Ein häufiger Fehler ist die Verwendung des Raute-Zeichens beim Erstellen eines Ziel-Anchor. Verwende # nur beim Verlinken auf den Anchor, also in einem href-Attribut.
Unterstriche in id-Werten können zu Schwierigkeiten führen, wenn du dein Dokument mit CSS stylst.
HTML5 und XHTML unterstützen nicht das Namens-Attribut in Anchor-Elementen.^{[11]XForschungsquelle}^{[12]XForschungsquelle} Verwende das id-Attribut stattdessen wie in diesem Artikel beschrieben. Wenn du erwartest, dass Besucher deiner Seite sehr veraltete Browser verwenden (gut über zehn Jahre alt), dann kannst du zwei identische id- und name-Attribute verwenden (<a id="beispiel-anchor" name="beispiel-anchor">Beispieltext</a>).^{[13]XForschungsquelle} HTML4 unterstützt dies offiziell nur bei den Elementen a, applet, form, frame, iframe, img und map.^{[14]XForschungsquelle}