<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 ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Das <link> HTML Element spezifiziert Beziehungen zwischen dem aktuellen Dokument und einer externen Ressource. Dieses Element wird am häufigsten verwendet, um auf Stylesheets zu verlinken, aber auch, um Seitenfavoriten (sowohl "Favicon"-Stil-Icons als auch Icons für den Startbildschirm und Apps auf mobilen Geräten) zu erstellen, unter anderem.

Probieren Sie es aus

<link href="/shared-assets/misc/link-element-example.css" rel="stylesheet" />

<p>This text will be red as defined in the external stylesheet.</p>
<p style="color: blue">
  The <code>style</code> attribute can override it, though.
</p>

Um ein externes Stylesheet zu verlinken, fügen Sie ein <link>-Element in Ihr <head>-Element ein, wie folgt:

html

<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. rel steht für "relationship" (Beziehung), und ist eines der Schlüsselelemente des <link>-Elements – der Wert gibt an, wie das verknüpfte Element mit dem einbettenden Dokument in Verbindung steht.

Es gibt eine Reihe anderer gebräuchlicher Typen, auf die Sie stoßen werden. Zum Beispiel ein Link zum Favicon der Website:

html

<link rel="icon" href="favicon.ico" />

Es gibt eine Reihe von anderen Icon-rel-Werten, hauptsächlich um spezielle Icon-Typen für verschiedene mobile Plattformen anzugeben, z. B.:

html

<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

Das sizes-Attribut gibt die Icon-Größe an, während das type-Attribut den MIME-Typ der verlinkten Ressource enthält. Diese bieten nützliche Hinweise, die es dem Browser ermöglichen, das am besten geeignete Icon auszuwählen.

Sie können auch einen Medientyp oder eine Abfrage innerhalb eines media-Attributs angeben; diese Ressource wird dann nur geladen, wenn die Medienbedingung zutrifft. Zum Beispiel:

html

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="screen and (width <= 600px)" />

Einige interessante neue Leistungs- und Sicherheitsmerkmale wurden dem <link>-Element ebenfalls hinzugefügt. Sehen Sie sich dieses Beispiel an:

html

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

Ein rel-Wert von preload gibt an, dass der Browser diese Ressource vorladen soll (siehe rel="preload" für weitere Details), wobei das as-Attribut die spezifische Klasse des abgerufenen Inhalts angibt. Das crossorigin-Attribut gibt an, ob die Ressource mit einer CORS-Anfrage abgerufen werden soll.

Weitere Nutzungshinweise:

Ein <link>-Element kann entweder im <head> oder im <body>-Element auftreten, je nachdem, ob es einen Link-Typ hat, der body-ok ist. Zum Beispiel ist der stylesheet-Link-Typ body-ok und wird daher im Body erlaubt. Dennoch ist es keine gute Praxis, dies zu tun; es ist sinnvoller, die <link>-Elemente vom Body-Content zu trennen, indem Sie diese im <head> platzieren.
Wenn Sie <link> verwenden, um ein Favicon für eine Seite zu erstellen, und Ihre Seite eine Content Security Policy (CSP) verwendet, um die Sicherheit zu erhöhen, gilt die Richtlinie für das Favicon. Wenn Sie auf Probleme stoßen, bei denen das Favicon nicht geladen wird, überprüfen Sie, ob die Content-Security-Policy-Richtlinie durch die img-src-Direktive den Zugriff nicht verhindert.
Die HTML- und XHTML-Spezifikationen definieren Event Handler für das <link>-Element, aber es ist unklar, wie diese verwendet werden würden.
Unter XHTML 1.0 erfordern void elements wie <link> einen abschließenden Slash: <link />.
WebTV unterstützt die Verwendung des Werts next für rel, um die nächste Seite in einer Dokumentserie vorzuladen.

Attribute

Dieses Element enthält die globalen Attribute.

as

Dieses Attribut ist erforderlich, wenn rel="preload" auf das <link>-Element gesetzt wurde, optional, wenn rel="modulepreload" gesetzt wurde, und sollte ansonsten nicht verwendet werden. Es spezifiziert den Typ des Inhalts, der durch das <link> geladen wird, was für die Anforderungsabstimmung, die Anwendung der korrekten Content Security Policy und das Setzen des korrekten Accept-Anforderungsheaders notwendig ist.

Darüber hinaus verwendet rel="preload" dies als Signal für die Priorisierung von Anforderungen. Die folgende Tabelle listet die gültigen Werte für dieses Attribut und die Elemente oder Ressourcen, auf die sie angewendet werden, auf.

