Site-Navigation mit dem <LINK> Element

HTML 2.0

Alle modernen Browser beherrschen den Standard HTML 4 inzwischen ganz gut, so heißt es immer wieder. Wirklich? Nun, seit HTML 2.0 gibt es das LINK Element, das den User bei der Navigation durch umfangreiche Websites unterstützen soll und außerdem weitere Informationen über die Site und den Autor leicht zugänglich macht.

Doch welche Browser unterstützen diesen mächtigen Tag? Leider nicht alle.... Es sind nur die aktuellen Browser wie Mozilla ab Version 1.1, Opera ab Version 7, Netscape 7 und Firefox. Pech haben die Microsoft-Fans: ihr Internet Explorer bis zur aktuellen Version kann es nicht.

Nachtrag: Firefox beherrscht die Site-Navigation nicht mehr standardmäßig. Sie kann aber als Add-On nachgeladen werden.

Die Site-Navigationsleiste in Mozilla

Seit Mozilla 1.1 vom August 2002 und dem darauf aufbauenden Netscape 7 ist die Navigationsleiste in den Browser integriert, allerdings wird sie standardmäßig nicht angezeigt. Unter dem Menüpunkt Ansicht -> Anzeigen / Verstecken -> Site-Navigationsleiste kann man sie jedoch sichtbar machen, entweder ständig oder nur bei Webseiten, die sie verwenden.

Diese Webseite macht vom Link-Element reichlich Gebrauch. Ich habe versucht, alle zur Verfügung stehenden Link-Typen sinnvoll einzubauen und die Navigationsleiste vollständig auszunutzen, auch wenn einige Optionen bei einer einzelnen Seite ziemlich sinnfrei sind. Damit die Benutzer anderer Browser sehen auf was sie verzichten müssen, habe ich hier einen Screenshot der Site-Navigationsleiste beigefügt. Eine Beschreibung der Menüpunkte und ihre Implementierung durch die Link-Tags ist Inhalt des folgenden Absatzes.

Beschreibung der Site-Navigation

Die Site-Navigationsleiste (Klick auf den Link um das PopUp zu öffnen) sieht auf den ersten Blick aus wie eine Erweiterung der Hauptschaltflächen des Browsers, die Pfeile haben jedoch eine vollkommen andere Bedeutung. Über die Vor- und Zurück-Symbole des Browsers navigiert man durch die zuletzt besuchten Webseiten, die Schaltflächen der Site-Navigation helfen bei der Orientierung innerhalb einer umfangreichen Website.

Wer einen Blick in den Quelltext dieser Seite wirft, findet alle im folgenden beschriebenen Link-Typen im <head>-Bereich implementiert. Ich habe sie in der Reihenfolge aufgeführt, wie sie in der Site-Navigationsleiste von Mozilla stehen. Ansonsten ist ihre Reihenfolge ebenso die Groß-/Kleinschreibung beliebig. Nicht verwendete Link-Typen bleiben gegraut und sind nicht anklickbar.

<link  rel="home"  href="\index.html"  title="Startseite" />

Wie der title schon verrät, gelangt man hier zur Startseite der Website. Die deutsche Übersetzung "Anfang" ist etwas unglücklich gewählt. Der title wird übrigens als Tooltip angezeigt, wenn sich die Maus über dem Symbol oder dem Text befindet.

<link  rel="top"  href="#top"  title="Seitenanfang" />

Die Beschreibung in der Leiste lautet "Nach oben" und hat dieselbe Wirkung wie die kleinen Pfeile rechts in dieser Seite: man scrollt hoch zum Seitenanfang.

<link  rel="up"  href="..."  title="..." />

Wenn die Seite Teil eines übergeordneten Themas ist, geht man hier in der Hierarchie eine Stufe nach oben. Da die Site-Navigation, das Thema dieser Seite, vor allem in Mozilla eine Rolle spielt, gelangt man hier zu meinem Stichpunkt Mozilla.

<link  rel="first"  href="..."  title="..." />
<link  rel="previous"  href="..."  title="..." />
<link  rel="next"  href="..."  title="..." />
<link  rel="last"  href="..."  title="..." />

Diese Link-Typen haben auf dieser einzelnen Seite keine Bedeutung, ich habe sie hier eher willkürlich mit anderen Seiten meiner Site verlinkt. Bei mehrseitigen HTML-Dokumenten oder in einer Bildergalerie sind sie jedoch sehr nützlich: sie gehen jeweils eine Seite vor oder zurück bzw. zur ersten oder letzten Seite. Bei einer Einzelseite werden sie normalerweise nicht verwendet, die Optionen bleiben dann gegraut und sind nicht klickbar.

<link  rel="contents"  href="#..."  title="Inhaltsverzeichnis" />

