<link>: Das External Resource Link-Element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das <link>
HTML Element spezifiziert Beziehungen zwischen dem aktuellen Dokument und einer externen Ressource. Am häufigsten wird dieses Element verwendet, um auf Stylesheets zu verweisen, doch es wird auch genutzt, um z. B. Seitenicons (sowohl "Favicon"-Stilicons als auch Icons für den Startbildschirm und Apps auf mobilen Geräten) festzulegen.
Probieren Sie es aus
Um ein externes Stylesheet zu verlinken, würden Sie ein <link>
Element in Ihrem <head>
einfügen, so:
<link href="main.css" rel="stylesheet" />
Dieses Beispiel gibt den Pfad zum Stylesheet innerhalb eines href
Attributs an und ein rel
Attribut mit dem Wert stylesheet
. Das rel
steht für "relationship" (Beziehung) und ist eine der Schlüsselfunktionen des <link>
Elements — der Wert kennzeichnet, wie das verlinkte Element im Verhältnis zu dem enthaltenen Dokument steht.
Es gibt mehrere andere häufige rel
-Typen. Zum Beispiel ein Link zum Favicon der Webseite:
<link rel="icon" href="favicon.ico" />
Es gibt auch mehrere andere rel
-Werte für Icons, hauptsächlich für spezielle Icon-Typen, die auf verschiedenen mobilen Plattformen verwendet werden, z. B.:
<link
rel="apple-touch-icon"
sizes="114x114"
href="apple-icon-114.png"
type="image/png" />
Das sizes
Attribut gibt die Icongröße an, während das type
Attribut den MIME-Typ der verlinkten Ressource enthält. Diese Informationen liefern nützliche Hinweise, um dem Browser die Wahl des am besten geeigneten Icons zu ermöglichen.
Sie können auch einen Medientyp oder eine Abfrage innerhalb eines media
Attributs angeben; diese Ressource wird dann nur geladen, wenn die Medienbedingung wahr ist. Zum Beispiel:
<link href="print.css" rel="stylesheet" media="print" />
<link
href="mobile.css"
rel="stylesheet"
media="screen and (max-width: 600px)" />
Einige interessante neue Leistungs- und Sicherheitsmerkmale wurden dem <link>
Element ebenfalls hinzugefügt. Nehmen Sie zum Beispiel dieses:
<link
rel="preload"
href="myFont.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous" />
Ein rel
Wert von preload
zeigt an, dass der Browser diese Ressource vorladen sollte (siehe rel="preload"
für weitere Details), wobei das as
Attribut die spezifische Klasse des geladenen Inhalts angibt. Das crossorigin
Attribut zeigt an, ob die Ressource mit einer CORS Anfrage abgerufen werden soll.
Weitere Nutzungshinweise:
- Ein
<link>
Element kann entweder im<head>
oder<body>
Element vorkommen, abhängig davon, ob es einen link type hat, der body-ok ist. Zum Beispiel ist derstylesheet
Link-Typ body-ok, und daher ist<link rel="stylesheet">
im Body erlaubt. Dies ist jedoch keine gute Praxis; es ist sinnvoller, Ihre<link>
Elemente von Ihrem Body-Inhalt zu trennen und sie in den<head>
zu setzen. - Wenn Sie
<link>
verwenden, um ein Favicon für eine Seite festzulegen, und Ihre Seite verwendet eine Content Security Policy (CSP) zur Erhöhung der Sicherheit, gilt die Richtlinie auch für das Favicon. Wenn Sie Probleme damit haben, dass das Favicon nicht geladen wird, stellen Sie sicher, dass dieContent-Security-Policy
Kopfzeile'simg-src
directive den Zugriff darauf nicht verhindert. - Die HTML- und XHTML-Spezifikationen definieren Event-Handler für das
<link>
Element, aber es ist unklar, wie sie verwendet werden würden. - Unter XHTML 1.0 müssen void elements wie
<link>
einen abschließenden Schrägstrich haben:<link />
. - WebTV unterstützt die Verwendung des Werts
next
fürrel
, um die nächste Seite in einer Dokumentenreihe vorzubereiten.
Attribute
Dieses Element beinhaltet die globalen Attribute.
as
-
Dieses Attribut ist erforderlich, wenn
rel="preload"
im<link>
Element gesetzt wurde, optional wennrel="modulepreload"
gesetzt wurde, und sollte ansonsten nicht verwendet werden. Es spezifiziert den Typ des Inhalts, der durch das<link>
geladen wird, was notwendig ist für das Anforderungs-Matching, Anwendung korrekter Content-Security-Policy und das Setzen des korrektenAccept
Anforderungs-Headers.Des Weiteren wird
rel="preload"
als Signal für die Anforderungspriorisierung verwendet. Die Tabelle unten listet die gültigen Werte für dieses Attribut und die Elemente oder Ressourcen, auf die sie angewendet werden, auf.Wert Bezieht sich auf audio <audio>
Elementedocument <iframe>
und<frame>
Elementeembed <embed>
Elementefetch fetch, XHR
Hinweis: Dieser Wert erfordert ebenfalls, dass
<link>
das crossorigin-Attribut enthält, siehe CORS-fähige Abrufe.font CSS @font-face
Hinweis: Dieser Wert erfordert ebenfalls, dass
<link>
das crossorigin-Attribut enthält, siehe CORS-fähige Abrufe.image <img>
und<picture>
Elemente mit srcset oder imageset Attributen, SVG<image>
Elemente, CSS*-image
Regelnobject <object>
Elementescript <script>
Elemente, WorkerimportScripts
style <link rel=stylesheet>
Elemente, CSS@import
track <track>
Elementevideo <video>
Elementeworker Worker, SharedWorker blocking
-
Dieses Attribut gibt explizit an, dass bestimmte Operationen beim Abruf einer externen Ressource blockiert werden sollen. Es muss nur verwendet werden, wenn das
rel
Attribut die Schlüsselwörterexpect
oderstylesheet
enthält. Die Operationen, die blockiert werden sollen, müssen eine durch Leerzeichen getrennte Liste der unten aufgeführten Blockierungstokens sein.render
: Die Darstellung des Inhalts auf dem Bildschirm wird blockiert.
crossorigin
-
Dieses aufzählbare Attribut gibt an, ob CORS verwendet werden muss, wenn die Ressource abgerufen wird. CORS-fähige Bilder können im
<canvas>
Element verwendet werden, ohne verunreinigt zu werden. Die erlaubten Werte sind:anonymous
-
Eine Cross-Origin-Anfrage (d. h. mit einem
Origin
HTTP-Header) wird durchgeführt, aber keine Berechtigung wird gesendet (d. h. kein Cookie, kein X.509-Zertifikat oder keine HTTP-Basis-Authentifizierung). Wenn der Server keine Berechtigungen an die Ursprungsseite gibt (indem er denAccess-Control-Allow-Origin
HTTP-Header nicht setzt), wird die Ressource verunreinigt und ihre Verwendung eingeschränkt. use-credentials
-
Eine Cross-Origin-Anfrage (d. h. mit einem
Origin
HTTP-Header) wird zusammen mit einer gesendeten Berechtigung (d. h. ein Cookie, Zertifikat und/oder HTTP-Basis-Authentifizierung wird durchgeführt) gesendet. Wenn der Server keine Berechtigungen an die Ursprungsseite gibt (durchAccess-Control-Allow-Credentials
HTTP-Header), wird die Ressource verunreinigt und ihre Verwendung eingeschränkt.
Ist das Attribut nicht vorhanden, wird die Ressource ohne eine CORS Anfrage (d. h. ohne Senden des
Origin
HTTP-Headers) abgerufen, was ihre unverunreinigte Verwendung verhindert. Wenn es ungültig ist, wird es so behandelt, als ob das aufgezählte Schlüsselwort anonymous verwendet wurde. Siehe CORS Einstellungen Attribute für zusätzliche Informationen. disabled
-
Nur für
rel="stylesheet"
gilt dasdisabled
Boolean-Attribut an, ob das beschriebene Stylesheet geladen und auf das Dokument angewendet werden soll. Wenndisabled
im HTML angegeben ist, wenn es geladen wird, wird das Stylesheet während des Seitenladens nicht geladen. Stattdessen wird das Stylesheet auf Abruf geladen, wenn und wenn dasdisabled
Attribut auffalse
geändert oder entfernt wird.Das Setzen der
disabled
Eigenschaft im DOM verursacht, dass das Stylesheet von derDocument.styleSheets
Liste des Dokuments entfernt wird. fetchpriority
-
Bietet einen Hinweis auf die relative Priorität, die beim Abrufen einer Ressource eines bestimmten Typs verwendet werden soll. Erlaubte Werte:
high
-
Die Ressource mit hoher Priorität relativ zu anderen Ressourcen desselben Typs abrufen.
low
-
Die Ressource mit niedriger Priorität relativ zu anderen Ressourcen desselben Typs abrufen.
auto
-
Keine Präferenz für die Abrufpriorität festlegen. Dies ist der Standard. Es wird verwendet, wenn kein Wert oder ein ungültiger Wert gesetzt ist.
Siehe
HTMLLinkElement.fetchPriority
für weitere Informationen. href
-
Dieses Attribut gibt die URL der verlinkten Ressource an. Eine URL kann absolut oder relativ sein.
hreflang
-
Dieses Attribut gibt die Sprache der verlinkten Ressource an. Es ist rein beratend. Erlaubte Werte sind von RFC 5646: Tags for Identifying Languages (also known as BCP 47) spezifiziert. Verwenden Sie dieses Attribut nur, wenn das
href
Attribut vorhanden ist. imagesizes
-
Nur für
rel="preload"
undas="image"
, hat dasimagesizes
Attribut eine ähnliche Syntax und Semantik wie dassizes
Attribut, das darauf hinweist, dass die entsprechende Ressource, die von einemimg
Element mit entsprechenden Werten für seinesrcset
undsizes
Attribute verwendet wird, vorgeladen wird. imagesrcset
-
Nur für
rel="preload"
undas="image"
, hat dasimagesrcset
Attribut eine ähnliche Syntax und Semantik wie dassrcset
Attribut, das darauf hinweist, dass die entsprechende Ressource, die von einemimg
Element mit entsprechenden Werten für seinesrcset
undsizes
Attribute verwendet wird, vorgeladen wird. integrity
-
Enthält Inline-Metadaten — ein base64-kodierter kryptographischer Hash der Ressource (Datei), die Sie dem Browser zum Abrufen angeben. Der Browser kann dies verwenden, um zu überprüfen, ob die abgerufene Ressource ohne unerwartete Manipulation geliefert wurde. Das Attribut darf nur angegeben werden, wenn das
rel
Attribut aufstylesheet
,preload
odermodulepreload
gesetzt ist. Siehe Subresource Integrity. media
-
Dieses Attribut spezifiziert die Medien, auf die die verlinkte Ressource angewendet wird. Sein Wert muss ein Medientyp / media query sein. Dieses Attribut ist hauptsächlich nützlich beim Verlinken zu externen Stylesheets — es erlaubt dem User-Agent, das am besten angepasste für das Gerät, auf dem es läuft, auszuwählen.
referrerpolicy
-
Ein String, der angibt, welcher Referrer verwendet werden soll, wenn die Ressource abgerufen wird:
no-referrer
bedeutet, dass derReferer
Header nicht gesendet wird.-
no-referrer-when-downgrade
bedeutet, dass keinReferer
Header gesendet wird, wenn zu einem Ursprung ohne TLS (HTTPS) navigiert wird. Dies ist das Standardverhalten eines User-Agents, wenn keine andere Richtlinie angegeben wird. origin
bedeutet, dass der Referrer der Ursprung der Seite sein wird, was grob das Schema, der Host und der Port ist.origin-when-cross-origin
bedeutet, dass die Navigation zu anderen Ursprüngen auf das Schema, den Host und den Port beschränkt wird, während die Navigation auf demselben Ursprung den Pfad des Referrers beinhaltet.-
unsafe-url
bedeutet, dass der Referrer den Ursprung und den Pfad (aber nicht das Fragment, das Passwort oder den Benutzernamen) enthält. Dieser Fall ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge leaken kann.
rel
-
Dieses Attribut benennt eine Beziehung des verlinkten Dokuments zum aktuellen Dokument. Das Attribut muss eine durch Leerzeichen getrennte Liste von Link-Typ-Werten sein.
sizes
-
Dieses Attribut definiert die Größen der Icons für visuelle Medien, die in der Ressource enthalten sind. Es muss nur vorhanden sein, wenn das
rel
einen Wert vonicon
oder einen nicht-standardmäßigen Typ wie Apple'sapple-touch-icon
enthält. Es kann die folgenden Werte haben:-
any
, was bedeutet, dass das Icon auf jede Größe skaliert werden kann, da es in einem Vektorformat wieimage/svg+xml
vorliegt. -
eine durch Leerzeichen getrennte Liste von Größen, jede im Format
<Breite in Pixel>x<Höhe in Pixel>
oder<Breite in Pixel>X<Höhe in Pixel>
. Jede dieser Größen muss in der Ressource enthalten sein.
Hinweis: Die meisten Icon-Formate sind nur in der Lage, ein einzelnes Icon zu speichern; daher enthält das
sizes
Attribut meistens nur einen Eintrag. Microsoft's ICO-Format und Apple's ICNS-Format können mehrere Icon-Größen in einer einzigen Datei speichern. ICO hat eine bessere Browser-Unterstützung, daher sollten Sie dieses Format verwenden, wenn die plattformübergreifende Unterstützung ein Anliegen ist. -
title
-
Das
title
Attribut hat spezielle Semantik auf dem<link>
Element. Wenn es auf einem<link rel="stylesheet">
verwendet wird, definiert es ein Standard-oder alternatives Stylesheet. type
-
Dieses Attribut wird verwendet, um den Typ des verlinkten Inhalts zu definieren. Der Wert des Attributs sollte ein MIME-Typ wie text/html, text/css usw. sein. Der gebräuchliche Gebrauch dieses Attributs ist um den Typ des referenzierten Stylesheets zu definieren (wie text/css), aber da CSS die einzige Stylesheetsprache ist, die im Web verwendet wird, ist es nicht nur möglich, das
type
Attribut wegzulassen, sondern es wird tatsächlich jetzt empfohlen, es nicht zu verwenden. Es wird auch aufrel="preload"
Link-Typen verwendet, um sicherzustellen, dass der Browser nur Dateitypen herunterlädt, die er unterstützt.
Nicht-standardmäßige Attribute
target
Veraltet-
Definiert den Frame- oder Fensternamen, der die definierte Verlinkungsbeziehung hat oder der die Darstellung einer verlinkten Ressource zeigt.
Veraltete Attribute
charset
Veraltet-
Dieses Attribut definiert die Zeichenkodierung der verlinkten Ressource. Der Wert ist eine durch Leerzeichen und/oder Kommas getrennte Liste von Zeichensätzen, wie in RFC 2045 definiert. Der Standardwert ist
iso-8859-1
.Hinweis: Um den gleichen Effekt wie dieses veraltete Attribut zu erzielen, verwenden Sie den
Content-Type
HTTP-Header auf der verlinkten Ressource. rev
Veraltet-
Der Wert dieses Attributs zeigt die Beziehung des aktuellen Dokuments zum verlinkten Dokument, wie durch das
href
Attribut definiert, an. Das Attribut definiert somit die umgekehrte Beziehung im Vergleich zum Wert desrel
Attributs. Verlinkungstyp-Werte für das Attribut sind ähnlich den möglichen Werten fürrel
.Hinweis: Anstelle von
rev
sollten Sie dasrel
Attribut mit dem entgegengesetzten Verlinkungstyp-Wert verwenden. Zum Beispiel, um die umgekehrte Verbindung fürmade
herzustellen, spezifizieren Sieauthor
. Außerdem steht dieses Attribut nicht für "Revision" und darf nicht mit einer Versionsnummer verwendet werden, selbst wenn viele Seiten es auf diese Weise missbrauchen.
Beispiele
Einbinden eines Stylesheets
Um ein Stylesheet in eine Seite einzubinden, verwenden Sie folgende Syntax:
<link href="style.css" rel="stylesheet" />
Bereitstellung alternativer Stylesheets
Sie können auch alternative Stylesheets festlegen.
Der Benutzer kann auswählen, welches Stylesheet verwendet werden soll, indem er es im Menü Ansicht > Seitenstil auswählt. Dies bietet eine Möglichkeit, mehrere Versionen einer Seite anzuzeigen.
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />
Bereitstellung von Icons für unterschiedliche Nutzungskontexte
Sie können Links zu mehreren Icons auf derselben Seite einfügen, und der Browser wählt aus, welches in seinem bestimmten Kontext am besten funktioniert, indem er rel
und sizes
Werte als Hinweise verwendet.
<!-- iPad Pro with high-resolution Retina display: -->
<link
rel="apple-touch-icon"
sizes="167x167"
href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
rel="apple-touch-icon"
sizes="152x152"
href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />
Für Informationen darüber, welche sizes
für Apple-Icons gewählt werden sollten, siehe Apples Dokumentation zur Konfiguration von Webanwendungen und die referenzierten Apple Human Interface Guidelines. In der Regel reicht es aus, ein großes Bild, wie 192x192, bereitzustellen und den Browser es nach Bedarf herunterskalieren zu lassen, aber Sie können auch Bilder mit unterschiedlichen Detailstufen für verschiedene Größen bereitstellen, wie in den Apple-Designrichtlinien empfohlen wird. Kleinere Icons für niedrigere Auflösungen bereitzustellen, spart auch Bandbreite.
Es kann nicht erforderlich sein, <link>
Elemente bereitzustellen. Zum Beispiel fordern Browser automatisch /favicon.ico
vom Stamm einer Seite an, und Apple fordert auch automatisch /apple-touch-icon-[size].png
, /apple-touch-icon.png
usw. an. Jedoch schützt ein explizites Einrichten von Links gegen Änderungen dieser Konventionen.
Bedingtes Laden von Ressourcen mit Medienabfragen
Sie können einen Medientyp oder eine Abfrage innerhalb eines media
Attributs angeben;
diese Ressource wird dann nur geladen, wenn die Medienbedingung wahr ist. Zum Beispiel:
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
href="desktop.css"
rel="stylesheet"
media="screen and (min-width: 600px)" />
<link
href="highres.css"
rel="stylesheet"
media="screen and (min-resolution: 300dpi)" />
Stylesheet Ladeereignisse
Sie können bestimmen, wann ein Stylesheet geladen wurde, indem Sie ein load
Ereignis überwachen, das darauf ausgelöst wird; ähnlich können Sie feststellen, ob ein Fehler beim Verarbeiten eines Stylesheets aufgetreten ist, indem Sie ein error
Ereignis überwachen:
<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
<script>
const stylesheet = document.getElementById("my-stylesheet");
stylesheet.onload = () => {
// Do something interesting; the sheet has been loaded
};
stylesheet.onerror = () => {
console.log("An error occurred loading the stylesheet!");
};
</script>
Hinweis: Das load
Ereignis wird ausgelöst, sobald das Stylesheet und alle importierten Inhalte geladen und geparst sind, und unmittelbar bevor die Stile auf den Inhalt angewendet werden.
Preload-Beispiele
Sie können eine Reihe von <link rel="preload">
Beispielen in Inhalte mit rel="preload"
vorladen finden.
Rendern blockieren, bis eine Ressource abgerufen wird
Sie können das render
Token innerhalb eines blocking
Attributs einfügen;
das Rendern der Seite wird blockiert, bis die Ressource abgerufen wird. Zum Beispiel:
<link blocking="render" rel="stylesheet" href="example.css" crossorigin />
Technische Zusammenfassung
Inhaltskategorien |
Metadateninhalt.
Wenn itemprop vorhanden ist:
Fließinhalt und
Satzinhalt.
|
---|---|
Erlaubter Inhalt | Keiner; es ist ein void element. |
Tag-Auslassung | Muss ein Start-Tag haben und darf kein End-Tag haben. |
Erlaubte Eltern | Jedes Element, das Metadaten-Elemente akzeptiert. Wenn itemprop vorhanden ist: jedes Element, das Satzinhalt akzeptiert. |
Implizite ARIA-Rolle | link mit href Attribut |
Erlaubte ARIA-Rollen | Keine role erlaubt |
DOM-Schnittstelle | [`HTMLLinkElement`](/de/docs/Web/API/HTMLLinkElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-link-element |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
Link
HTTP-Header