HTML/Elemente/link

Aus SELFHTML-Wiki
< HTML‎ | Elemente(Weitergeleitet von Link)
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels ist mehrdeutig.



Das link-Element beschreibt auf eher abstrakte Weise, dass zwischen dem aktuellen Dokument und einem anderen eine Beziehung besteht, und um welche Art von Beziehung es sich dabei handelt.

Beispiel 
<html lang="de">
  <head>
    <link rel="stylesheet" href="example.css">
    <link rel="start" href="https://wiki.selfhtml.org/wiki/HTML" title="HTML-Dokumentation">
    <link rel="icon" href="favicon.ico" sizes="16x16" type="image/vnd.microsoft.icon">
    <title>Exemplarische Kopfdaten</title>
  </head>
Eine der besonderen Stärken von HTML besteht darin, Beziehungen zwischen Dateien zu beschreiben. Dafür stellt HTML zwei Möglichkeiten zur Verfügung:
  1. Zum einen Hyperlinks, mit denen von einer Datei aus eine andere, z. B. per Mausklick, aufgerufen werden kann. Solche Verweise werden unter HTML/Elemente/a beschrieben.
  2. Hier geht es aber um die andere Möglichkeit, nämlich das link-Element.


Siehe auch

Weblinks

Spec (WHATWG): link-element

Syntax Start-Tag: notwendig
End-Tag: notwendig 
<link>…</link>
WAI-ARIA-Rolle
  • keine
Elternelemente Darf vorkommen in:
erlaubte Inhalte

keine, leeres Element

Browsersupport Details: {{{caniuse}}}
Attribute
Name Inhalt Standardwert Bedeutung
Universalattribute
id ID identifiziert ein einziges Element innerhalb eines Dokuments
class CDATA ordnet ein Element einer oder mehreren Klassen zu.
accesskey ID Tastaturkürzel
contenteditable CDATA editierbarer Inhalt
contextmenu definiert Kontextmenü
dir ltr, rtl definiert die Schreibrichtung innerhalb des Dokuments
draggable ID kann mit Drag & Drop gezogen werden
dropzone CDATA Aktion bei Ablegen
hidden versteckter Inhalt
lang NAME legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
spellcheck ID Rechtschreibprüfung
style CDATA notiert direkt in einem Element- style sheet data
tabindex NAME zeigt an, ob dieses Element fokusiert werden kann, ob es mithilfe der Tastaturnavigation angesteuert werden kann und in welcher Reihenfolge navigiert wird.
title CDATA betitelt oder beschreibt ein Element.
crossorigin anonymous, use-credentials Attribut legt fest, wie das Element crossorigin-Requests (CORS) handelt.
href CDATA Bestimmt die URI-Adresse der Ressource die mit dem Dokument verbunden wird.
hreflang NAME gibt den Sprachcode, wie in RFC1766 festgelegt, der verbundenen Ressource an.
media CDATA komma-getrennte Liste, die das Medium der verbundenen Ressource bestimmt.
rel CDATA Bestimmt die Beziehung von dem verbundenen Dokument zu dem aktuellen Dokument. Eine durch Leerzeichen getrennte Liste von Linkarten.
sizes CDATA Dieses Attribut wird mit dem Icon-Link-Typ verwendet. Das Attribut muss nicht verwendet werden, wenn das rel-Attribut nicht das Schlüsselwort Icon angibt.
type CDATA text/css Bestimmt den MIME-Typen der verbundenen Ressource.

Attribut: Pflichtattribut
Attribut: optionales Attribut

Grundstruktur

Stylesheets einbinden[Bearbeiten]

link-Elemente in HTML
<link rel="stylesheet" href="selfhtml.css">
link-Elemente in xHTML
<link rel="stylesheet" href="selfhtml.css" />
Bei xml-konformer Schreibweise (wie z. B. in XHTML) benötigt das link-Tag den schließenden Schrägstrich (/).

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:

Favicon angeben[Bearbeiten]

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

Das sizes-Attribut[Bearbeiten]

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.

auf Ausgabemedien reagieren[Bearbeiten]

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.

Logische Beziehungen festlegen[Bearbeiten]

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.

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.

Hinweis

Leider werden diese Möglichkeiten von den gängigen Browsern nicht mehr unterstützt. Angaben von logischen Beziehungen werden einfach ignoriert.

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="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:

  • alternate: Bezug zu einer Datei mit dem gleichen Inhalt wie der aktuellen, jedoch in einer anderen Dokumentversion (alternate = alternatives, anderes [Dokument])
  • author: Gibt einen Link zum Verfasser des aktuellen Dokuments oder Artikels
  • help: Bietet einen Link zur kontextsensitiven Hilfe.
  • icon: Importiert ein Symbol, um das aktuelle Dokument darzustellen.
  • license: Gibt an, dass der Hauptinhalt des aktuellen Dokuments von der Copyright-Lizenz abgedeckt ist, die durch das referenzierte Dokument beschrieben wird.
  • next: Gibt an, dass das aktuelle Dokument Teil einer Serie ist und dass das nächste Dokument in der Serie das referenzierte Dokument ist.
  • prefetch: Gibt an, dass die Zielressource präventiv zwischengespeichert werden soll.
  • prev: Gibt an, dass das aktuelle Dokument ein Teil einer Serie ist und dass das vorherige Dokument in der Serie das referenzierte Dokument ist.
  • search: Gibt einen Link zu einer Ressource, die verwendet werden kann, um durch das aktuelle Dokument und die damit verbundenen Seiten zu durchsuchen.
  • stylesheet: Importiert ein Stylesheet.


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.

kanonische Links[Bearbeiten]

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 mehreren URLs, etwa mit verschiedenen Parametern 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/Elemente/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/Elemente/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.

Logische Rückbeziehungen festlegen[Bearbeiten]

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.
datei_1.html
<link rel="alternate" href="datei_2.html" title="zweite Lesart">
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.

Quellen[Bearbeiten]

  1. ↑ support.google.com: Kanonische URLs verwenden
  2. ↑ W3C: HTML 4.01 12.3.3
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Elemente/link&oldid=81454“