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/any-link, 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:

[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, bei Lesezeichen oder für Touch-Icons auf mobilen Geräten wird dieses Bildchen angezeigt.

→ Hauptartikel: Grafik/Favicon

[Bearbeiten] Das sizes-Attribut

Mit 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="canonical" title="weiterleitung" href="../neue-seite.html">
<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:

  • canonical: Bezug zur primären Ressource, also der, die von den Suchmaschinen indiziert werden soll (canonical = vorschriftsmäßig, der Regel entsprechend)
  • 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] kanonische Links

Gerade bei größeren Projekten gibt es immer wieder Webseiten, die unter mehreren URL erreicht werden. Beispielsweise sind sie neben ihrer durch das CMS erzeugten URL unter einem sprechenden Link erreichbar oder ein Shopsystem liefert dieselbe Seite unter mehrereren URLs, etwa mit verschiedenen Paramtern aus. Mithilfe eines kanonischen Links (kanonisch = der Regel entsprechend) können Sie den Suchmaschinen mitteilen, welches die richtige Seite ist.

Suchmaschinen, die kanonische Links unterstützen, werden in ihren Ergebnisseiten nur diejenige Seite aufführen, die Sie festgelegt haben. Geben Sie dazu in den Seiten, die nicht indiziert werden sollen, den Pfad zur Primärressource an. Google empfiehlt die Verwendung absoluter Pfade.[1]

Beispiel
<link rel="canonical" href="https://example.com/content.html">
In diesem Wiki liefern etwa die Seiten meta und HTML/Kopfdaten/meta praktisch dieselben Inhalte, wobei meta eine Wiki-interne Weiterleitung darstellt. Im Kopf der Seite meta findet man deshalb <link rel="canonical" href="/wiki/HTML/Kopfdaten/meta" />.

Das Attribut wurde von Suchmaschinenbetreibern wie Google im Jahr 2009 eingeführt, um es ihren Bots und Webcrawlern zu erleichtern, die Primärressource sicher zu erkennen. Das W3C hat bereits in der Spezifikation von HTML 4.01 das rel-Attribut ausdrücklich für die Nutzung durch Suchmaschinen vorgesehen.[2] Deshalb ist auch der Wert „canonical“ durch das W3C nicht spezifiziert worden.

[Bearbeiten] Logische Rückbeziehungen festlegen

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.

  • Achtung
Beachten Sie:
In HTML5 ist dieses Attribut entfallen.
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.

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] Quellen

  1. support.google.com: Kanonische URLs verwenden
  2. W3C: HTML 4.01 12.3.3

[Bearbeiten] Siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML