HTML/Kopfdaten/link

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieser Artikel behandelt das HTML-Element link. Für die Pseudoklasse :link siehe CSS/Selektoren/Pseudoklasse/link, visited.

Mit link-Elementen können Sie festlegen, wie Ihr Dokument zu anderen in Beziehung steht.

Inhaltsverzeichnis

[Bearbeiten] Beziehungen zu anderen Quellen definieren

  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0

Eine der besonderen Stärken von HTML besteht darin, Beziehungen zwischen Dateien zu beschreiben. Dafür stellt HTML zwei Möglichkeiten zur Verfügung: Zum einen Hyperlinks, mit denen von einer Datei aus eine andere, z.B. per Mausklick, aufgerufen werden kann. Solche Verweise werden unter HTML/Textauszeichnung/a beschrieben. Hier geht es aber um die andere Möglichkeit, nämlich das link-Element, das auf eher abstrakte Weise beschreibt, dass zwischen dem aktuellen Dokument und einem anderen eine Beziehung besteht, und um welche Art von Beziehung es sich dabei handelt.

Das link-Element besitzt üblicherweise folgende Attribute

  • href: Ziel einer Beziehung
    Das href-Attribut (href = hyper reference = Hyper(text)-Referenz) gibt an, welches andere Dokument in Bezug zum aktuellen steht. Als Wert wird ein gültiger URI erwartet.
  • media: auf Ausgabemedien reagieren
  • rel: Typ einer Beziehung
    Dieses Attribut bestimmt die Art einer Beziehung (rel = relation = Bezug). Hierfür ist eine Reihe von Attributwerten fest definiert.
  • type: MIME-Type der einzubindenden Ressource
    Das type-Attribut gibt dem Browser einen Hinweis, welchen MIME-Type die verlinkte Ressource (z.B. CSS, Bilder, JavaScript) hat. Er kann daraufhin entscheiden, sich das Laden der Ressource zu sparen, wenn er diesen Typ nicht unterstützt. Ansonsten befindet sich der MIME-Type einer Ressource in ihrem HTTP-Header in einer Zeile namens Content-Type.

[Bearbeiten] Stylesheets einbinden

Beispiel: link-Elemente in HTML
<link rel="stylesheet" href="selfhtml.css" type="text/css">
Beispiel: link-Elemente in xHTML
<link rel="stylesheet" href="selfhtml.css" type="text/css" />

Das obige Beispiel bindet ein externes Stylesheet in das aktuelle Dokument ein. Stylesheets definieren das Aussehen eines Dokuments, z.B. die Schriftart, Hintergrundfarben usw. Wenn Sie sich mit einer Office-Textverarbeitung auskennen, wird Sie das an Formatvorlagen erinnern. Stylesheets werden innerhalb von SelfHTML in einer eigenen Dokumentation behandelt. Ein externes Stylesheet kann in beliebig vielen Ressourcen verwendet werden.

Es dürfen auch mehrere Stylesheetangaben gemacht werden. Lesen Sie hierzu CSS/Kaskade.

[Bearbeiten] Favicon angeben

Beispiel
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">

Ein Favicon ist eine nützliche kleine Spielerei, die in der Adresszeile des Browsers ein kleines Bildchen anzeigt. Auch an anderen Stellen, z.B. in Browsertabs oder bei Lesezeichen, wird dieses Bildchen angezeigt.

Das Favicon selbst ist eine kleine Grafik, die im Windows-Icon-Format (Dateien *.ico) vorliegen und eine Größe von 16x16 Pixeln haben sollte. Um solche Grafiken zu erstellen, benötigen Sie ein Grafikprogramm, das Grafiken im ICO-Format abspeichern kann.

Der offizielle MIME-Type lautet image/vnd.microsoft.icon, allerdings waren oder sind auch image/ico, image/icon, text/ico oder application/ico zusammen mit dem inoffiziellen Namen image/x-icon in Verwendung.

[Bearbeiten] Das sizes-Attribut

Mi dem sizes-Attribut können Sie einem Icon eine bestimmte Größe zuweisen.

Beispiel
<link rel="icon" href="favicon.ico" sizes="16x16" type="image/vnd.microsoft.icon">
Beachten Sie: Um sizes benutzen zu können, müssen sie rel="icon" definiert haben.

[Bearbeiten] auf Ausgabemedien reagieren

Mit dem media-Attribut können Sie festlegen, dass etwa Stylesheets nur für bestimmte Ausgabemedien geladen werden sollen.

Als Wert können Sie

verwenden und diese auch miteinander verknüpfen.

Im Artikel Media Queries wird dies näher erläutert.

[Bearbeiten] Logische Beziehungen festlegen

Mit den folgenden Attributwerten für rel können die hypertextuellen Abhängigkeiten einer HTML-Datei dargestellt werden, etwa die vorherige und nächste Seite, die übergeordnete Seite usw. Suchdienste oder Software-Programme können dann beispielsweise ganze „Site-Maps“ Ihres Projekts erstellen, also grafische Darstellungen der Seitenstruktur.

Leider werden diese Möglichkeiten von den gängigen Browsern nicht direkt unterstützt. Browser sollten, wenn sie solche Elemente in einer HTML-Datei vorfinden, eine Button-oder Menü-Leiste oder vergleichbare Bedienelemente anzeigen. Mit dem Anklicken der Buttons sollte der Anwender dann Sprungverweise zu den verknüpften Verweiszielen ausführen. Microsoft ist bis heute nicht auf diese sinnvollen Navigations-Vorschläge eingegangen, andere Browser blenden auf Wunsch - aber nicht als Voreinstellung - eine Leiste ein. Für Firefox gibt es entsprechende Erweiterungen.

Das folgende Beispiel zeigt ein Set solcher logischen Beziehungen:

Beispiel
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm"> <link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm"> <link rel="help" title="Hilfe" href="../../editorial/index.htm"> <link rel="search" title="Suche" href="../../navigation/suche/index.htm"> <link rel="top" title="SELFHTML" href="../../index.htm"> <link rel="up" title="HTML-Kopfdaten" href="index.htm"> <link rel="next" title="Durchsuchbarkeit mit Server-Kommunikation" href="durchsuchbarkeit.htm"> <link rel="prev" title="Adressbasis und Zielfensterbasis" href="basis.htm"> <link rel="first" title="Titel einer HTML-Datei" href="titel.htm"> <link rel="last" title="Durchsuchbarkeit mit Server-Kommunikation" href="durchsuchbarkeit.htm">

Die HTML-Spezifikation führt folgende logischen Beziehungen auf:

  • contents: Bezug zum Inhaltsverzeichnis (contents = Inhaltsverzeichnis)
  • chapter: Bezug zum Kapitel (chapter = Kapitel)
  • section: Bezug zum Abschnitt (section = Abschnitt)
  • subsection: Bezug zum Unterabschnitt (subsection = Unterabschnitt)
  • index: Bezug zum Stichwortverzeichnis
  • glossary: Bezug zum Glossar
  • appendix: Bezug zum Anhang (appendix = Anhang)
  • copyright: Bezug zur Copyright-Angabe
  • next: Bezug zur nächsten Datei in der „Guided tour“ (next = nächste Seite)
  • prev: Bezug zur vorherigen Datei in der „Guided tour“ (prev = previous = vorherige Seite)
  • start: Bezug zur Startseite
  • help: Bezug zum Hilfekontext (help = Hilfe)
  • bookmark: Bezug zu einem allgemeinen Orientierungspunkt (bookmark = Lesezeichen)
  • alternate: Bezug zu einer Datei mit dem gleichen Inhalt wie der aktuellen, jedoch in einer anderen Dokumentversion (alternate = alternatives, anderes [Dokument])

Es ist ausdrücklich erlaubt, weitere Werte zu definieren. Natürlich sollte man hier aber nicht seiner Fantasie freien Lauf lassen - schließlich müssen die Angaben ja von einer Software verstanden werden. Das trifft auf folgende Angaben zu:

  • first: Bezug zur ersten Datei in der „Guided tour“ (first = erste Seite)
  • last: Bezug zur letzten Datei in der „Guided tour“ (last= letzte Seite)
  • up: Bezug zur übergeordneten Kapitelseite
  • search: Bezug zur Suchfunktion
  • bookmark: Bezug zu einem allgemeinen Orientierungspunkt (bookmark = Lesezeichen)
  • author: Bezug zum Autor

Von link-Elementen mit den Attributwerten chapter, section, subsection, appendix, bookmark und alternate können Sie bei Bedarf auch mehrere notieren.

Beachten Sie: Firefox versucht in seinen Standardeinstellungen, eine mit „next“ (oder dem für ihn synonymen „prefetch“) dargestellte Link-Beziehung schon im Hintergrund zu laden, um sie bei Bedarf schneller anzeigen zu können. Für Seitenbesucher, die ihre Internetgebühr noch volumenabhängig bezahlen, ist dieses Verhalten eher ärgerlich - möglicherweise gehen sie ja doch nicht zur nächsten Seite.

[Bearbeiten] Logische Rückbeziehungen festlegen

  • Achtung

Rückbeziehungen sind für „bidirektionale“ Beziehungen zweier HTML-Dateien gedacht. Das ist der Fall, wenn sowohl Datei A auf Datei B verweist als auch Datei B auf Datei A, wenn also beide logisch gesehen ein sinnvolles Verweisziel von der jeweils anderen sind.

Beispiel: datei_1.html
<link rel="alternate" href="datei_2.html" title="zweite Lesart">
Beispiel: datei_2.html
<link rev="alternate" href="datei_1.html" title="erste Lesart">

Mit dem Attribut rev leiten Sie eine Rückbeziehung ein (rev = reverse = Umkehr). Ansonsten ist die Funktionalität identisch mit rel für #logische Beziehungen zu anderen Quellen. Das obige Beispiel zeigt, wie zwei HTML-Dateien, deren angenommener Inhalt zwei verschiedene Betrachtungsweisen ein und derselben Sache behandelt, durch Rückbeziehungen logisch miteinander verknüpft werden.

Ebenso wie logische Beziehungen zu anderen Dateien sollten Rückbeziehungen als Buttons oder in vergleichbarer Form dargestellt werden. Die verbreiteten Browser bleiben hierbei allerdings stumm. Suchmaschinen könnten aus Rückbeziehungsangaben interessante Schlüsse über die Hypertext-Struktur eines Projekts ziehen.

Beachten Sie: In HTML5 wird dieses Attribut entfallen.

Für logische Beziehungen und Rückbeziehungen kann mit dem Attribut title eine Beschriftung definiert werden, die der Browser für die Verweis-Buttons verwenden soll. Die Angabe sollte das Verknüpfungsziel bezeichnen. Es obliegt aber dem Browser, ob er das so nutzt.

[Bearbeiten] Siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke