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.

Zum Seitenanfang

Anker: Der Elementtyp a

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.

Zum Seitenanfang

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: