Sprung zu
Artikelanfang
Haupt-Menue
Sitemap (Inhaltsverzeichnis)
Hilfe und Hinweise

Darstellung
Layout ausschalten
Layout einschalten

Kontakt
Impressum



Das LINK-Element in HTML

Nein! Es geht nicht um die allgegenwärtigen Hyperlinks, wie Sie sie von jeder Website kennen.
Hier geht es um Möglichkeiten, die bereits seit HTML 2.0(!) bestehen, bisher jedoch von keinem der populären Browser oder Suchmaschinen unterstützt wurden. Dies ändert sich – langsam, aber hoffentlich umfassend.

Es handelt sich hierbei um eine Serie von (Meta-)Tags, die Abhängigkeiten einzelner HTML-Dateien intern darstellen können. Findet ein Web-Browser solche Tags, kann er eine spezielle Button-Leiste einblenden, über die der Besucher die definierten internen Ziele anspringen kann. So lassen sich zum Beispiel Standard-Buttons wie Home, Sitemap, Copyright, Impressum, E-Mail usw. bis hin zu ausgefeilten 'Guided Tours' in eine standardisierte Browserzeile 'auslagern' – Seitenbauer brauchen sich keine Gedanken mehr um die Integration ins Design machen, während der Anwender stets im Bilde ist. Er muss das (Basis-)Navigationssystem nicht mehr auf jeder Website neu lernen.

Es ist schon erstaunlich (um nicht zu sagen verwerflich), dass diese elegante Methode bisher von vielen, vor allem den 'großen', Browser-Herstellern ignoriert wurde. An dieser Stelle also lobende Erwähnung an einige Browser, die diese Technik unterstützen: Mozilla, Lynx und iCab – plus einige weitere Browser, die man allerdings wirklich zu den 'Exoten' zählen muss. Eine genauere Auflistung dieser Browser befindet sich auf der Seite von Matthias Gutfeld.

Da Mozilla mittlerweile diesem Standard zu seinem Recht verhelfen will, bleibt zu hoffen, dass in Kürze alle neuen Browser-Generationen diese Technik unterstützen. Massiver Einsatz der Tags kann sicherlich dazu beitragen, die Hersteller auf ihr Versäumnis aufmerksam zu machen.
* Hinweis: Bis Mozilla Version 0.9x war der Navigation-Bar vorhanden. In Version 1 ist er derzeit nicht implementiert, da man noch an Verbesserungen arbeitet.

Doch nun zum Spaß-Teil! Wie implementiere ich diese Technik in meine Webseiten?

Schauen wir uns am Beispiel Mozilla das Ergebnis an:

Navigation-Bar

Findet der Browser die entsprechenden Tags, blendet er eine zusätzliche schmale Leiste ein, im Schaubild orange umrahmt. Nicht definierte Links sind ausgegraut, in unserem Beispiel also die Buttons, über die man eine 'Tour' referenzieren könnte. Aktiv sind der 'Top'-Link (Startseite) und die beiden Ordner am Ende der Leiste ('Document' und 'More'), die nach einem Klick folgende Links enthüllen:

Navigation-Bar
Navigation-Bar

Sämtliche Menüpunkte sind direkte Links zu Seiten dieser Präsenz (was Sie natürlich sofort erkannt haben *s*) ... Auch hier sind die nicht definierten Links ausgegraut.
Hinweis: Einige der vordefinierten Links erscheinen in Englisch, da uns zur Zeit des Tests kein deutschsprachiges Interface zur Verfügung stand.

Sehen Sie sich den nötigen Quelltext an – vergleichen Sie ihn mit den oben gezeigten zusätzlichen Menüs, Sie werden die Zusammenhänge sofort erkennen.

<head>
<title>Das Link-Element in HTML</title>
<link rel="start" href="index.php" title="Top">
<link rel="contents" href="sitemap.php" title="Table of Contents">
<link rel="help" href="wichtig.php" title="Help">
<link rel="search" href="suchen.php" title="Search">
<link rel="copyright" href="impressum.php" title="Copyrights">
<link rel="author" href="about.php" title="Author">
<link rel="chapter" href="praxis.php" title="CSS-Praxis">
<link rel="chapter" href="profil.php" title="e-workers">
<link rel="section" href="tb-index.php" title="Toolbox">
<link rel="section" href=vemail-index.php" title="Alles zu E-Mail">
<link rel="section" href="f-index.php" title="Fun im Web">
<link rel="bookmark" href="news.php" title="Aktuelles">
<link rel="bookmark" href="infoblitz.php" title="Info-Blitz">
<link rel="bookmark" href="forum/index.php" title="Forum">
<link rel="bookmark" href="links.php" title="CSS-Links">
// weitere Meta-Tags
</head>

Sie können in jeder HTML-Datei im HEAD-Bereich ein Set solcher Tags notieren. Nutzen Sie alle oder nur einzelne, gerade benötigte Tags.

Sie sehen, die Erstellung und Einbindung ist recht einfach. Was wirklich fehlt, ist die Unterstützung durch die Masse der Browser. Allerdings ist auch der ganze Standard noch etwas weich – zum Beispiel ist noch nicht ganz klar, welche Bezeichnungen für die einzelnen Beziehungen erlaubt sind bzw. in Zukunft korrekt interpretiert werden. Es ist vorgesehen, eine 'Profil'-Datei einzubinden, in dem selbst-deklarierte Typen definiert werden können.

Laut SelfHTML sind derzeit folgende Typen erlaubt:

  • rel="contents"steht für: Bezug zum Inhaltsverzeichnis (contents = Inhaltsverzeichnis)
  • rel="chapter" steht für: Bezug zum Kapitel (chapter = Kapitel)
  • rel="section" steht für: Bezug zum Abschnitt (section = Abschnitt)
  • rel="subsection" steht für: Bezug zum Unterabschnitt (subsection = Unterabschnitt)
  • rel="index" steht für: Bezug zum Stichwortverzeichnis
  • rel="glossary" steht für: Bezug zum Glossar
  • rel="appendix" steht für: Bezug zum Anhang (appendix = Anhang)
  • rel="copyright" steht für: Bezug zur Copyright-Angabe
  • rel="next" steht für: Bezug zur nächsten Datei in der „Guided tour” (next = nächste Seite)
  • rel="prev" steht für: Bezug zur vorherigen Datei in der „Guided tour” (prev = previous = vorherige Seite)
  • rel="start" steht für: Bezug zur ersten Datei in der „Guided tour” (start = erste Seite)
  • rel="help" steht für: Bezug zum Hilfekontext (help = Hilfe)
  • rel="bookmark" steht für: Bezug zu einem allgemeinen Orientierungspunkt (bookmark = Lesezeichen)
  • rel="stylesheet" steht für: Bezug zu einer Datei mit Style-Definitionen. Diese eine Angabe wird von Netscape und dem MS Internet Explorer tatsächlich interpretiert, und zwar, um Style-Sheets in HTML einzubinden.
  • rel="alternate" steht für: Bezug zu einer Datei mit dem gleichen Inhalt wie der aktuellen, jedoch in einer anderen Dokumentversion (alternate = alternierend). Von diesem Typ können Sie bei Bedarf auch mehrere Befehle notieren.

Aus: SelfHTML8/html/kopfdaten/beziehungen.htm#quellen

Andererseits gibt es Listen mit Link-Typen, die alle mal irgendwie im Gespräch waren (beim W3C) und die von unserem Test-Browser auch klaglos interpretiert wurden.
Eine gute Strategie ist sicherlich, die grundsätzlichsten dieser Tags einzubauen und erst großzügig zu erweitern, wenn ein echter Standard etabliert ist. Verzichten sollte man auf diese Möglichkeit keineswegs – es freut all jene, die es nutzen können, und man selbst ist auf zukünftige Browser-Generationen vorbereitet.

Weiterführende Links:
http://www.subotnik.net/html/link.html
http://matthias.gutfeldt.ch/translation/LINK/addendum.html

Seitenanfang


(c) 2005 e-workers
http://www.e-workers.de/
mailto: info@e-workers.de