Wert	Gilt für
audio	`<audio>`-Elemente
document	`<iframe>` und `<frame>`-Elemente
embed	`<embed>`-Elemente
fetch	fetch, XHR Hinweis: Dieser Wert erfordert auch `<link>` das `crossorigin`-Attribut, siehe CORS-fähige Abrufe.
font	CSS @font-face Hinweis: Dieser Wert erfordert auch `<link>` das `crossorigin`-Attribut, siehe CORS-fähige Abrufe.
image	`<img>` und `<picture>`-Elemente mit srcset oder imageset Attributen, SVG `<image>`-Elemente, CSS `*-image` Regeln
object	`<object>`-Elemente
script	`<script>`-Elemente, Worker `importScripts`
style	`<link rel=stylesheet>`-Elemente, CSS `@import`
track	`<track>`-Elemente
video	`<video>`-Elemente
worker	Worker, SharedWorker

blocking

Dieses Attribut gibt explizit an, dass bestimmte Operationen blockiert werden sollen, bis bestimmte Bedingungen erfüllt sind. Es darf nur verwendet werden, wenn das rel-Attribut die Schlüsselwörter expect oder stylesheet enthält. Mit rel="expect" zeigt es an, dass Operationen blockiert werden sollen, bis ein bestimmter DOM-Knoten geparst wurde. Mit rel="stylesheet" zeigt es an, dass Operationen blockiert werden sollen, bis ein externes Stylesheet und seine kritischen Subressourcen abgerufen und auf das Dokument angewendet wurden. Die zu blockierenden Operationen müssen eine durch Leerzeichen getrennte Liste von Blockierungstoken sein, die unten aufgelistet sind. Derzeit gibt es nur ein Token:

render: Das Rendern des Inhalts auf dem Bildschirm wird blockiert.

Hinweis: Nur link-Elemente im <head> des Dokuments können möglicherweise das Rendern blockieren. Standardmäßig blockiert ein link-Element mit rel="stylesheet" im <head> das Rendern, wenn der Browser es während des Parsens entdeckt. Wenn ein solches link-Element dynamisch über Skript hinzugefügt wird, müssen Sie zusätzlich blocking = "render" festlegen, damit es das Rendern blockiert.

crossorigin

Dieses enumerierte Attribut gibt an, ob CORS verwendet werden muss, wenn die Ressource abgerufen wird. CORS-fähige Bilder können im <canvas>-Element wiederverwendet werden, ohne verfälscht zu werden. Die erlaubten Werte sind:

anonymous: Eine Cross-Origin-Anfrage (d.h. mit einem Origin HTTP-Header) wird durchgeführt, aber es werden keine Anmeldedaten gesendet (d.h. kein Cookie, X.509-Zertifikat oder HTTP-Basisautorisierung). Wenn der Server keine Anmeldedaten an die Origin-Site gibt (indem er den Access-Control-Allow-Origin HTTP-Header nicht setzt), wird die Ressource verfälscht und ihre Verwendung eingeschränkt.
use-credentials: Eine Cross-Origin-Anfrage (d.h. mit einem Origin HTTP-Header) wird zusammen mit einem Anmeldedatum gesendet (d.h. es wird ein Cookie, Zertifikat und/oder HTTP-Basisautorisierung durchgeführt). Wenn der Server keine Anmeldedaten an die Origin-Site gibt (durch den Access-Control-Allow-Credentials HTTP-Header), wird die Ressource verfälscht und ihre Verwendung eingeschränkt.

Wenn das Attribut nicht vorhanden ist, wird die Ressource ohne eine CORS-Anfrage abgerufen (d.h. ohne den Origin HTTP-Header zu senden), wodurch ihre unverfälschte Nutzung verhindert wird. Wenn ungültig, wird es behandelt, als ob das Schlüsselwort anonymous verwendet wurde. Siehe CORS-Einstellungen Attribute für zusätzliche Informationen.

disabled

Nur für rel="stylesheet", zeigt das boolesche disabled-Attribut an, ob das beschriebene Stylesheet geladen und auf das Dokument angewendet werden soll. Wenn disabled im HTML beim Laden angegeben ist, wird das Stylesheet beim Seitenladen nicht geladen. Stattdessen wird das Stylesheet bei Bedarf geladen, wenn und falls das disabled-Attribut auf false geändert oder entfernt wird.

Das Setzen der disabled-Eigenschaft im DOM führt dazu, dass das Stylesheet aus der Document.styleSheets-Liste des Dokuments entfernt wird.

fetchpriority

Gibt einen Hinweis auf die relative Priorität, die beim Abrufen einer Ressource eines bestimmten Typs verwendet werden soll. Erlaubte Werte:

