Einige Browser wie z.B. Opera bieten eine Menüleiste für logische Verlinkung an
Eine Webseite ist häufig von mehr oder weniger vielen Ressourcen umgeben, wie zum Beispiel Stylesheet-Dateien, Icons, RSS- oder Atom-Feeds, manchmal auch anderssprachige Versionen der gleichen Seite usw. Innerhalb einer Website hat eine gegebene Webseite einen Platz in der Hierarchie. Manchmal gehört sie auch zu einer Serie von Seiten und hat vorhergehende und nächste Nachbarseiten. All diese Ressourcen und die Art der Beziehung zwischen der aktuellen Webseite und einer solchen Ressource können Sie in den Kopfdaten von HTML angeben.
Das hier beschriebene Element für logische Verlinkungen im HTML-Kopfbereich hat nichts mit normalen, anklickbaren Links im Dokumentkörper einer Webseite zu tun. Solche Links werden im Kapitel Hyperlinks beschrieben.
Für jede logische Beziehung notieren Sie ein <link>-Tag im Bereich zwischen <head> und </head>.
<head> <link rel="help" href="/?pagename=help" title="Hilfe"> <!-- ... andere Angaben im Kopfbereich ... --> </head>
Logische Verlinkungen werden durch je ein <link>-Tag im HTML-Kopfbereich markiert.
Mit dem Attribut rel bestimmen Sie den Typ der Verlinkung (link = Verweis, rel = relationship = Verwandtschaft). HTML definiert ein Set möglicher Verlinkungen (mehr dazu weiter unten). Das Attribut href gibt die URL-Adresse der verknüpften Ressource an. Mit dem Attribut title können Sie eine Beschriftung definieren, die verwendet wird, wenn der Browser diese logische Verknüpfung in irgendeiner Form anzeigt.
Wie logische Verknüpfungen vom Browser an der Oberfläche visualisiert werden, ist nicht festgelegt. Letztlich hängt dies auch vom Typ der Verlinkung (rel-Attribut) ab. Bei Links zu übergeordneten Seiten oder Nachbarseiten ist es beispielsweise sinnvoll, dafür entsprechende Schaltflächen anzubieten. Opera und einige andere Browser tun das, andere nicht. Verlinkte Icons werden z.B. in Browser-Tabs vor dem Titel der Seite angezeigt. Bei Links zu Feeds wird in einigen Browsern ein Feed-Symbol rechts in der Adresszeile angezeigt. Verknüpfte Stylesheets werden einfach eingebunden und interpretiert.
Details zur Adressierung, also für Angaben, die Sie im href-Attribut notieren können, werden hier im Handbuch im Abschnitt Referenzierung beschrieben.
(Browser-Angaben hier weggelassen, da nicht sinnvoll entscheidbar)
Linktypen werden durch das Attribut rel bestimmt. HTML5 definiert ein Set möglicher Linktypen.
<link rel="search" href="suche.html" title="Detailsuche"> <link rel="author" href="impressum.html" title="Impressum"> <link rel="help" href="hilfe.html" title="Hilfe"> <link rel="index" href="/index.html" title="HOME"> <link rel="up" href="tour.html" title="Tour-Start"> <link rel="first" href="tour-tag-01.html" title="Erster Tag"> <link rel="last" href="tour-tag-25.html" title="Letzter Tag"> <link rel="next" href="tour-tag-15.html" title="Nächster Tag"> <link rel="prev" href="tour-tag-13.html" title="Vorheriger Tag"> <link rel="prefetch" href="tour-tag-15.html"> <link rel="sidebar" href="verzeichnis.html"> <link rel="tag" href="/?tag=urlaub"> <link rel="alternate" type="application/atom+xml" href="feed.xml" title="Atom-Feed"> <link rel="archives" href="http://meinblog.xy/2009/" title="2009" title="Archiv 2009"> <link rel="icon" href="/favicon.ico" sizes="16x16 32x32" type="image/vnd.microsoft.icon"> <link rel="license" href="http://creativecommons.org/licenses/by-nd/3.0" title="CC-BY-ND"> <link rel="pingback" href="http://www.example.com/pingback/xmlrpc"> <link rel="stylesheet" type="text/css" href="styles-2010-layout.css" title="ICH-AG-Style">
Mit diesem Tag können Sie einen logischen Link zu einer Seite setzen, die eine Suche über die gesamte Website ermöglicht. Das kann z.B. eine projekteigene Seite mit einem Suchformular für Detailsuche sein.
Praxisrelevanz: derzeit gering, da nur sinnvoll, wenn der Browser die Angabe in eine Schaltfläche umsetzt, was derzeit nur bei wenigen Browsern der Fall ist.
Mit diesem Tag können Sie eine Projektseite verlinken, die nähere Angaben zum Autor oder Urheber der aktuellen Seite enthält. Typischerweise ist das eine Impressumseite. Selbstverständlich können Sie aber auch beliebige externe Ziele verlinken, beispielsweise eine Profilseite bei einem Social Network oder bei Google.
Praxisrelevanz: derzeit gering, da nur sinnvoll, wenn der Browser die Angabe in eine Schaltfläche umsetzt, was derzeit nur bei wenigen Browsern der Fall ist.
Mit diesem Tag können Sie ein Ziel verlinken, das Hilfe zur aktuellen Seite anbietet. Das ist beispielsweise sinnvoll, wenn es sich bei der aktuellen Seite um eine Seite innerhalb einer Webanwendung handelt, in der Anwender Eingaben in einem nicht-trivialen Formular machen müssen.
Praxisrelevanz: derzeit gering, da nur sinnvoll, wenn der Browser die Angabe in eine Schaltfläche umsetzt, was derzeit nur bei wenigen Browsern der Fall ist.
Mit diesem Tag verlinken Sie die Startseite oder Übersichtsseite Ihres Webprojekts.
Praxisrelevanz: derzeit gering, da nur sinnvoll, wenn der Browser die Angabe in eine Schaltfläche umsetzt, was derzeit nur bei wenigen Browsern der Fall ist.
Diese Angaben dienen dazu, Verknüpfungen zu übergeordneten Seiten oder zu Seiten einer Serie herzustellen:
<link rel="first"> verlinkt die erste Seite einer Serie.
<link rel="prev"> verlinkt die vorhergehende Seite einer Serie.
<link rel="next"> verlinkt die nächste Seite einer Serie.
<link rel="last"> verlinkt die letzte Seite einer Serie.
<link rel="up"> verlinkt die hierarchisch nächste übergeordnete Seite zur aktuellen Seite.
Praxisrelevanz: derzeit gering, da nur sinnvoll, wenn der Browser die Angaben in entsprechende Schaltflächen umsetzt, was derzeit nur bei wenigen Browsern der Fall ist. Allerdings könnte sich die Praxisrelevanz steigern, falls Browser dazu übergehen, die so verlinkten Ziele mittels Prefetching vorab zu laden. In diesem Fall kann das Notieren solcher Links zur besseren Performance der Website beitragen.
Mit diesem Tag können Sie eine Seite verlinken, bei der es sehr wahrscheinlich ist, dass der Anwender sie als nächstes aufruft. Das ist beispielsweise in einer Serie von Seiten der Fall. Da der Anwender die Serie wahrscheinlich von vorne bis hinten durchblättert, ist die aus Sicht der aktuellen Seite nächste Seite der Serie diejenige, die der Anwender als nächstes aufruft.
Durch das Tag veranlassen Sie den Browser, die Daten der wahrscheinlich als nächstes aufgerufenen Seite bereits zu laden, während die aktuelle Seite angezeigt wird. Ruft der Anwender dann tatsächlich als nächstes die vermutete nächste Seite auf, kann diese schneller oder sogar sofort angezeigt werden, da sie bereits in Teilen oder vollständig geladen wurde.
Praxisrelevanz: derzeit noch gering weil neu in HTML5. Wird jedoch schnell an Bedeutung gewinnen, da Prefetching ein beliebtes Mittel zur Performance-Steigerung bei Websites ist.
Mit diesem Tag können Sie eine Seite angeben, die aus Sicht der aktuellen Webseite einen geeigneten Inhalt für eine sogenannte Sidebar darstellt. Das kann beispielsweise ein Dokument mit einer umfangreichen Navigation sein, oder ein Dokument mit Links zu Referenzinformationen innerhalb einer Dokumentation. Ein Browser, der dieses link-Tag interpretiert, kann das angegebene Dokument automatisch in die Sidebar laden.
Praxisrelevanz: derzeit eher gering. Könnte jedoch an Bedeutung gewinnen, da Sidebars von mehreren bekannten Browser-Produkten unterstützt werden.
Mit diesem Tag können Sie eine Seite verlinken, die Links zu allen Seiten mit einem Tag (tag = Stichwort) enthält, das auch auf die aktuelle Seite anwendbar ist. Diese Funktion ist beispielsweise für Blogs geeignet. Die meisten Blog-Systeme ermöglichen es, Blog-Artikel zu verstichworten. Das Blog-System bietet eine Seite an, die für ein gegebenes Stichwort alle Artikel auflistet, bei denen dieses Stichwort vergeben wurde. Eine solche Seite ist das Ziel für <link rel="tag">. Sie können für jedes Stichwort, das der aktuellen Webseite zugeordnet ist, ein solches Tag notieren.
Praxisrelevanz: derzeit gering, da nur sinnvoll, wenn der Browser die Angaben in entsprechende Schaltflächen umsetzt, was derzeit nur bei wenigen Browsern der Fall ist.
Mit diesem Tag können Sie eine alternative Präsentationsform der aktuellen Seite verlinken. Verwendet wird dieses Tag, um etwa innerhalb eines Blogs einen zugehörigen RSS- oder Atom-Feed zu verlinken. Da es sich dabei um XML-Dokumente handelt, sollten Sie auf jeden Fall das type-Attribut angeben. Für RSS-Feeds lautet der MimeType application/rss+xml, und für Atom-Feeds application/atom+xml. Weitere Informationen über MimeTypen finden Sie im Referenz- Anhang dieses Buches.
Praxisrelevanz: hoch, da es sich um den üblichen Weg handelt, um das Vorhandensein eines Feeds zu signalisieren. Wird von den meisten Browsern umgesetzt, indem rechts außen in der URL-Adresszeile ein Feedsymbol eingeblendet wird. Bei Anklicken bietet der Browser dem Anwender eine Möglichkeit an, den Feed anzuzeigen oder zu abonnieren.
Mit diesem Tag können Sie auf eine Seite verlinken, die aus Sicht der aktuellen Seite ein Archiv enthält. Blog-Seiten beispielsweise können auf diese Weise eine Verknüpfung zum Archiv früherer Blog-Artikel herstellen. Wenn jeder je gespeicherte Zustand einer Webseite aufbewahrt wird (Versionensystem), können Sie mit diesem Tag auf die Übersicht bisheriger Versionen der Seite verlinken.
Praxisrelevanz: derzeit gering, da nur sinnvoll, wenn der Browser die Angaben in entsprechende Schaltflächen umsetzt, was derzeit nur bei wenigen Browsern der Fall ist.
Mit diesem Tag können Sie der aktuellen Webseite ein sogenanntes Favicon zuordnen. Favicons sind Minigrafiken, die in den meisten Browsern beispielsweise in der Titelleiste oder bei Tabs angezeigt werden, oder beim Bookmarken der Seite. Auch wenn es nur kleine Grafiken sind, haben sie eine wichtige Bedeutung. Sie zeigen dem Anwender intuitiv an, zu welchem Webprojekt eine Seite gehört. Da viele Anwender in ihren Browsern häufig viele Seiten verschiedener Anbieter gleichzeitig geöffnet haben, ist das Favicon ein wichtiges Erkennungsmerkmal.
Bei diesem Tag ist ein zusätzliches Attribut sizes= erlaubt. Damit können Sie darstellbare Pixelgrößen von hinterlegten Icons angeben. Typisch sind Angaben wie "16x16" oder "32x32". Wenn ein Icon in beiden Größen anzeigbar ist, können Sie wie im obigen Beispiel auch beide Angaben notieren, durch Leerraum getrennt.
Ferner sollten Sie bei diesem Tag unbedingt den MimeType der verknüpften Icon-Grafik in Form des type-Attributs angeben. Das übliche Format solcher Grafiken ist das ICO-Format von Microsoft. Der offizielle MimeType dafür lautet image/vnd.microsoft.icon. Verbreitet ist aber auch die Angabe image/x-icon.
Praxisrelevanz: hoch, da eine der üblichen Methoden, um eine Icongrafik zuzuordnen. Die andere, ursprünglich von Microsoft eingeführte Methode besteht darin, im Webroot-Verzeichnis eine Grafik mit dem festen Dateinamen favicon.ico zu platzieren. In diesem Fall ist kein explizites link-Element erforderlich.
Mit diesem Tag können Sie die aktuelle Webseite mit einer Seite verknüpfen, die Angaben zu Nutzungsrechten für die Inhalte der aktuellen Seite enthält. Wenn Sie eine standardisierte Nutzungsrechtsform wie die sogenannten CreativeCommons-Lizenzen verwenden, können Sie auf die dort definierten Lizenz-URLs verlinken.
Praxisrelevanz: derzeit gering, da nur sinnvoll, wenn der Browser die Angabe in eine Schaltfläche oder anderweitig sichtbare Form umsetzt, was derzeit nur bei wenigen Browsern der Fall ist.
CreativeCommons ist eine gemeinnützige Gesellschaft, die allgemein gehaltene Lizenzformen für Nutzungsrechte an Texten und multimedialen Inhalten herausgibt. CC bietet sechs klassische Lizenzformen an. Alle Lizenzformen haben eigene URL-Adressen, die Sie unter anderem auch bei <link rel="license"> angeben können. Von jeder Lizenzform gibt es eine allgemeine, international formulierte Version (unported), und eine, die auf juristische Eigentümlichkeiten eines bestimmten Staates zugeschnitten sind (ported). Details entnehmen Sie den Inhalten auf den jeweiligen URL-Adressen:
Mit diesem Tag können Sie die Webadresse eines Pingback-Servers angeben. Sinnvoll ist das, wenn die aktuelle Webseite Teil einer Webanwendung ist, die Pingback-Nachrichten verarbeiten kann. Bei Blogsoftware ist das in aller Regel der Fall. Der Pingback-Server sendet der Blogsoftware automatisch eine Nachricht in einem speziellen XML-Format, sobald eine andere Website, die bei neuen Inhalten Pings an Pingserver versendet, einen Link auf die aktuelle Seite enthält. Die Blogsoftware kann in diesem Fall dafür sorgen, dass die verlinkende Seite des Fremdanbieters z.B. unter dem Blogartikel der aktuellen Seite automatisch angezeigt wird.
Praxisrelevanz: bei entsprechenden Blogsoftware-Systemen hoch, da ein üblicher Weg, um Pingback-Funktionalität zu ermöglichen.
Mit diesem Tag können Sie eine externe Stylesheet-Datei verknüpfen. Der Browser bindet das Stylesheet dann beim Aufruf der aktuellen Webseite mit ein. Die darin enthaltenen Style-Definitionen werden interpretiert und beeinflussen das Aussehen der Webseite.
Geben Sie bei diesem Tag unbedingt mit dem type-Attribut den korrekten MimeType an. Für CSS-Stylesheets lautet die entsprechende Angabe type="text/css". Auch die Angabe eines title-Attributs ist beim Einbinden von Stylesheets sinnvoll, da einige Browser via Menü das Umschalten zwischen Anbieter-Stylesheet und einem Anwender-Stylesheet ermöglichen. Der vergebene Titel kann für den Menüeintrag des Anbieter-Stylesheets verwendet werden.
Praxisrelevanz: hoch, da einer von zwei möglichen Wegen, externe Stylesheets einzubinden. Da größere Stylesheets üblicherweise in separaten Style-Dateien vorgehalten werden, ist dieses Tag eine der häufigsten, wenn nicht sogar die bekannteste Anwendung des link-Elements in der Praxis.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.