<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, wird aber auch zum Einrichten von Website-Icons verwendet (sowohl „Favicon“-Stil-Icons als auch Icons für den Startbildschirm und Apps auf mobilen Geräten) sowie für andere Zwecke.

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> wie folgt ein:

html

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

Dieses Beispiel gibt den Pfad zum Stylesheet innerhalb eines href-Attributs und eines rel Attributs mit dem Wert stylesheet an. rel steht für "relationship" (Beziehung) und ist eines der Schlüsselelemente des <link> Elements — der Wert gibt an, wie das verlinkte Element in Beziehung zum enthaltenen Dokument steht.

Es gibt eine Reihe anderer allgemeiner Typen, denen Sie begegnen werden. Zum Beispiel ein Link zum Favicon der Seite:

html

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

Es gibt eine Reihe anderer Icon-rel-Werte, die hauptsächlich verwendet werden, 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 Größe des Icons an, während type den MIME-Typ der verlinkten Ressource enthält. Diese Attribute liefern nützliche Hinweise, um dem Browser zu ermöglichen, das am besten geeignete verfügbare 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 wahr ist. 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 Sicherheitsfunktionen wurden ebenfalls dem <link>-Element 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 sollte (siehe rel="preload" für weitere Details), mit dem as-Attribut, das die spezifische Klasse des zu holenden Inhalts angibt. Das crossorigin-Attribut gibt an, ob die Ressource über eine CORS Anfrage geholt werden sollte.

Weitere Nutzungshinweise:

Ein <link>-Element kann entweder in <head> oder <body> auftreten, abhängig davon, ob es einen Verknüpfungstyp hat, der body-ok ist. Zum Beispiel ist der stylesheet-Verknüpfungstyp body-ok und daher ist <link rel="stylesheet"> im Body erlaubt. Dies ist jedoch keine gute Praxis; es ist sinnvoller, Ihre <link>-Elemente von Ihren Body-Inhalten zu trennen und sie im <head> zu platzieren.
Wenn Sie <link> verwenden, um ein Favicon für eine Seite festzulegen, und Ihre Seite eine Content Security Policy (CSP) verwendet, um ihre Sicherheit zu verbessern, gilt die Richtlinie für das Favicon. Wenn Sie Probleme haben, dass das Favicon nicht lädt, überprüfen Sie, dass der Content-Security-Policy-Header 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 sie verwendet würden.
Unter XHTML 1.0 erfordern leere Elemente wie <link> einen abschließenden Schrägstrich: <link />.
WebTV unterstützt die Verwendung des Wertes next für rel, um die nächste Seite in einer Dokumentenserie vorzupuffern.

Attribute

Dieses Element enthält die globalen Attribute.

as

Dieses Attribut ist erforderlich, wenn rel="preload" auf dem <link>-Element gesetzt wurde, optional, wenn rel="modulepreload" gesetzt wurde, und sollte andernfalls nicht verwendet werden. Es gibt den Typ des Inhalts an, der von <link> geladen wird, was für Anforderungsabgleich, Anwendung der richtigen Content-Security-Policy und Festlegen des korrekten Accept Anforderungs-Headers notwendig ist.

