HTML/Elemente/link
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.
<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>
- 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.
- Hier geht es aber um die andere Möglichkeit, nämlich das link-Element.
Inhaltsverzeichnis
Siehe auch
Weblinks
Spec (WHATWG): link-element
Syntax | Start-Tag: notwendig End-Tag: notwendig <link>…</link> |
---|---|
WAI-ARIA-Rolle |
|
Elternelemente | Darf vorkommen in: |
erlaubte Inhalte |
keine, leeres Element |
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
Stylesheets einbinden[Bearbeiten]
/
).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]
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.
Das sizes-Attribut[Bearbeiten]
Mit dem sizes-Attribut können Sie einem Icon eine bestimmte Größe zuweisen.
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
- Medientypen
-
all
-
print
-
screen
- ...
-
- Medienmerkmale
-
width
-
height
- ...
-
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.
Das folgende Beispiel zeigt ein Set solcher logischen Beziehungen:
<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 Kapitelseitesearch
: Bezug zur Suchfunktionbookmark
: 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.
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]
<link rel="canonical" href="https://example.com/content.html">
<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.
In HTML5 ist dieses Attribut entfallen.
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]
- ↑ support.google.com: Kanonische URLs verwenden
- ↑ W3C: HTML 4.01 12.3.3