high: Abrufen der Ressource mit hoher Priorität im Vergleich zu anderen Ressourcen desselben Typs.
low: Abrufen der Ressource mit niedriger Priorität im Vergleich zu anderen Ressourcen desselben Typs.
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.

href

Dieses Attribut gibt die URL der verlinkten Ressource an. Eine URL kann absolut oder relativ sein.

hreflang

Dieses Attribut zeigt die Sprache der verlinkten Ressource an. Es ist rein beratend. Werte sollten gültige BCP 47 Sprach-Tags sein. Verwenden Sie dieses Attribut nur, wenn das href-Attribut vorhanden ist.

imagesizes

Nur für rel="preload" und as="image", das imagesizes-Attribut hat eine ähnliche Syntax und Semantik wie das sizes-Attribut, welches anzeigt, die entsprechende Ressource vorzuladen, die von einem img-Element mit entsprechenden Werten für die srcset- und sizes-Attribute verwendet wird.

imagesrcset

Nur für rel="preload" und as="image", das imagesrcset-Attribut hat eine ähnliche Syntax und Semantik wie das srcset-Attribut, welches anzeigt, die entsprechende Ressource vorzuladen, die von einem img-Element mit entsprechenden Werten für die srcset- und sizes-Attribute verwendet wird.

integrity

Enthält Inline-Metadaten — einen base64-codierten kryptografischen Hash der Ressource (Datei), die Sie dem Browser zu laden anweisen. Der Browser kann dies verwenden, um zu überprüfen, dass die abgerufene Ressource ohne unerwartete Manipulation geliefert wurde. Das Attribut darf nur angegeben werden, wenn das rel-Attribut auf stylesheet, preload oder modulepreload gesetzt ist. Siehe Subresource Integrity.

media

Dieses Attribut gibt die Medien an, auf die die verlinkte Ressource anwendbar ist. Sein Wert muss ein Medientyp / Medienabfrage sein. Dieses Attribut ist hauptsächlich nützlich, wenn man auf externe Stylesheets verlinkt – es ermöglicht dem Benutzeragenten, das am besten angepasste für das Gerät, auf dem es läuft, auszuwählen.

referrerpolicy

Ein Zeichenfolge, die angibt, welcher Referrer zum Abrufen der Ressource verwendet werden soll:

no-referrer bedeutet, dass der Referer-Header nicht gesendet wird.
no-referrer-when-downgrade bedeutet, dass kein Referer-Header gesendet wird, wenn zu einem Ursprung ohne TLS (HTTPS) navigiert wird. Dies ist das Standardverhalten des Benutzeragenten, wenn keine Richtlinie sonst angegeben ist.
origin bedeutet, dass der Referrer der Ursprung der Seite sein wird, der ungefähr das Schema, den Host und den Port umfasst.
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 umfasst.
unsafe-url bedeutet, dass der Referrer den Ursprung und den Pfad umfasst (aber nicht das Fragment, Passwort oder den Benutzernamen). Dieser Fall ist unsicher, weil er Ursprünge und Pfade von TLS-geschützten Ressourcen zu unsicheren Ursprüngen leaken kann.

rel

Dieses Attribut benennt die Beziehung des verknüpften 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 darf nur vorhanden sein, wenn der rel eine Wert von icon oder einen nicht-standardmäßigen Typ wie Apples apple-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 wie image/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 können nur ein einzelnes Icon speichern; daher enthält das sizes-Attribut meist nur einen Eintrag. Microsofts ICO-Format und Apples 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 eine browserübergreifende Unterstützung von Bedeutung ist.

title

Das title-Attribut hat spezielle Semantik auf dem <link>-Element. Wenn auf einem <link rel="stylesheet"> verwendet, definiert es ein Standard- oder Alternativ-Stylesheet.

type

Dieses Attribut wird zur Definition des Typs des verlinkten Inhalts verwendet. Der Wert des Attributs sollte ein MIME-Typ sein, wie text/html, text/css und so weiter. Der übliche Gebrauch dieses Attributs ist die Definition des Typs des referenzierten Stylesheets (wie text/css), aber da CSS die einzige verwendete Stylesheet-Sprache im Web ist, ist es nicht nur möglich, das type-Attribut wegzulassen, sondern es ist mittlerweile empfohlene Praxis. Es wird auch für rel="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 Verknüpfungsbeziehung hat oder 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 denselben Effekt wie dieses veraltete Attribut zu erzielen, verwenden Sie den Content-Type HTTP-Header für die verlinkte Ressource.
rev Veraltet: Der Wert dieses Attributs zeigt die Beziehung des aktuellen Dokuments zur verlinkten Ressource, wie durch das href-Attribut definiert. Das Attribut definiert somit die umgekehrte Beziehung im Vergleich zu dem Wert des rel-Attributs. Link-Typ-Werte für das Attribut sind ähnlich den möglichen Werten für rel.

