Links und Anker

HTML ist seiner ganzen Struktur nach durchaus so ausgelegt, dass ein einzelnes HTML-Dokument auch umfangreichere Texte, beispielsweise eine komplette Diplomarbeit, enthalten kann. Für Querverweise innerhalb des Dokuments oder für Verweise von außen auf Textstellen innerhalb des Dokuments bietet HTML die Möglichkeit, Zielanker für Hyperlinks an gewünschten Teststellen zu setzen. Links können solche Anker adressieren.

Beispiel

<header>
<a href="#kapitel1">Kapitel 1</a> | 
<a href="#abschnitt1">Abschnitt 1</a> | 
<a href="#abschnitt2">Abschnitt 2</a> | 
<a href="#next">Seitenende</a> 
<hr>
</header>
<hgroup>
<h1><a id="kapitel1">Kapitel 1</a></h1>
<h2><a id="abschnitt1">Abschnitt 1</a></h2>
</hgroup>
<p style="height: 800px;">Viel Inhalt</p>
<h2><a id="abschnitt2">Abschnitt 2</a></h2>
<p style="height: 800px;">Wieder viel Inhalt</p>
<footer>
<hr>
<a href="#top">Seitenanfang</a> | 
<a href="#kapitel1">Kapitel 1</a> | 
<a href="#abschnitt1">Abschnitt 1</a> | 
<a href="#abschnitt2">Abschnitt 2</a> | 
<a id="next" href="k02.html#kapitel2">Kapitel 2</a>
</footer>

Erläuterung

Ein Anker wird genau wie ein Verweis mit Hilfe des a-Elements erzeugt. Der Unterschied besteht darin, dass kein Attribut href notiert wird, sondern stattdessen das Universal-Attribut id. Ein kompletter Anker sieht also so aus:
<a id="ankername">…</a>

Um innerhalb einer Datei einen Verweis zu einem im gleichen HTML-Dokument vorhandenen Anker zu notieren, gilt folgendes Schema:
<a href="#ankername">…</a>
Auch Anker innerhalb anderer HTML-Webseiten sind auf diese Weise adressierbar. Beispiele:
<a href="andere-seite.html#ankername">…</a>
<a href="http://example.org/verzeichnis/seite.html#ankername">…</a>

a-Elemente sind zugleich Verweis als auch Anker für Verweise, wenn sie sowohl ein href- als auch ein id-Attribut haben, so wie das letzte a-Element im obigen Beispiel.

Den Ankernamen bei id können Sie frei vergeben. Er darf jedoch keine Leerzeichen enthalten. Vergeben Sie möglichst kurze, aber prägnante und lesbare Namen. Beschränken Sie sich auf lateinische Buchstaben, arabische Ziffern sowie den Unterstrich (_). Das erste Zeichen des Namens sollte ein Buchstabe sein. Damit sind Ihre ID-Namen auch gleich kompatibel für den Zugriff via JavaScript und CSS. Groß- und Kleinschreibung werden unterschieden: Ankername wird nicht gefunden, wenn auf #ankername verlinkt wird.

Die Angaben style="height: 800px" in den obigen p-Elementen des obigen Beispiels müssen Sie an dieser Stelle nicht verstehen. Es handelt sich um Style-Angaben, um „Entfernung“ zwischen den Ankern zu schaffen.

Weitere Hinweise

Das id-Attribut übernimmt erst seit HTML5 die Aufgabe des Ankernamens (wobei das id-Attribut selbst mit HTML 4.0 eingeführt wurde). Bis HTML 4.01 wurde für Anker das Attribut name eingesetzt. Im Hinblick auf sehr alte Browser ist es sogar sicherer, mit name anstelle von id zu arbeiten (Netscape 4.x konnte beispielsweise noch keine Links zu id-Ankern ausführen). Der HTML-Standard benötigt jedoch keine Doppelgleisigkeit von name und id mehr beim a-Element. Standardkonform ist deshalb nur noch das id-Attribut.

Referenzinformationen

HTML2 XHTML1 MSIE FFOX CHROME SAF OP
HTML2 XHTML1 MSIE FFOX CHROME SAF OP

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License