Semantische Navigation auf Webseiten

von Matthias Born

Seit der erste grafische Browser Mosaik das WWW revolutionierte, beschränkte sich die Grundnavigation im Browser auf Vor- bzw. Rückwärts. Erst jetzt unterstützen moderne Browser wie Mozilla, Opera oder Firefox die erweiterte semantische Navigation.

Navigation bisher

Bisher war semantische Navigation Sache der Webseiten. Dazu wurden Links in Kopf oder der Fusszeile der Seite eingebaut, die auf die Startseite, das Inhaltsverzeichnis, zum nächsten Kaptiel etc. verweisen. Die Unterstützung des Surfenden seitens des Browsers beschränkte sich auf Back- und Forward Navigation bereits besuchter Seiten.

Doch das geht auch anders: Über Link-Elemente im Header einer HTML Seite lassen sich Beziehungen zu anderen Quellen angeben. Diese werden vom Browser ausgewertet und in Form einer zusätzlichen Menuleiste zur Verfügung gestellt.

Semantische Navigation

Die Link-Elemente existieren schon seit Version 2.0 der HTML Spezifikation, jedoch bis vor kurzem wurden sie nicht durch die Browser ausgewertet. Aus diesem Grund ist die Verwendung der Link-Elemente noch nicht weit verbreitet.

In der Zwischenzeit unterstüzten jedoch folgende populäre Browser die Link-Elemente: Mozille, Firefox und Opera. Alle drei Browser verfügen über entsprechende Werkzeugleisten, die sie entweder standardmäßig mitbringen, oder die sich mittels Plugin nachrüsten lassen. Diese heißen je nach Browser "Site Navigation Bar", "Link Toolbar" oder Navigationsleiste.

Im folgenden wird der Begriff Navigationsleiste aus der dt. Übersetzung des Opera verwendet.

Die Browser

Firefox

Das Ganze heißt hier Link Toolbar (Link Widgets) und ist als Plugin über https://addons.mozilla.org/de/firefox/ erhältlich.

Sind keine semantischen Informationen auf einer Seite vorhanden, so generiert das Firebird Plugin LinkIt einige Verweise, die sich aus der Struktur der Webseite ermitteln lassen. Dazu gehört der Link auf die Startseite und ein Link auf die nächst höhere Ebene. Diese werden durch LinkIt[/] bzw. LinkIt[.] gekennzeichnet. Sollte auf der Seite Navigation per Link-Element definiert sein, so fügt das Plugin LinkIt die eigenen Links zu denen der Webseite hinzu.

Firebird

Mozilla

Die Navigationsleiste heißt hier "Navigation Toolbar", gehört standardmäßig zum "Lieferumfang" und kann über [View][Show/Hide][Navigation Toolbar] aktiviert bzw. deaktiviert werden. Im Unterschied zum Firebird Plugin werden alle möglichen Links angezeigt. Diejenigen, die keine Entsprechung im Dokument finden sind nicht aktiv.

Mozilla

Opera

Auch der Opera Browser liefert eine Navigationsleiste von Haus aus mit. Diese ist jedoch nicht ganz vollständig ausgestattet. Nicht angezeigt werden u.a. Links von Typ "alternate", also Links auf anderssprachige Seiten oder auf eine Druckversionen.

Opera

Internet Explorer

In der z.Zt. aktuellen Version 6.0 unterstützt der Internet Explorer die Link-Elemente zur semantischen Navigation nicht.

Die Elemente und ihre Attribute

Für die semantische Navigation werden im Header der HTML Seite Elemente mit dem Namen <link> benötigt. Diese Elemente unterscheiden sich in ihrer Bedeutung durch das Attribut rel. Das Ziel des Links wird wie immer durch das Attribut href angegeben, mittels title wird dem Link ein Titel übergeben. Durch das Attribut media wird in Verbindung mit rel="alternate" die Bedeutung das alternativen Links angegeben.