Darüber hinaus dient rel="preload" 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, dass `<link>` das crossorigin-Attribut enthält, siehe CORS-fähige Abrufe.
font	CSS @font-face Hinweis: Dieser Wert erfordert auch, 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` Regeln
json	`modulepreload` Ziele.
object	`<object>` Elemente
script	`<script>` Elemente, Worker `importScripts`, und `modulepreload` Ziele.
style	`<link rel=stylesheet>` Elemente, CSS `@import` und `modulepreload` Ziele.
track	`<track>` Elemente
video	`<video>` Elemente
worker	Worker, SharedWorker

blocking

Dieses Attribut gibt ausdrücklich an, dass bestimmte Operationen blockiert werden sollen, bis spezifische 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 spezifischer DOM-Knoten geparst wurde. Mit rel="stylesheet" zeigt es an, dass Operationen blockiert werden sollen, bis ein externes Stylesheet und seine kritischen Teilressourcen abgerufen und auf das Dokument angewendet wurden. Die zu blockierenden Operationen müssen eine durch Leerzeichen getrennte Liste von Blockier-Token sein, die unten aufgelistet sind. Derzeit gibt es nur ein Token:

render: Das Rendern von Inhalten 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 ein Skript hinzugefügt wird, müssen Sie zusätzlich blocking = "render" setzen, damit es das Rendern blockiert.

crossorigin

Dieses Aufzählungs- Attribut gibt an, ob CORS beim Abrufen der Ressource verwendet werden muss. CORS-aktivierte Bilder können im <canvas>-Element verwendet 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 keine Anmeldeinformation wird gesendet (d.h. kein Cookie, X.509-Zertifikat oder HTTP-Basisauthentifizierung). Wenn der Server keine Berechtigungen zur Ursprungssite erteilt (indem er den Access-Control-Allow-Origin-HTTP-Header nicht setzt), wird die Ressource verfälscht und ihre Nutzung eingeschränkt.
use-credentials: Eine Cross-Origin-Anfrage (d.h. mit einem Origin-HTTP-Header) wird durchgeführt zusammen mit dem Senden einer Anmeldeinformation (d.h. ein Cookie, Zertifikat und/oder HTTP-Basisauthentifizierung wird durchgeführt). Wenn der Server keine Berechtigungen zur Ursprungssite erteilt (durch Access-Control-Allow-Credentials-HTTP-Header), wird die Ressource verfälscht und ihre Nutzung 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), was ihre unverfälschte Nutzung verhindert. Wenn sie ungültig ist, wird sie so behandelt, als ob das aufgezählte Schlüsselwort anonymous verwendet worden wäre. Siehe CORS-Einstellungen-Attribute für zusätzliche Informationen.

disabled

Für rel="stylesheet" nur zeigt das disabled-Boolesche Attribut an, ob das beschriebene Stylesheet geladen und auf das Dokument angewendet werden soll. Wenn disabled im HTML angegeben ist, wenn es geladen wird, wird das Stylesheet während des Seitenladens nicht geladen. Stattdessen wird das Stylesheet bei Bedarf geladen, wenn und nur wenn 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 Liste Document.styleSheets des Dokuments entfernt wird.

fetchpriority

Bietet einen Hinweis auf die relative Priorität beim Abrufen einer Ressource eines bestimmten Typs. Erlaubte Werte:

high: Rufen Sie die Ressource mit hoher Priorität im Vergleich zu anderen Ressourcen desselben Typs ab.
low: Rufen Sie die Ressource mit niedriger Priorität im Vergleich zu anderen Ressourcen desselben Typs ab.
auto: Legen Sie keine Präferenz für die Abrufpriorität fest. 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 gibt 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

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

imagesrcset

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

integrity

Enthält Metadaten inline — eine base64-codierte kryptografische Prüfsumme der Ressource (Datei), die Sie dem Browser zum Abrufen anweisen. 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 auf stylesheet, preload oder modulepreload festgelegt ist. Siehe Subresource Integrity.

media

Dieses Attribut spezifiziert die Medien, auf die die verlinkte Ressource zutrifft. Sein Wert muss ein Medientyp / Medienabfrage sein. Dieses Attribut ist hauptsächlich nützlich beim Verlinken zu externen Stylesheets — es ermöglicht dem Benutzeragenten, das am besten angepasste für das von ihm verwendete Gerät auszuwählen.

referrerpolicy

Ein String, der angibt, welcher Referrer beim Abrufen der Ressource verwendet werden soll. Für detaillierte Erklärungen und Beispiele jeder Richtlinie siehe die Dokumentation des Referrer-Policy Headers.

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 andere Richtlinie angegeben ist.
origin bedeutet, dass der Referrer der Ursprung der Seite sein wird, was ungefähr das Schema, den Host und den Port umfasst.
origin-when-cross-origin bedeutet, dass das Navigieren zu anderen Ursprüngen auf das Schema, den Host und den Port beschränkt wird, während das Navigieren im gleichen Ursprung den Referrer-Pfad einschließen wird.
same-origin bedeutet, dass der Referrer (Ursprung, Pfad und Query-String) für Anfragen aus demselben Ursprung gesendet wird, aber kein Referrer für Anfragen von verschiedenen Ursprüngen gesendet wird.
strict-origin bedeutet, dass nur der Ursprung gesendet wird, wenn das Sicherheitsprotokoll gleich bleibt (HTTPS→HTTPS). Kein Referrer wird zu weniger sicheren Zielen gesendet (HTTPS→HTTP). Dies ist besonders wichtig für HTTPS-Seiten, da es verhindert, dass Referrer-Informationen zu unsicheren Ursprüngen durchsickern.
strict-origin-when-cross-origin bedeutet, dass der vollständige Referrer für Anfragen aus demselben Ursprung gesendet wird. Für Anfragen von verschiedenen Ursprüngen wird nur der Ursprung gesendet, wenn das Protokoll gleich bleibt (HTTPS→HTTPS), und kein Referrer wird gesendet, wenn auf HTTP herabgestuft wird. Dies ist der Standardwert, der Funktionalität mit Datenschutz und Sicherheit für HTTPS-Sites ausgleicht.
unsafe-url bedeutet, dass der Referrer den Ursprung und den Pfad enthalten wird (aber nicht das Fragment, Passwort oder den Benutzernamen). 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 der rel einen 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 Pixeln>x<Höhe in Pixeln> oder <Breite in Pixeln>X<Höhe in Pixeln>. 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 in der Regel 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 Browserunterstützung, daher sollten Sie dieses Format verwenden, wenn plattformübergreifende Unterstützung ein Anliegen ist.

title

Das title-Attribut hat eine besondere Semantik im <link>-Element. Wenn es auf einem <link rel="stylesheet"> verwendet wird, definiert es ein Standard- oder ein 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. Die allgemeine Verwendung dieses Attributs besteht darin, den Typ des referenzierten Stylesheets zu definieren (wie text/css), aber da CSS die einzige Stylesheet-Sprache ist, die im Internet verwendet wird, ist es nicht nur möglich, das type-Attribut wegzulassen, sondern wird tatsächlich als empfohlene Praxis angesehen. Es wird auch bei 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 der die Darstellung der verknüpften Ressource zeigt.

Veraltete Attribute

charset Veraltet: Dieses Attribut definiert die Zeichenkodierung der verlinkten Ressource. Der Wert ist eine durch Leerzeichen und/oder Kommata getrennte Liste von Zeichensätzen, wie sie in RFC 2045 definiert sind. Der Standardwert ist iso-8859-1.

Hinweis: Um denselben 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 an, wie durch das href-Attribut definiert. Das Attribut definiert somit die entgegengesetzte Beziehung im Vergleich zum 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 die umgekehrte Verbindung für made einzurichten, geben Sie author an. Außerdem steht dieses Attribut nicht für "Revision" und darf nicht mit einer Versionsnummer verwendet werden, auch wenn viele Sites es fälschlicherweise so verwenden.

Beispiele

Einbinden eines Stylesheets

Um ein Stylesheet in eine 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 Ansicht > Seitenstil Menü wählt. Dies bietet eine Möglichkeit für Benutzer, mehrere Versionen einer Seite zu betrachten.

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 in seinem besonderen Kontext am besten geeignet ist, indem er die 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 Webanwendungen und die referenzierten Apple Human Interface Guidelines. In der Regel ist es ausreichend, ein großes Bild, wie 192x192, bereitzustellen und den Browser es bei Bedarf verkleinern zu lassen, aber Sie möchten möglicherweise Bilder mit unterschiedlichen Detailstufen für verschiedene Größen bereitstellen, wie es die Apple Design-Richtlinien empfehlen. Das Bereitstellen kleinerer Icons für niedrigere Auflösungen spart auch Bandbreite.

Es kann nicht notwendig sein, überhaupt <link>-Elemente bereitzustellen. Zum Beispiel fordern Browser automatisch /favicon.ico aus dem Root einer Site an, und Apple fordert auch /apple-touch-icon-[size].png, /apple-touch-icon.png usw. automatisch an. Das Bereitstellen expliziter Links schützt jedoch vor Änderungen an diesen 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:

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 ein load-Ereignis darauf erwarten; ähnlich können Sie feststellen, ob ein Fehler beim Verarbeiten eines Stylesheets aufgetreten ist, indem Sie ein error-Ereignis beobachten:

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 alle importierten Inhalte geladen und geparst wurden, und unmittelbar bevor die Styles auf den Inhalt angewendet werden.

Preload-Beispiele

Sie können eine Reihe von <link rel="preload">-Beispielen in Preloading content with rel="preload" finden.

Rendern blockieren, bis eine Ressource abgerufen wurde

Sie können das Token render innerhalb eines blocking-Attributs einschließen; das Rendern der Seite wird blockiert, bis die Ressource und ihre kritischen Unterressourcen abgerufen und auf das Dokument angewendet wurden. Zum Beispiel:

html

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

Technische Zusammenfassung

Inhaltskategorien	Metadaten-Inhalt. Wenn `itemprop` vorhanden ist: Fließinhalte und Phraseninhalte.
Erlaubter Inhalt	Keiner; es ist ein leeres Element.
Tag-Auslassung	Muss ein Start-Tag haben und darf kein End-Tag haben.
Erlaubte Eltern	Jedes Element, das Metadatenelemente akzeptiert. Wenn itemprop vorhanden ist: jedes Element, das Phraseninhalte 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 # the-link-element

Browser-Kompatibilität

Siehe auch

Link HTTP-Header
Referrer-Policy 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