Dieser und die folgenden Linktypen sind im Ordner Dokument angesiedelt, beziehen sich auf die gerade angezeigte Webseite und stellen Sprungmarken dar. Ein Sprungziel Inhaltsverzeichnis ist dann sinnvoll, wenn es sich nicht am Seitenanfang befindet, sondern erst hinter einem Vorspann. Die Dokumente des W3C sind hierfür ein gutes Beispiel.

<link  rel="chapter"  href="#top"  title="Das Link Element" />
<link  rel="chapter"  href="#mozilla"  title="Mozilla" />
<link  rel="chapter"  href="#types"  title="Navigationsleiste" />
<link  rel="chapter"  href="#links"  title="Links" />

Der Linktyp chapter, also Kapitel, kann mehrfach gesetzt werden und definiert die Kapitelüberschriften als Sprungziel. Hiermit steht also eine immer erreichbare schnelle Navigation innerhalb der angezeigten Webseite zur Verfügung.

<link  rel="section"  href="#..."  title="..." />
...
<link  rel="subsection"  href="#..."  title="..." />
...
<link  rel="glossary"  href="#..."  title="..." />
<link  rel="index"  href="#..."  title="..." />

Sections und Subsections, also Abschnitte und Unterabschnitte, sind nur für sehr umfangreiche Dokumente von Bedeutung und werden hier nicht benutzt. Das Gleiche gilt für Glossar und Stichwortverzeichnis (Index).

<link  rel="appendix"  href="sitenav.png"  title="Screenshot" />

Anhänge (appendix) können hier direkt aufgerufen werden. Auf dieser Seite ist es ein Bild, der Screenshot meiner Navigationsleisteleiste. Es könnten aber auch weitere Webseiten oder pdf-Dokumente und andere Download-Angebote sein.

<link  rel="help"  href="..."  title="Hilfe" />
<link  rel="search"  href="..."  title="Suche" />

Diese und die restlichen Linktypen werden im Ordner Mehr angezeigt und liefern weitergehende Informationen über die Website. Sowohl eine Hilfeseite als auch eine Suchfunktion habe ich hier nicht implementiert, sie sind in anderen Fällen aber sehr sinnvoll.

<link  rel="author"  href="mailto:info@stichpunkt.de"  title="Mail" />
<link  rel="copyright"  href="impressum.html"  title="Impressum" />

Der Linktyp author kann entweder eine Über-mich-Seite aufrufen oder aber, wie hier, einer Kontaktaufnahme mit dem Ersteller der Webseite per E-Mail dienen. Die Notwendigkeit einer Copyright-Erklärung besteht vor allem im amerikanischen Recht, in Deutschland gilt statt dessen das Urheberrecht und das muß nicht extra deklariert werden. Hier wäre allerdings das Impressum wichtig, besonders seit den neuen gesetzlichen Bestimmungen seit Anfang dieses Jahres. Ich habe den Übersetzern von Mozilla empfohlen, für die deutsche Version das Wort "Copyright" in "Impressum" zu verändern. Besonders da durch die Navigationsleiste die Zugänglichkeit von jeder Stelle der Website gesichert ist, so wie es das Teledienstegesetz verlangt.

<link  rel="bookmark"  href="..."  title="W3C Spec. Link Types" />
<link  rel="bookmark"  href="..."  title="SelfHTML Kopfdaten" />
<link  rel="bookmark"  href="..."  title="Stichpunkt Mozilla" />

In diesem Abschnitt können mehrere siteinterne und externe Links, Lesezeichen, abgelegt werden, die eine Relevanz zum Inhalt der Webseite haben. So wäre es z.B. möglich, hier alle Verweise aufzunehmen, die ich im Abschnitt Links aufgeführt habe. Sie stehen damit ohne Scrollen ständig zur Verfügung. Und auch der Link zu einer Sitemap ist hier sinnvoll.

<link  rel="alternate"  href="..." hreflang="en"  title="The ..." />
<link  rel="alternate"  href="..." hreflang="fr"  title="Le ..." />
<link  rel="alternate"  href="..." hreflang="es"  title="Los ..." />
<link  rel="alternate"  href="..." media="Print"  title="Druckversion" />

Hier können alternative Versionen der Webseite aufgeführt werden, seien es fremdsprachige Übersetzungen oder Ausgaben für andere Medien als den PC, etwa Druckversionen oder WAP-Seiten für Handys.

Das Link-Element in anderen Browsern

Unter den mir zur Verfügung stehenden Browsern zeigen außer Mozilla und Netscape 7 nur Opera ab Version 7, Beonex (eine Mozilla-Variante) und Lynx die Site-Navigationsleiste an.

Auf den Seiten von Subotnik und Matthias Gutfeldt werden jedoch zahlreiche Exoten-Browser (mit Screenshots) vorgestellt, die das Link-Element ebenfalls unterstützen.