Über mich

Startseite arrow Tipps & Tricks arrow Anker-Links und IDs

Anker-Links und IDs

Mittwoch, 1. April 2009
Geschrieben von Armin Vieweg
Mit einem sogenannten Anker kann man zu einer bestimmten Stelle im HTML-Dokument springen. Es geht aber noch einfacher und valider!

In Blogs gibt es manchmal sehr lange Beiträge und da es verhöhnt ist einen Artikel auf mehrerer Seiten aufzuteilen (nur um die PageImpressions für Werbende interessanter zu machen) kann ein solcher Beitrag schon mal recht unübersichtlich für den Betrachter wirken.

Es macht in solchen Fällen also Sinn den Artikel aufzuteilen. Viele machen dies mit Zwischen-Überschriften die zeigen was nun als nächstes im Text folgt. Hier ein Beispiel eines Ankeraufrufs


Anker setzen
Man könnte eine solche Überschrift noch "pimpen" in dem man davor ein leeren Link setzt der mit einem Name versehen ist, also ein sogenannter Anker.

<a name="zwischenschritt"></a>
<h2>Zwischenschritt</h2>



Jetzt kann man nämlich durch Eingabe einer etwas längeren URL direkt zu diesem Punkt auf der Seite springen. Beispiel: www.domain.de/seite.html#zwischenschritt


ID gleich Anker
Seit HTML 4.01, also seit langer Zeit, kann man einen solchen Anker nicht nur über einen leeren Link mit Name-Attribut, sondern einfach über die ID generieren. Macht auch Sinn, da eine ID ja nur einmal im Quellcode vorkommen sollte. Dadurch das die ID also einmalig (unique) ist, kann ein entsprechender Verweis erfolgen, der z.B. nicht möglich wäre, wenn es mehrere IDs auf der Seite gäbe. Weil der arme Browser ja dann nicht weiß welcher dieser IDs gemeint ist.

Der Quellcode sähe dann so aus:

<h2 id="zwischenschritt">Zwischenschritt</h2>



Der Aufruf der Seite inkl. Sprung zu genau dieser Stelle im Dokument ist der Gleiche wie vorher auch:
www.domain.de/seite.html#zwischenschritt


Alter Anker nicht mehr valide
Die beiden Formen einen Anker zu setzen unterscheiden sich kaum, die ID-Variante ist vielleicht etwas eleganter da weniger Quellcode generiert werden muss. Ein Nachteil hat der bisherige Anker (bestehend aus einem leeren A-Tag) aber: Er ist in XHTML nicht mehr valide.

Immer mehr Webentwickler und -designer nutzen XHTML, was auch gut ist da es die reine und durchgängige Logik von XML beinhaltet. Darin ist ein leerer Link, der nur ein Name als Attribut hat nicht erlaubt. Es muss zumindest auch eine ID gesetzt werden und in diesem Fall kann man sich direkt den Link sparen.


Aufruf eines Ankers in (X)HTML
Hat man einen Anker gesetzt, egal wie, kann man ihn wie oben beschrieben direkt über die URL aufrufen oder aber über einen Link auf der Seite selbst.

Ein Link der auf einen Anker zeigt sieht in HTML so aus:

<a href="#zwischenschritt">Springe zu dem Anker</a>



Dabei ist es egal ob erst der Anker im HTML definiert wird und anschließend der Link der darauf verweist oder umgekehrt. Wichtig sollte aber sein, dass der Anker vorhanden ist, da ansonsten beim Klick auf den Link nichts passiert.

Man sollte bei der Benamung des Ankers auch auf Groß- und Kleinschreibung achten (am Besten immer alles klein schreiben), da vermutlich manche Browser (IE?) darunter unterscheiden, auch wenn es vielleicht bessere Browser (!IE?) durchgehen lassen. Dieses Phänomen ist mir z.B. schon bei CSS-Klassen aufgefallen.


Wofür Anker noch gut sind?
Anker sind nicht nur zum Springen in Dokumenten super, man kann sie auch mit JavaScript abfangen und abhängig vom Inhalt unterschiedliche Aktionen durchführen lassen.


Beispiel: Anker <-- hier ist der Anker mit einer ID gesetzt
Wenn Du oben im Beitrag auf den Link geklickt hast, solltest Du hierhin gesprungen sein. Welch moderne Technik ;)


Der Artikel ist übrigens kein April-Scherz.



  Keine Kommentare vorhanden
Letzte Aktualisierung ( Mittwoch, 1. April 2009 )
 
< Zurück   Weiter >