Links und Anker
Der große Unterschied zwischen XHTML und den meisten anderen Auszeichnungssprachen ist die Tatsache, dass es sich bei XHTML-Dokumenten um Hypertext handelt. Das wichtigste Element im Hypertext ist der Link.
Ein Link (auch: Hyperlink, Weblink) ist ein Verweis von einem Quellanker zu einem Zielanker, in den meisten Fällen von einem Dokument zu einem anderen oder von einer Stelle in einem Dokument zu einer anderen im selben Dokument (Fragmentlink), der über ein Benutzerprogramm effizient verfolgt werden kann.
Der Zielanker kann irgendeine Ressource sein, zum Beispiel ein Bild, ein Film, ein Programm, ein Download, ein XHTML-Dokument oder ein bestimmtes Element innerhalb eines XHTML-Dokuments. Wie der Browser sich beim Aktivieren eines Links verhält, ist abhängig von den Browser- und Betriebssystemeinstellungen. So kann er die Zielressource im Browserfenster anzeigen, zum Herunterladen anbieten oder sie an ein anderes, passenderes Programm übergeben.
Anker: Der Elementtyp a
Das Element a
definiert
- einen Zielanker für beliebig viele Links, wenn ein Attribut
name
definiert wird (<a name="bezeichner">Ankertext</a>
), oder - einen Quellanker genau eines Links, wenn er ein Attribut
href
enthält (<a href="uri">Ankertext</a>
). Der Wert deshref
-Attributs ist ein URI.
Browser stellen Links so dar, dass sie für den Nutzer als solche erkennbar sind. Die exakte Wiedergabe hängt von der Art des Benutzerprogramms ab. Grafische Browser unterstreichen Links und unterscheiden in der Farbdarstellung zwischen besucht und unbesucht. Wurde der Zielanker noch nicht besucht, wird der Linktext blau angezeigt, wurde er bereits besucht, dann erscheint der Linktext in Violett. Dieses Verhalten lässt sich durch CSS beeinflussen. Welche Ressourcen ein Nutzer bereits besucht hat, merkt der Browser sich in seiner History.
Fährt man mit dem Mauszeiger über einen Link, verändert er sich in der Regel von einem einfachen Pfeil zu einer Hand mit ausgestrecktem Zeigefinger (siehe Abbildung 5.2).
Ein Link auf die Onlinevariante dieses Buchs kann wie folgt aussehen:
<a href="http://jendryschik.de/wsdev/einfuehrung/"> Einführung in XHTML, CSS und Webdesign</a>
Abb. 5.2: Der Mauszeiger verändert sich beim Überfahren eines Links
Ressourcen zum Download anbieten
XHTML bietet keine spezielle Notation, um Dateien explizit zum Download anzubieten. Wie bereits erwähnt, wird eine Zielressource je nach Server-, Browser- und Systemkonfiguration entweder im Browserfenster dargestellt, zum Herunterladen angeboten oder an ein anderes Programm übergeben, das diese Ressource dann anzeigt oder anderweitig verarbeitet. Entscheidend ist, mit welchem MIME-Typ der Webserver die Ressource ausliefert. Welche dieser drei Möglichkeiten gewählt wird, kann ein Webautor nicht beeinflussen!
Um ein Dokument zum Download anzubieten, setzen Sie folglich einen einfachen Link:
<a href="http://example.com/downloads/file.zip"> Download</a>
Fragmentlinks: In die Mitte von Webseiten verlinken
Bei sehr umfangreichen Dokumenten kann es
sinnvoll sein, Querverweise innerhalb des Dokuments zu setzen
oder ein Inhaltsverzeichnis an den Anfang zu stellen, das zu den
einzelnen Abschnitten (Fragmenten) des Dokuments oder anderer
Dokumente verweist. Ursprünglich realisierten Webautoren
dies über ein Element a
mit dem Attribut name
.
Angenommen, Sie möchten von einem Ursprungsanker aus auf den zweiten
Abschnitt eines Dokuments foo.html
verweisen. Zunächst
definieren Sie den Zielanker:
<h2><a name="abschnitt2">Zweiter Abschnitt</a></h2>
oder:
<h2><a name="abschnitt2"></a>Zweiter Abschnitt</h2>
Das Attribut name
ist in diesem Zusammenhang
jedoch veraltet! Webautoren sollten Zielanker über das
id
-Attribut kennzeichnen:
<h2 id="abschnitt2">Zweiter Abschnitt</h2>
In vielen Fällen wird auf Fragmente verwiesen, die ohnehin schon über ein id-Attribut verfügen. Darüber hinaus ist das name-Attribut in XHTML (nicht in HTML) missbilligt (deprecated), insofern ist für alle Versionen nach XHTML 1.0 diese Vorgehensweise die einzig mögliche. Lediglich sehr alte Browser wie der Netscape Navigator 4 können id-Attribute nicht als Zielanker interpretieren.
Der Verweis auf den Fragmentanker ist ein ganz
normaler Link zur Seite foo.html
, jedoch hängen Sie
eine Raute (#
) und den Namen des Ankers
an:
<a href="foo.html#abschnitt2">zweiter Abschnitt</a>
Beziehungen: Die Attribute rel und rev
Die Attribute rel
und
rev
nehmen entgegengesetzte Rollen
ein – das rel
-Attribut spezifiziert eine
Vorwärts-, das rev
-Attribut eine Rückwärtsbeziehung.
Das Attribut rel
beschreibt die
Beziehung des aktuellen Dokuments zu der durch das href
-Attribut
angegebenen Zielressource. Das Attribut rev
dient dazu, einen Rückwärtslink von der durch das
href
-Attribut angegebenen
Zielressource zum aktuellen Dokument zu beschreiben. Der Wert
beider Attribute ist eine durch Leerzeichen getrennte Liste von
Beschreibungen.
So sagt beispielsweise
<a href="glossar" rel="glossary">Glossar</a>
aus, dass die verlinkte Ressource ein Glossar für das aktuelle Dokument bereitstellt. Mit
<a href="foo" rev="contents">Foo</a>
wird angezeigt, dass das aktuelle Dokument ein
Inhaltsverzeichnis (table of
contents) für die verlinkte Ressource darstellt.
Die Information zur Vorwärtsbeziehung mit rel
ist meistens
etwas nützlicher und interessanter als die
Rückwärtsbeziehung, insofern ist das Attribut
rel
häufiger anzutreffen als
sein Äquivalent rev
.
Bei zusammenhängenden Webseiten
könnten die zwei aufeinanderfolgenden Dateien foo.html
und
bar.html
gegenseitig verlinkt und
mit den Attributwerten next
(nächste/r/s) und
prev
(previous, vorherige/r/s) in Beziehung
gesetzt werden. Dazu notieren Webautoren im Dokument foo.html
:
<a href="bar" rel="next" rev="prev">Weiter</a>
und im Dokument bar.html
:
<a href="foo" rel="prev" rev="next">Zurück</a>
Attributwerte für die Attribute
rel
und rev
finden sich
unter anderem in der HTML 4.01-Spezifikation, aber auch in
HTML 3.2 und in DTD-Kommentaren von (X)HTML sowie in mehreren
nicht offiziellen Arbeitsentwürfen und Dokumenten. Einige
Browser unterstützen auch weitere Werte. Zu den am
häufigsten verwendeten Werten gehören die im Folgenden
vorgestellten.
Am 18. Januar 2005 kündigte Google an, gemeinsam mit MSN und
Yahoo einen neuen Wert für das Attribut rel
einzuführen: nofollow
. Damit erreichen Sie,
dass Suchroboter Links zwar verfolgen, den Inhalt der verlinkten
Ressource jedoch nicht in den Index aufnehmen und neu bewerten.
Der Grund für diese Lösung ist Spam (unerwünschte
Werbung für Webseiten) in Gästebüchern und
Weblog-Kommentarsystemen. Der Sinn ist jedoch zweifelhaft;
schließlich gehört starke Verlinkung der Weblogs
untereinander zur Blog-Kultur, und auch diese hilfreichen und
weiterführenden Links würden mit dieser Methode
abgewertet werden.
Eine weitere Anwendung sind die bei vielen Webautoren beliebten im XHTML Friends Network definierten Linkbeziehungen. So kann ein Webautor oder Blogger beispielsweise beim Verlinken eines Kollegen angeben, dass er diese Person als Freund ansieht, bereits im echten Leben getroffen hat und in seiner Nähe wohnt:
<a href="http://www.intermitto.net/ich/" rel="friend met co-resident">Jens</a>
Mit CSS könnten diese Beziehungen farblich oder auch über Icons sichtbar gemacht werden. Spezialisierte Suchmaschinen und Social-Network-Tools könnten diese Daten ebenfalls auswerten. Natürlich ist diese Kennzeichnung eher eine Spielerei als eine besonders nützliche Anwendung – aber immerhin zeigt sie, dass diese Art von Metadaten in Linkattributen genutzt wird.
Auf vielen Websites ist es mittlerweile üblich, dass Autoren
ihre Inhalte verschlagworten, auf Neudeutsch: taggen. Dabei
weisen Autoren ihren Inhalten (darunter Texte, Videos, Fotos,
Links oder Nutzerprofile) Begriffe (»Tags«) zu, von
denen sie glauben, dass diese sie gut beschreiben. Tags sind im
Allgemeinen verlinkt und führen zu Übersichtsseiten,
auf denen alle Inhalte des Webangebots angezeigt werden, die mit
diesem Tag verschlagwortet worden sind. Um Tag-Links als solche
zu kennzeichnen, verwenden Sie das Attribut rel="tag"
. Dies ist
ein Beispiel für einen Link auf die Auflistung aller
Ressourcen, die Nutzer bei Mister Wong, einem
Social-Bookmark-Dienst, mit dem Tag »CSS« verschlagwortet haben:
<a href="http://www.mister-wong.de/tags/css/" rel="tag">CSS</a>
Einen Link zur Homepage einer Website kennzeichnen Sie mit dem Attribut
rel="home"
, beispielsweise wie folgt:
<a href="/" rel="home">Startseite</a>
Bereits heute gibt es spezielle Suchdienste, die Beziehungen von Dokumenten untereinander auswerten. Zukünftige, intelligente Browser und Suchmaschinen können dies noch verstärkt tun und damit bessere Navigation, Orientierung und Suchergebnisse bieten. Es schadet also nicht, sich jetzt schon einmal damit zu beschäftigen und – wenn es nicht zu viel Arbeit verursacht – einige Relationen in den Webseiten zu verwenden.
Weitere Relationen lernen Sie im folgenden
Abschnitt über das link
-Element kennen.
Dokumentbeziehungen: Der Elementtyp link
Das leere Element link
vermittelt
Informationen über die Beziehungen zweier Ressourcen, die
von Benutzerprogrammen auf unterschiedliche Weise wiedergegeben
werden können. link
-Elemente dürfen nur im
head
eines Dokuments stehen.
Über das Attribut rel
oder rev
wird der Typ
der Beziehung angegeben, href
definiert das Verweisziel.
Das Attribut title
kann von Benutzerprogrammen
als Beschriftung des link
-Elements herangezogen werden,
wenn es dargestellt wird.
Webautoren können link
-Elemente unter anderem
dafür verwenden, folgende Arten von Verweisen anzugeben:
- Verweise zu alternativen, in anderen Sprachen geschriebenen Versionen eines Dokuments,
- Verweise zu alternativen, für andere Medien gestalteten Versionen eines Dokuments, beispielsweise einer speziell für den Druck aufbereiteten Fassung,
- Verweise zur Startseite einer Sammlung von Dokumenten.
Damit könnte nicht nur die Behandlung
eines Dokuments durch Suchmaschinen verbessert, sondern seitens
der Browser auch eine völlig andere Art der Navigation
bereitgestellt werden, beispielsweise in Form einer separaten
Navigationsleiste, die die Dokumentbeziehungen auswertet und
gruppiert. Leider ist dies nur graue Theorie. Das link
-Element
gehört zwar seit 1995 zum HTML-Sprachumfang, wird jedoch
noch heute von kaum einem Benutzerprogramm ausgewertet. Die
Browser iCab und Opera blenden auf Wunsch eine derartige
Navigationsleiste ein, für Firefox gibt es eine
entsprechende Erweiterung, die nachinstalliert werden kann. Auch
der Textbrowser Lynx unterstützt link
-Elemente.
Abb. 5.3: Navigationsleiste in Opera bei der Darstellung der Cascading Style Sheets Home Page
Diese Browser können unter anderem folgende Angaben auswerten:
Angabe | Bedeutung |
---|---|
rel="alternate" |
Bezeichnet andere Versionen des Dokuments. Diese Beziehung wird oft in Verbindung mit den Attributen hreflang und xml:hreflang oder media verwendet und bezeichnet dann eine Übersetzung oder eine Umsetzung für ein anderes Medium. |
rel="appendix" |
Verweist zum Anhang. |
rel="author" |
Verweist zu einer Seite mit Informationen über den Autor des Dokuments. |
rel="bookmark" |
Verweist zu einem allgemeinen Orientierungspunkt oder Schlüsselpunkt. |
rel="chapter" |
Verweist zum Anfang des Kapitels. |
rel="contents" |
Verweist zu einer Inhaltsübersicht oder einer Sitemap. |
rel="copyright" |
Verweist zu einem Copyrightvermerk für die aktuelle Seite. |
rel="first" |
Verweist zu dem ersten Dokument einer Folge von Dokumenten. |
rel="glossary" |
Verweist zu einer Seite mit Begriffserläuterungen für das aktuelle Dokument. |
rel="help" |
Verweist zu einer Hilfeseite für das Dokument oder die gesamte Website. |
rel="index" |
Verweist zu einem Dokument, das einen Index oder eine Übersicht zu dem aktuellen Dokument enthält. |
rel="last" |
Verweist zu dem letzten Dokument einer Folge von Dokumenten. |
rel="next" |
Verweist zu dem folgenden Dokument einer Folge von Dokumenten. |
rel="prev" |
Verweist zu dem vorhergehenden Dokument einer Folge von Dokumenten. |
rel="search" |
Verweist zur Suchfunktion. |
rel="section" |
Verweist zum Anfang des Abschnitts. |
rel="start" |
Verweist zur Startseite (wie rel="top" ). |
rel="stylesheet" |
Diese mit Abstand meistverwendete Art von link -Elementen verweist auf ein externes Stylesheet. Mehr dazu lesen Sie in Kapitel 6.3.3. |
rel="subsection" |
Verweist zum Anfang des Unterabschnitts. |
rel="top" |
Verweist zur Startseite (wie rel="start" ). |
rel="up" |
Verweist zur übergeordneten Kapitelseite. |