AttributBedeutung
rel Die Bedeutung des Verweises. Daran erkennt der Browser, wo er den Link im der Navigationsbar anzeigen soll.
hrefDie URL der verlinkten Seite
titleEin beliebiger Titel für diesen Link
media In Verbindung mit "alternate" beschreibt dies die Art der alternativen Seite, z.B. "print" für eine Druckversion

Das Attribute rel definiert die Bedeutung dieses Links. Das ist der Wert, der vom Browser ausgelesen und anhand dessen der Link einem der Einträge in der Navigationsleiste zugeordnet wird:

WertBedeutung
startDie Startseite.
upEine Ebene höher, und dort zur ersten Seite.
contentsBezug zum Inhaltsverzeichnis.
nextBezug zur nächsten Seite.
prevBezug zur vorhergehenden Seite.
firstDie erste Seite einer Gruppe.
lastDie letzte Seite innerhalb einer Gruppe
alternateAlternative Seiten mit gleichem Inhalt, z.B. Übersetzungen oder PDF Dokumentes
searchBezug zu einer Suchseite
stylesheet Stylesheet Anweisungen gehören nicht zur Semantik. Sie dienen der Formatierung von Dokumenten per CSS bzw. XSLT. Sie sind bereits weit verbreitet und werden von allen Browsern unterstützt.
indexLink auf ein Stichwortverzeichnis.
glossaryLink auf ein Wörterbuch mit Erklärungen.
copyrightLink auf eine Seite mit Informationen zum Copyright.
chapterSpec: Refers to a document serving as a chapter in a collection of documents.
sectionSpec: Refers to a document serving as a section in a collection of documents.
subsectionSpec: Refers to a document serving as a subsection in a collection of documents.
appendixLink auf einen Anhang zu diesem Dokument.
helpLinks auf Seiten, die Hilfe zu diesem Dokument anbieten.
bookmark Link verweist auf einen Punkt in einem anderen Dokument. Mehrere Bookmark sind zulässig. Unterscheidung anhand des title Attributes.
search Link auf eine Sucheseite. Ist so in der Spezifikation nicht definiert, wird aber in allen drei o.g. Browsern verwendet.

Logische Rückbeziehungen

Rückbeziehungen wurden für bidirektional Beziehungen zwischen zwei HTML Dateien entwickelt. Dazu müssen die Dateien in einer logischen Verbindung stehen. Denkbar wäre es, wenn z.B. einzelne Seiten in einer alternativen Sprache vorliegen. Die Standardsprache erhält einen Link mit dem Attribut rel="alternate", die 2. Sprache einen Link mit den Attribut rev="alternate".

Es könnn die gleichen Werte für rev verwendet werden, wie sie rel definiert wurden.

Beispiele

<link rel="alternate" media="print" href="print-version.htm"/> , online verweißt auf Druckversion.

<link rev="alternate" media="screen" href="online-version.htm"/> , Druckversion verweißt zurück auf Onlineversion.

Einsatz auf der OIO Homepage

Folgende Seiten werden auf der OIO Homepage in Abhängigkeit von Kontext verlinkt:

Auf eine Abbildung der Homepage-Struktur auf Chapter, Section und Subsection haben wir bisher verzichtet. Diese liese sich jedoch sehr gut bei Online Dokumentationen einsetzen.

Fazit

Noch ist die Navigation mittels Navigationsleiste etwas gewöhnungsbedürftig, aber sie ist ein erster Schritt in Richtung Softwareergonomie im Browser und im Internet.
Die Vorteile liegen klar auf der Hand:

Bleibt zu hoffen, dass bald möglichst viele Webseiten sich die erweitertern Fähigkeiten der Browser zu Nutze machen und vermehrt Wert auf Metainformation legen, anstatt sich nur auf das Layout zu konzentrieren.

Es zählt nicht nur das, was man sieht.

Links

Kompetenzen
Artikel
XML basiertes CMS in der Praxis beschreibt die Hintergründe und eingesetzten Technologien zur Erzeugung der OIO Homepage
Schulung
Lernen Sie die Technologien, die bei der Erzeugung der OIO Homepage eingesetzt werden: XSLT und Formatting Objects.