Mit HTML innerhalb von einer Seite verlinken

PDF download PDF herunterladen
unter Mitarbeit von wikiHow Staff

Referenzen

PDF download PDF herunterladen

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 download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/df\/Link-Within-a-Page-Using-HTML-Step-1-Version-2.jpg\/v4-460px-Link-Within-a-Page-Using-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/df\/Link-Within-a-Page-Using-HTML-Step-1-Version-2.jpg\/v4-728px-Link-Within-a-Page-Using-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/75\/Link-Within-a-Page-Using-HTML-Step-2-Version-2.jpg\/v4-460px-Link-Within-a-Page-Using-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/75\/Link-Within-a-Page-Using-HTML-Step-2-Version-2.jpg\/v4-728px-Link-Within-a-Page-Using-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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] 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] In diesem Beispiel wird "Mein Lasagne-Rezept" als gewöhnlicher Text angezeigt.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/Link-Within-a-Page-Using-HTML-Step-3-Version-2.jpg\/v4-460px-Link-Within-a-Page-Using-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/Link-Within-a-Page-Using-HTML-Step-3-Version-2.jpg\/v4-728px-Link-Within-a-Page-Using-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/Link-Within-a-Page-Using-HTML-Step-4-Version-2.jpg\/v4-460px-Link-Within-a-Page-Using-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Link-Within-a-Page-Using-HTML-Step-4-Version-2.jpg\/v4-728px-Link-Within-a-Page-Using-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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]
    • In HTML5 kannst du beliebige Zeichen außer Leerzeichen verwenden. [4]
    • Pass auf mit Groß- und Kleinschreibung. "Essen" und "essen" werden als der gleiche Wert angesehen und sollten nicht im gleichen Dokument stehen. [5]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f9\/Link-Within-a-Page-Using-HTML-Step-5-Version-2.jpg\/v4-460px-Link-Within-a-Page-Using-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f9\/Link-Within-a-Page-Using-HTML-Step-5-Version-2.jpg\/v4-728px-Link-Within-a-Page-Using-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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] [7] 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="/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 download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/Link-Within-a-Page-Using-HTML-Step-6-Version-2.jpg\/v4-460px-Link-Within-a-Page-Using-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/Link-Within-a-Page-Using-HTML-Step-6-Version-2.jpg\/v4-728px-Link-Within-a-Page-Using-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2c\/Link-Within-a-Page-Using-HTML-Step-7.jpg\/v4-460px-Link-Within-a-Page-Using-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2c\/Link-Within-a-Page-Using-HTML-Step-7.jpg\/v4-728px-Link-Within-a-Page-Using-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/Link-Within-a-Page-Using-HTML-Step-8.jpg\/v4-460px-Link-Within-a-Page-Using-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/Link-Within-a-Page-Using-HTML-Step-8.jpg\/v4-728px-Link-Within-a-Page-Using-HTML-Step-8.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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] 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] 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] [12] 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] HTML4 unterstützt dies offiziell nur bei den Elementen a, applet, form, frame, iframe, img und map. [14]
Werbeanzeige

Verwandte wikiHows

Kommentare in HTML Code einfügen
HTM Dateien öffnen
Ein Hintergrund Bild in HTML einfügen
Einen E mail Link in HTML erstellen
Die Farbe einer Schaltfläche in HTML ändern
Eine einfache Webseite mit HTML gestalten
HTML Dateien bearbeiten
Bilder mit HTML einfügen
Eine Webseite mit einfachem HTML hacken
Ein Dropdown Menü mit HTML und CSS erstellen
Text in HTML zentrieren
Text in HTML blinken lassen
In HTML eine Linie einfügen
Einen Download Knopf auf einer Webseite erstellen
Werbeanzeige

Referenzen

  1. ↑ https://www.w3.org/TR/html4/struct/links.html
  2. ↑ https://www.w3.org/TR/html4/struct/links.html#anchors-with-id
  3. ↑ https://www.w3.org/TR/html4/types.html#type-cdata
  4. ↑ https://www.w3.org/TR/html5/dom.html#the-id-attribute
  5. ↑ https://www.w3.org/TR/html4/struct/links.html
  6. ↑ https://www.w3.org/TR/html4/struct/links.html
  7. ↑ https://www.w3.org/TR/html5/dom.html#the-id-attribute
  8. ↑ https://www.w3.org/TR/html4/struct/links.html
  9. ↑ https://www.w3.org/TR/html5/common-idioms.html#footnotes
  1. ↑ https://www.w3.org/TR/cuap#uri
  2. ↑ https://www.w3.org/TR/xhtml1/#C_8
  3. ↑ https://www.w3.org/TR/html5/obsolete.html
  4. ↑ http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id
  5. ↑ https://www.w3.org/TR/html4/struct/links.html

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 8.985 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige