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.
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.
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.
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.
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.
| Attribut | Bedeutung |
|---|---|
| rel | Die Bedeutung des Verweises. Daran erkennt der Browser, wo er den Link im der Navigationsbar anzeigen soll. |
| href | Die URL der verlinkten Seite |
| title | Ein 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:
| Wert | Bedeutung |
|---|---|
| start | Die Startseite. |
| up | Eine Ebene höher, und dort zur ersten Seite. |
| contents | Bezug zum Inhaltsverzeichnis. |
| next | Bezug zur nächsten Seite. |
| prev | Bezug zur vorhergehenden Seite. |
| first | Die erste Seite einer Gruppe. |
| last | Die letzte Seite innerhalb einer Gruppe |
| alternate | Alternative Seiten mit gleichem Inhalt, z.B. Übersetzungen oder PDF Dokumentes |
| search | Bezug 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. |
| index | Link auf ein Stichwortverzeichnis. |
| glossary | Link auf ein Wörterbuch mit Erklärungen. |
| copyright | Link auf eine Seite mit Informationen zum Copyright. |
| chapter | Spec: Refers to a document serving as a chapter in a collection of documents. |
| section | Spec: Refers to a document serving as a section in a collection of documents. |
| subsection | Spec: Refers to a document serving as a subsection in a collection of documents. |
| appendix | Link auf einen Anhang zu diesem Dokument. |
| help | Links 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:
- Homepage, Suche, Sitemap
- Übersetzungen, Druckansichten bzw. PDF Dokumente
- Erste und letzte, vorhergehende und nächste Seite
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:
- Eine von den Webseiten unabhängige und einheitliche Benutzerschnittstelle.
- Schneller Zugriff auf zusätzliche Informationen wie Copyright, Suche, Inhaltsverzeichnis...
- Vereinfachte Navigation durch Webseiten. Bei einer entsprechenden Struktur des Dokumentes kann die Navigation vollständig in die Navigationsleiste ausgelagert werden.
- Barrierefreies Web: Die Link-Elemente sind eine hervorragende Möglichkeit, die Navigation durch die Webseiten barrierefrei zu gestallten. Wird diese Form der Navigation akzeptiert, wird es früher oder später Tastaturen geben, die das unterstützen.
- Link-Elemente machen die Struktur von Webseiten maschinenlesbar.
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
- Mozilla: www.mozilla.org
- Firefox: www.mozilla.org/products/firefox
- Opera: www.opera.com
- LinkIt: http://extensionroom.mozdev.org/main.php/Firefox
- Link Toolbar: http://extensionroom.mozdev.org/main.php/Firefox
- SelfHTML: Deutsche Fassung von SelfHTML.org
- W3C: www.w3.org