Hinweis: Statt rev sollten Sie das rel-Attribut mit dem entgegengesetzten Link-Typ-Wert verwenden. Zum Beispiel, um den umgekehrten Link für made zu erstellen, spezifizieren Sie author. Auch steht dieses Attribut nicht für "Revision" und darf nicht mit einer Versionsnummer benutzt werden, obwohl viele Seiten es in dieser Art und Weise missbrauchen.

Beispiele

Einbinden eines Stylesheets

Um ein Stylesheet auf einer Seite einzubinden, verwenden Sie die folgende Syntax:

html

<link href="style.css" rel="stylesheet" />

Bereitstellung alternativer Stylesheets

Sie können auch alternative Stylesheets angeben.

Der Benutzer kann auswählen, welches Stylesheet verwendet werden soll, indem er es aus dem Menü Ansicht > Seitenstil auswählt. Dies bietet eine Möglichkeit für Benutzer, mehrere Versionen einer Seite zu sehen.

html

<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 verschiedene Nutzungskontexte

Sie können Links zu mehreren Icons auf derselben Seite einfügen, und der Browser wählt aus, welches am besten für seinen jeweiligen Kontext geeignet ist, indem er rel und sizes-Werte als Hinweise verwendet.

html

<!-- 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 zu wählen sind, siehe Apples Dokumentation zur Konfiguration von Web-Anwendungen und die referenzierten Apple Human Interface Guidelines. Meist reicht es aus, ein großes Bild, wie 192x192, bereitzustellen, und den Browser es bei Bedarf verkleinern zu lassen, aber Sie möchten vielleicht Bilder mit verschiedenen Detailstufen für unterschiedliche Größen bereitstellen, wie es die Apple Designrichtlinie empfiehlt. Das Bereitstellen kleinerer Icons für niedrigere Auflösungen spart auch Bandbreite.

Es ist möglicherweise nicht notwendig, <link>-Elemente bereitzustellen. Zum Beispiel fordern Browser automatisch /favicon.ico aus der Wurzelverzeichnis einer Site, und Apple fordert automatisch /apple-touch-icon-[size].png, /apple-touch-icon.png, etc. an. Allerdings schützen explizite Links Sie vor Änderungen dieser Konventionen.

Bedingtes Laden von Ressourcen mit Medienabfragen

Sie können einen Medientyp oder eine Abfrage innerhalb eines media-Attributs angeben; die Ressource wird dann nur geladen, wenn die Medienbedingung zutrifft. Zum Beispiel:

html

<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 (width >= 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (resolution >= 300dpi)" />

Stylesheet-Ladeereignisse

Sie können feststellen, wann ein Stylesheet geladen wurde, indem Sie auf das load-Ereignis achten; ähnlich können Sie feststellen, wenn beim Prozessieren eines Stylesheets ein Fehler aufgetreten ist, indem Sie auf ein error-Ereignis achten:

html

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

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!");
};

Hinweis: Das load-Ereignis wird ausgelöst, sobald das Stylesheet und all seine importierten Inhalte geladen und geparst wurden, und unmittelbar bevor die Styles auf den Inhalt angewendet werden.

Beispiel für Preload

Sie können eine Reihe von <link rel="preload"> Beispielen in Content vorladen mit rel="preload" finden.

Rendering 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 und ihre kritischen Subressourcen abgerufen und auf das Dokument angewendet wurden. Zum Beispiel:

html

<link blocking="render" rel="stylesheet" href="example.css" crossorigin />

Technische Zusammenfassung

Inhaltskategorien	Metadateninhalt. Falls `itemprop` vorhanden ist: Fließender Inhalt und Phrasierungsinhalt.
Erlaubter Inhalt	Keiner; es ist ein void element.
Tag-Auslassung	Muss ein Anfangstag haben und darf keinen Endtag haben.
Zulässige Elternelemente	Jedes Element, das Metadatenelemente akzeptiert. Falls itemprop vorhanden ist: jedes Element, das Phrasierungsinhalt akzeptiert.
Impliziert ARIA-Rolle	`link` mit `href`-Attribut
Erlaubte ARIA-Rollen	Keine `role` erlaubt
DOM-Schnittstelle	[`HTMLLinkElement`](/de/docs/Web/API/HTMLLinkElement)

Spezifikationen

Specification
HTML # the-link-element

Browser-Kompatibilität

Siehe auch

Link HTTP-Header

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden