HTML/Regeln/Seiteninterne Verweise

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Das Thema Verweise in Internetseiten ist recht komplex und wird deshalb in diesem Wiki auch an weiteren Stellen und in anderen Zusammenhängen bearbeitet.

Inhaltsverzeichnis

[Bearbeiten] Sprungmarken und Anker

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.

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.

Beispiel: Sprungmarken 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>
Beispiel: Sprungmarken 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>

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 datei2.html, und springt dort zur Sprungmarke.

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.


[Bearbeiten] Sprungmarken mit dem name-Attribut

  • HTML 2.0
  • Achtung

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.

Beispiel
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel für Anker</title> </head> <body> <h1>Eine erste Überschrift</h1> <p> <a href="#zweitens">Zweitens</a> - ein Verweis zur zweiten Überschrift innerhalb dieser Seite </p> <h1><a name="zweitens">Eine zweite Überschrift</a></h1> </body> </html>
Beachten Sie: Das name-Attribut gilt in HTML5 als deprecated. Die Nutzung der ID ist ohnehin viel komfortabler - schon alleine, weil die Vergabe einer id jedes beliebige Element (und nicht nur Verweiselemente) genutzt werden kann. Unnötige Verschachtelungen werden so vermieden.

[Bearbeiten] 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=""
Beispiel: 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; -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); 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.

[Bearbeiten] unsichtbare Anker

Wenn Sie auf vorhandene, aber unsichtbare Anker referenzieren, können Sie das „Springen“ des Seiteninhalts verhindern. Dies können Sie beispielsweise verwenden um positionierte Elemente zu schließen ohne dass der visuelle Eindruck der Seite gestört wird.

Die Tatsache, dass jeder geklickte Link auch einen Eintrag im Browserverlauf ergibt, könnte nachteilig bzw. unerwünscht sein.

Beispiel ansehen …
<!doctype HTML> <html> <head> <meta charset="utf-8"> <title>fixer Tooltip</title> <style> /* … */ .details { /* … */ display: none; } /* … */ .details:target { display: block; } </style> </head> <body> <h1>Umfangreiche Tooltipps</h1> <ul> <li>1. Eintrag <a href="#d1">Details</a></li> <!-- … --> </ul> <div id="d1" class="details"> <h1>Details zum 1. Eintrag</h1> <p>Hier stehen so viele Details, dass man um das Scrollen nicht drum rum kommt.</p> <!-- … --> <a class="close" id="c1" href="#c1">X</a> </div> <!-- … --> </body> </html>
In diesem Beispiel werden mehrere fixierte Tooltips angeboten. Mithilfe der Pseudoklasse target wird das zunächst ausgeblendete Element sichtbar gemacht.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML