HTML/Tutorials/Links/Seiteninterne Verweise

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Links(Weitergeleitet von Seitenanker)
Wechseln zu: Navigation, Suche

Das a-Element hat seinen Namen von anchor (deutsch (Seiten-)Anker). Ursprünglich war ein a-Element mit einem name-Attribut ein Sprungziel eines Verweises, dies ist jedoch mittlerweile obsolet. Heute kann jedes beliebige Element mit einem id-Attribut als Verweisziel fungieren.

Innerhalb eines HTML-Dokuments können Links eingefügt werden, die einen anderen Abschnitt der gleichen Seite referenzieren. Dazu muss eine Sprungmarke oder Anker definiert werden, zu dem gesprungen werden soll. Der Verweis kann aber auch in einer anderen Datei stehen. Dann wird die Zieldatei geladen, und der Browser springt an die entsprechende Stelle innerhalb der Datei.

Sprungmarken oder Seitenanker

Dieses Sprungziel innerhalb der Seite wird mit einem Hash # referenziert. Verweise auf Anker sind an jeder beliebigen Stelle des Dokuments erlaubt und mit den anderen Referenzierungsarten kombinierbar.

Sprungmarken, erste Seite ansehen …
<h1>Eine erste Überschrift</h1>
<p>
  <a href="#zweitens">Zweitens</a> - ein Verweis zur zweiten Überschrift innerhalb dieser Seite<br>
  <a href="./Beispiel:HTML_a-Element3.html#drittens">Drittens</a> - ein Verweis zu einem Ziel 
  in einer anderen Seite
</p>
<h1 id="zweitens">Eine zweite Überschrift</h1>

Eine Sprungmarke wird mithilfe des id-Attributs erzeugt, das als Universalattribut bei einem beliebigen Element verwendet werden kann und auch für andere Dinge nützlich ist. Der erste der obigen Verweise springt innerhalb des gleichen Dokuments zur zweiten Überschrift. Der zweite Verweis öffnet die nachfolgend gezeigte Datei Beispiel:HTML_a-Element3.html, und springt dort zur Sprungmarke drittens.

Sprungmarken (HTML_a-Element3.html) ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>eine Datei mit einem Sprungziel</title>
  </head>
  <body>
    <p style="margin-bottom:500px">
      Etwas Raum schaffen, damit das Sprungziel nicht gleich Anfang des Dokuments ist
      und der Browser etwas zu scrollen hat.
    </p>
    <h1 id="drittens">Eine dritte Überschrift</h1>
    <p style="margin-bottom:500px">
      Auch noch etwas Raum.
    </p>
    <p>
      Und wieder zurück <a href="./Beispiel:HTML_a-Element2.html">zur ersten Seite</a>.
    </p>
  </body>
</html>
Beachten Sie: Als Attributwert für id sind nur lateinische Buchstaben, arabische Ziffern sowie als Sonderzeichen der Unterstrich (_), der Bindestrich (-) und der Punkt (.) erlaubt. Falls Sie Ihre Dokumente nicht in HTML5 erstellen, muss das erste Zeichen ein Buchstabe sein. Innerhalb eines Dokuments muss der id-Attributwert eindeutig sein – unabhängig davon, in welchem Element er vorkommt.

Sprungmarken mit dem name-Attribut

Achtung.svg

Neben der Möglichkeit, Sprungmarken bei beliebigen Elementen mit dem id-Attributs zu definieren, wurde früher auch ein name-Attribut in einem a-Element verwendet. 


<h1>Eine erste Überschrift</h1>
<p>
  <a href="#zweitens">Zweitens</a> - ein Verweis zur zweiten Überschrift innerhalb dieser Seite
</p>
<h2><a name="zweitens">Eine zweite Überschrift</a></h2>
Beachten Sie: Das name-Attribut gilt in HTML5 als deprecated. Die Nutzung der id ist ohnehin viel komfortabler – schon alleine, weil durch die Vergabe einer id jedes beliebige Element (und nicht nur Verweiselemente) als Sprungziel genutzt werden kann. Unnötige Verschachtelungen werden so vermieden.
<!-- neu: Ansprechen von ids -->
<h2 id="anker">Eine zweite Überschrift</h2>

Sprungmarken zum Seitenanfang

Folgende Sprungmarken lassen die Seite nach oben auf den Seitenanfang springen:

  • href="#"
  • href="#top"

Ein leeres href-Attribut erzwingt ein Neuladen der Seite.

  • href=""
Sprungmarken ansehen …
<style> a[href^="#"] { /* Formatierungen für seiteninterne Verweise */ } a[href^="#"]:before{ content:'➡ '; } a[href^="#top"]:before{ content:'➡'; display: inline-block; color:#e04c32; font-size: 1.5em; transform:rotate(-90deg); } </style> <body> <!-- … --> <a href="">neu laden</a> <a href="#">nach oben</a> <a href="#top">auch nach oben</a> <a href="#gibts_nicht">Sprungmarke nicht vorhanden</a> </body>

Die Schreibweise a[…] bezeichnet die Gruppe der Attributselektoren.

  • <a href="">Nach oben</a> verweist auf die aktuelle Seite und lädt die Seite daher neu.
  • <a href="#">Nach oben</a> lässt die Seite auf den Anfang springen. CSS formatiert interne Links mit einem Pseudoelement, das einen blauen Pfeil vor den Link setzt.
  • <a href="#top">Nach oben</a> verweist auf die Sprungmarke top, die im Dokument nicht existiert und deshalb ebenfalls mit dem Anfang der Seite verbunden ist. CSS formatiert diesen Link mit einem Pseudoelement, das einen roten, aufwärts gerichteten Pfeil vor den Link setzt.
  • Beim Anklicken eines Links zu einer nicht existierenden Sprungmarke sollte nichts passieren.


Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Links/Seiteninterne_Verweise&oldid=96963“