Link-Relationen und Link-Elemente im HTML5
HTML5 teilt Link-Relationen in zwei Kategorien ein
Gewöhnliche Links (<a href>) zeigen einfach auf eine andere Seite. Link-Relationen sind ein Mittel, zu erläutern, warum Sie auf eine andere Seite verweisen. Sie beenden den Satz: Ich verweise auf diese andere Seite, weil ...
- ... sie ein Stylesheet mit CSS-Regeln ist, die Ihr Browser auf dieses Dokument anwenden soll.
- ... sie ein Feed ist, der den gleichen Inhalt wie diese Seite in einem standardkonformen, abonnierbaren Format enthält.
- ... sie eine Übersetzung dieser Seite in eine andere Sprache ist.
- ... sie das Gleiche beinhaltet wie diese Seite, aber im PDF-Format.
- ... weil sie das nächste Kapitel eines Onlinebuchs ist, zu dem auch diese Seite gehört.
Und so weiter. HTML5 teilt Link-Relationen in zwei Kategorien ein:
Zwei Kategorien von Links können mit dem Link-Element erstellt werden. Links auf externe Ressourcen sind Links auf Ressourcen, die genutzt werden, um das aktuelle Dokument zu bereichern, und Hyperlink-Links sind Links auf andere Dokumente. [...]
Das genaue Verhalten von Links auf externe Ressourcen hängt von der spezifischen Beziehung ab, die für den entsprechenden Linktyp definiert ist.
Von den Beispielen, die ich Ihnen gegeben hatte, ist nur das erste (rel="stylesheet") ein Link auf eine externe Ressource. Der Rest sind Hyperlinks auf andere Dokumente. Wenn Sie wollen, können Sie diesen Links folgen oder auch nicht. Aber sie sind nicht erforderlich, um die aktuelle Seite zu betrachten.
Link-Relationen tauchen am häufigsten in <link>-Elementen im <head>-Element einer Seite auf. Einige Link-Relationen können auch auf <a>-Elementen genutzt werden, aber selbst wenn das erlaubt ist, ist es nicht sehr üblich. HTML5 gestattet ebenfalls einige Relationen auf <area>-Elementen, aber das ist sogar noch weniger üblich. (HTML 4 gestattete keine rel-Attribute auf <area>-Elementen.).
rel = stylesheet
Schauen wir uns die erste Link-Relation in unserer Beispielseite an:
<link rel="stylesheet" href="style-original.css" type="text/css" />
Das ist die am häufigsten genutzte Link-Relation auf der Welt (buchstäblich). <link rel="stylesheet"> dient dazu, auf CSS-Regeln zu verweisen, die in einer eigenen Datei gespeichert sind. Eine kleine Optimierung, die Sie in HTML5 vornehmen können, ist, das type-Attribut wegzulassen. Es gibt nur eine Stylesheet-Sprache für das Web, CSS, das ist deswegen der Standardwert für das type-Attribut:
<link rel="stylesheet" href="style-original.css" />
Das funktioniert in allen Browsern. (Vielleicht erfindet jemand irgendwann eine neuen Stylesheet-Sprache. Aber wenn das passiert, können Sie das type-Attribut einfach wieder einfügen.)
rel = alternate
Fahren wir mit unserer Beispielseite fort:
<link rel="alternate" type="application/atom+xml" title="HTML5 Lernen - Grundlagen und Tutorials feed" href="/feed/" />
Auch diese Link-Relation ist recht häufig. <link rel="alternate"> in Kombination mit dem RSS- oder Atom-Medientyp im type-Attribut aktiviert die sogenannte "automatische Feederkennung". Sie ermöglicht Feedreadern wie dem Google Reader, zu erkennen, dass die Site einen Newsfeed mit den neuesten Artikeln hat. Die meisten Browser unterstützen die automatische Feederkennung zusätzlich damit, dass sie ein spezielles Symbol neben der URL anzeigen. (Anders als bei rel="stylesheet" ist das type-Attribut hier relevant. Lassen Sie es nicht weg!)
Die Link-Relation rel="alternate" war schon in HTML 4 ein seltsamer Zwitter von Anwendungsfällen. In HTML5 wurde ihre Definition klarer gemacht und erweitert, um bestehende Webinhalte präziser zu beschreiben. Wie Sie gerade sahen, zeigt die Verbindung von rel="alternate" und type=application/atom+xml einen Atom-Feed für die aktuelle Seite an. Aber Sie können rel="alternate" gemeinsam mit anderen type-Attributen nutzen, um Inhalte in anderen Formaten wie PDF anzuzeigen.
HTML5 legt auch eine weitere lang währende Verwirrung über Links auf Übersetzungen von Dokumenten bei. HTML 4 sagt, dass das lang-Attribut gemeinsam mit rel="alternate" angegeben werden muss, um die Sprache des verlinkten Dokuments anzugeben, aber das ist falsch. Die HTML 4-Errata-Liste führt unumwunden vier Fehler in der HTML 4-Spezifikation (mit anderen editorischen Kleinigkeiten) auf. Einer dieser Fehler betrifft die Angabe der Sprache eines mit rel="alternate" eingebundenen Dokuments. (Das richtige Verfahren, das im HTML 4-Errata-Dokument und jetzt in HTML5 beschrieben wird, ist die Verwendung des Attributs hreflang.) Unglücklicherweise wurden diese Errata nie rückwirkend in die HTML 4-Spezifikation eingebaut, weil niemand in der W3C HTML Working Group mehr an HTML arbeitete.
Andere Link-Relationen in HTML5
Wir haben noch andere Link-Relationen in HTML5 die wichtig sind. Die anderen Link-Relationen sind ebenfalls mit einer Beschreibung versehen.
rel="archives"
"zeigt an, dass das angegebene Dokument eine Sammlung von Datensätzen, Dokumenten oder anderem Material von historischem Interesse ist. Die Indexseite eines Blogs könnte auf einen Index der vergangenen Blog-Einträge mit rel="archives" verweisen."
rel="author"
wird genutzt, um Informationen zum Autor der Seite anzugeben. Das kann eine mailto:-Adresse sein, muss es aber nicht. Es könnte auch einfach auf ein Kontaktformular oder eine "Über mich"-Seite verweisen.
rel="external"
"zeigt an, dass der Link auf ein Dokument zeigt, das nicht Teil der Site ist, zu der das aktuelle Dokument gehört." Ich glaube, es wurde zuerst durch WordPress populär gemacht, das es für Links verwendet, die in Kommentaren hinterlassen werden.
rel="start", rel="prev" und rel="next"
werden genutzt, um Relationen zwischen Seiten zu definieren, die Teil einer Serie sind (wie die Kapitel eines Buchs oder auch die Einträge eines Blogs). Das Einzige davon, das je korrekt genutzt wurde, ist rel="next". Man nutzte rel="previous" statt rel="prev"; man nutzte rel="begin" und rel="first" statt rel="start"; man nutzte rel="end" statt rel="last". Und dann dachte man sich auch noch rel="up" aus, um auf eine "Elternseite" zu verweisen.
HTML5 schließt rel="first" ein, das am häufigsten verwendet wurde, um auf die "erste Seite einer Reihe" zu verweisen (rel="start" ist ein nicht standardkonformes Synonym, das die Rückwärtskompatibilität gewährleisten soll). Es schließt wie HTML 4 rel="prev" und rel="next" ein (und unterstützt rel="previous" im Dienste der Rückwärtskompatibilität) und auch rel="last" (das Letzte in einer Reihe und passende Gegenstück zu rel="first") und rel="up".
Am einfachsten machen Sie sich die Bedeutung von rel="up" klar, wenn Sie sich die Wegweiser in Ihrer Site-Navigation vor Augen führen (oder zumindest vorstellen). Ihre Homepage ist wahrscheinlich die erste Seite unter Ihren Wegweisern und die aktuelle Seite die letzte. rel="up" weist auf die vorletzte Seite unter Ihren Wegweisern.
rel="icon"
ist die zweitbeliebteste Link-Relation nach rel="stylesheet". Üblicherweise wird sie mit shortcut kombiniert, wie hier:
<link rel="shortcut icon" href="/favicon.ico">
Alle wichtigeren Browser unterstützen diese Verwendung, um ein kleines Symbol mit der Seite zu verbinden. Üblicherweise wird es in der Adressleiste des Browsers neben der URL angezeigt oder im Browser-Tab oder in beidem.
Ebenfalls neu in HTML5: Das sizes-Attribut kann gemeinsam mit der icon-Relation genutzt werden, um die Größe des referenzierten Symbols anzuzeigen.
rel="license"
wurde von der Mikroformat-Gemeinschaft erfunden. Es "zeigt an, dass das referenzierte Dokument die Copyright-Lizenzbedingungen angibt, unter der das aktuelle Dokument bereitgestellt wird".
rel="nofollow"
"zeigt an, dass der Link vom ursprünglichen Autor oder Herausgeber der Seite nicht befürwortet wird oder dass der Link auf das referenzierte Dokument im Wesentlichen auf einer kommerziellen Beziehung zwischen den Urhebern der beiden Seiten beruht." Sie wurde von Google erfunden und in der Mikroformat-Gemeinschaft standardisiert. Die Überlegung war, dass Spammer es aufgeben würden, Spam-Kommentare in Blogs zu hinterlassen, wenn nofollow-Links keinen Einfluss auf das Seiten-Ranking haben. Das geschah nicht. Aber rel="nofollow" blieb. Viele beliebte Blogging-Systeme hängen an Links in Kommentaren standardmäßig rel="nofollow" an.
rel="noreferrer"
"zeigt an, dass keine Referrer-Daten weitergegeben werden sollen, wenn dem Link gefolgt wird." Das wird von keinem der aktuell veröffentlichten Browser unterstützt, wurde aber in aktuelle WebKit-Nightlies eingebaut und wird irgendwann in Safari, Google Chrome und anderen WebKit-basierten Browsern auftauchen.
rel="pingback"
gibt die Adresse eines "Pingback-Servers" an. Wie in der Pingback-Spezifikation steht: "Das Pingback-System ist ein Mittel, Blogs automatisch zu benachrichtigen, wenn andere Websites auf es verlinken [...] Es ermöglicht umgekehrtes Linking – eine Möglichkeit, in einer Kette von Links wieder nach oben zu steigen, statt einfach in ihr abzusteigen." Blogging-Systeme, insbesondere WordPress, implementieren den Pingback-Mechanismus, um Autoren zu benachrichtigen, dass Sie auf sie verlinkt haben, als Sie einen neuen Blog-Eintrag erstellten.
rel="prefetch"
"zeigt an, dass es vorteilhaft sein kann, die angegebene Ressource vorab abzurufen und zu cachen, da es äußerst wahrscheinlich ist, dass der Benutzer sie benötigt." Suchmaschinen fügen Suchergebnissen <link rel="prefetch" href="<emphasis>URL OF TOP SEARCH RESULT</emphasis>"> hinzu, wenn sie meinen, dass das Topergebnis erheblich populärer ist als alle anderen. Ein Beispiel: Nehmen Sie Firefox, suchen Sie mit Google nach CNN, schauen Sie sich den Quelltext der Seite an und suchen Sie nach dem Schlüsselwort prefetch.
rel="search"
"zeigt an, dass das referenzierte Dokument eine Schnittstelle bietet, die speziell dem Durchsuchen des Dokuments und verwandter Ressourcen dient." Genauer gesagt, wenn rel="search" etwas Nützliches tun soll, sollte es auf ein OpenSearch-Dokument verweisen, das beschreibt, wie ein Browser eine URL aufbauen muss, um die aktuelle Site nach einem bestimmten Suchwort zu durchsuchen. OpenSearch (und rel="search"-Links, die auf OpenSearch-Beschreibungsdokumente verweisen) wird von Microsoft Internet Explorer seit Version 7 und von Mozilla Firefox seit Version 2 unterstützt.
rel="sidebar"
"zeigt an, dass das referenzierte Dokument, wenn es abgerufen wird, in einem sekundären Browsing-Kontext angezeigt werden soll (wenn möglich) statt im aktuellen Browsing-Kontext." Was bedeutet das? In Opera und Mozilla Firefox bedeutet es: "Wenn ich auf diesen Link klicke, werde ich aufgefordert, ein Lesezeichen anzulegen, das, wenn es im Lesezeichen-Menü angewählt wird, das verlinkte Dokument in einer Browser-Sidebar anzeigt." (Opera nennt es "Panel" statt "Sidebar".) Internet Explorer, Safari und Chrome ignorieren rel="sidebar" und behandeln es als gewöhnlichen Link.
rel="tag"
"zeigt an, dass das Tag, das das referenzierte Dokument repräsentiert, für das aktuelle Dokument gilt." Die Auszeichnung von "Tags" (Kategorie-Schlüsselwörtern) mit dem rel-Attribut wurde von Technorati erfunden, um die Kategorisierung von Blog-Einträgen zu vereinfachen. Frühe Blogs und Tutorials bezeichneten sie deswegen als "Technorati-Tags". (Das haben Sie richtig verstanden: Ein kommerzielles Unternehmen hat die gesamte Welt davon überzeugt, Metadaten zu verwenden, die ihm das Leben erleichtern. Gute Arbeit, wenn man so etwas schafft!) Die Syntax wurde später in der Mikroformat-Gemeinschaft standardisiert, wo sie einfach zu rel="tag" wurde. Die meisten Blog-Systeme, die es ermöglichen, Kategorien, Schlüsselwörter oder Tags mit individuellen Einträgen zu versehen, zeichnen sie mit rel="tag"-Links aus. Browser machen nichts Spezielles damit; eigentlich sollen sie Suchmaschinen signalisieren, worum es in der Seite geht.