Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

<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 aufStylesheets zu verlinken, wird aber auch zur Einrichtung von Webseite-Icons (sowohl "favicon"-ähnlichen Icons als auch Icons für den Startbildschirm und Apps auf mobilen Geräten) verwendet, 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>  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> ein, wie folgt:

html

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

Dieses Beispiel weist den Pfad zum Stylesheet imhref Attribut und einemrel Attribut mit dem Wertstylesheet zu.rel steht für "relationship" (Beziehung) und ist eines der Kernelemente des<link> Elements — der Wert gibt an, wie das verlinkte Element zum enthaltenen Dokument in Beziehung steht.

Es gibt eine Vielzahl anderer üblicher Typen, denen Sie begegnen werden. Beispielsweise ein Link zum Favicon der Website:

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 zu kennzeichnen, z.B.:

html

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

Dassizes Attribut gibt die Icon-Größe an, währendtype den MIME-Typ der verlinkten Ressource enthält.Diese bieten nützliche Hinweise, um dem Browser die Auswahl des am besten geeigneten Icons zu erleichtern.

Sie können auch einen Medientyp oder eine Abfrage innerhalb einesmedia Attributs bereitstellen; 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 Sicherheitsfunktionen wurden ebenfalls zum<link> Element hinzugefügt. Nehmen Sie dieses Beispiel:

html

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

Einrel-Wert vonpreload zeigt an, dass der Browser diese Ressource vorab laden soll (sieherel="preload" für mehr Details), wobei dasas Attribut die spezifische Klasse der geladenen Inhalte angibt.Dascrossorigin Attribut zeigt an, ob die Ressource mit einerCORS-Anfrage abgerufen werden soll.

Weitere Nutzungshinweise:

Ein<link> Element kann entweder im<head> oder<body> Element vorkommen, abhängig davon, ob es einenLink-Typ hat, derbody-ok ist.Zum Beispiel ist derstylesheet Link-Typ body-ok, und daher ist<link rel="stylesheet"> im Body erlaubt.Es ist jedoch keine gute Praxis, dem zu folgen; es macht mehr Sinn, Ihre<link> Elemente von Ihrem Body-Inhalt zu trennen, indem Sie sie in den<head> stellen.
Wenn Sie<link> verwenden, um ein Favicon für eine Website einzurichten, und Ihre Website eine Content Security Policy (CSP) verwendet, um die Sicherheit zu erhöhen, gilt die Richtlinie für das Favicon.Wenn es Probleme gibt, dass das Favicon nicht lädt, überprüfen Sie, dass dieContent-Security-Policy Überschrift'simg-src Anweisung den Zugriff 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 erfordernvoid elements wie<link> einen Schrägstrich am Ende:<link />.
WebTV unterstützt die Verwendung des Wertesnext fürrel, um die nächste Seite in einer Dokumentenreihe vorab zu laden.

Attribute

Dieses Element schließt dieglobalen Attribute ein.

as

Dieses Attribut ist erforderlich, wennrel="preload" auf dem<link> Element gesetzt wurde, optional wennrel="modulepreload" gesetzt ist, und sonst sollte es nicht verwendet werden.Es spezifiziert den Typ der von<link> geladenen Inhalte, was notwendig ist für Abgleich der Anforderung, Anwendung der richtigenContent Security Policy und Festlegung des korrektenAccept Anfrage-Headers.

Darüber hinaus verwendetrel="preload" dies als Signal zur Priorisierung der Anfrage.Die folgende Tabelle listet die gültigen Werte für dieses Attribut und die Elemente oder Ressourcen, auf die sie angewendet werden können.

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, sieheCORS-activierte Abrufe.
font	CSS @font-face Hinweis: Dieser Wert erfordert auch, dass`<link>` das `crossorigin` Attribut enthält, sieheCORS-activierte 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>` Element, CSS`@import`
track	`<track>` Elemente
video	`<video>` Elemente
worker	Worker, SharedWorker

blocking

Dieses Attribut gibt explizit an, dass bestimmte Operationen blockiert werden sollen, bis spezifische Bedingungen erfüllt sind. Es darf nur verwendet werden, wenn dasrel Attribut die Schlüsselwörterexpect oderstylesheet enthält. Beirel="expect" zeigt es an, dass Operationen blockiert werden sollen, bis ein bestimmter DOM-Knoten geparst wurde. Beirel="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 Operationen, die blockiert werden sollen, müssen eine durch Leerzeichen getrennte Liste von Blockierungs-Tokens aus der unten angegebenen Liste sein. Derzeit gibt es nur ein Token:

render: Die Darstellung des Inhalts auf dem Bildschirm wird blockiert.

Hinweis:Nurlink Elemente im<head> des Dokuments können möglicherweise die Darstellung blockieren. Standardmäßig blockiert einlink Element mitrel="stylesheet" im<head> die Darstellung, wenn der Browser es beim Parsen entdeckt. Wenn ein solcheslink Element dynamisch über ein Skript hinzugefügt wird, müssen Sie zusätzlichblocking = "render" setzen, damit es die Darstellung blockiert.

crossorigin

DiesesAufzählungs- Attribut gibt an, obCORS beim Abrufen der Ressource verwendet werden muss.CORS-aktivierte Bilder können im<canvas> Element wiederverwendet werden, ohne dass sieverunreinigt werden.Die erlaubten Werte sind:

anonymous: Eine Cross-Origin-Anfrage (d.h. mit einemOrigin HTTP-Header) wird durchgeführt, aber keine Anmeldeinformationen werden gesendet (d.h. kein Cookie, kein X.509-Zertifikat und keine HTTP-Basisauthentifizierung).Wenn der Server keine Anmeldeinformationen zur Ursprungsseite gewährt (indem er denAccess-Control-Allow-Origin HTTP-Header nicht setzt), wird die Ressource verunreinigt und ihre Nutzung eingeschränkt sein.
use-credentials: Eine Cross-Origin-Anfrage (d.h. mit einemOrigin HTTP-Header) wird zusammen mit einer Anmeldeinformation (d.h. ein Cookie, Zertifikat und/oder HTTP-Basisauthentifizierung wird durchgeführt) durchgeführt.Wenn der Server keine Anmeldeinformationen zur Ursprungsseite übermittelt (durch denAccess-Control-Allow-Credentials HTTP-Header), wird die Ressourceverunreinigt und ihre Nutzung eingeschränkt.

Wenn das Attribut nicht vorhanden ist, wird die Ressource ohne eineCORS Anfrage abgerufen (d.h. ohne denOrigin HTTP-Header zu senden), wodurch ihre nicht-verunreinigte Nutzung verhindert wird. Falls ungültig, wird es behandelt, als ob das aufgelistete Schlüsselwortanonymous verwendet wurde.Sehen Sie sichCORS-Einstellungsattribute für zusätzliche Informationen an.

disabled

Nur fürrel="stylesheet" gibt dasdisabled Boolean-Attribut an, ob das beschriebene Stylesheet geladen und auf das Dokument angewendet werden soll.Wenndisabled in dem HTML zur Ladezeit angegeben ist, wird das Stylesheet während des Seitenladens nicht geladen.Stattdessen wird das Stylesheet bei Bedarf geladen, wenn und wann dasdisabled Attribut auffalse geändert oder entfernt wird.

Das Setzen derdisabled Eigenschaft im DOM bewirkt, dass das Stylesheet aus derDocument.styleSheets Liste des Dokuments entfernt wird.

fetchpriority

Stellt einen Hinweis auf die relative Priorität zur Verfügung, die beim Abrufen einer Ressource eines bestimmten Typs verwendet werden soll. Erlaubte Werte:

high: Holen Sie die Ressource mit hoher Priorität im Verhältnis zu anderen Ressourcen desselben Typs ein.
low: Holen Sie die Ressource mit niedriger Priorität im Verhältnis zu anderen Ressourcen desselben Typs ein.
auto: Es wird keine Präferenz für die Abrufpriorität festgelegt.Dies ist der Standard.Es wird verwendet, wenn kein Wert oder ein ungültiger Wert gesetzt ist.

href

Dieses Attribut spezifiziert dieURL der verlinkten Ressource. Eine URL kann absolut oder relativ sein.

hreflang

Dieses Attribut gibt die Sprache der verlinkten Ressource an.Es ist rein beratend.Werte sollten gültigeBCP 47 Sprach-Tags sein.Verwenden Sie dieses Attribut nur, wenn dashref Attribut vorhanden ist.

imagesizes

Nur fürrel="preload" undas="image" hat dasimagesizes Attribut eine ähnliche Syntax und Semantik wie dassizes Attribut, das das vorzuladende geeignete Ressourcen festlegt, das von einemimg Element mit entsprechenden Werten für seinesrcset undsizes Attribute verwendet wird.

imagesrcset

Nur fürrel="preload" undas="image" hat dasimagesrcset Attribut eine ähnliche Syntax und Semantik wie dassrcset Attribut, das das vorzuladende geeignete Ressourcen festlegt, das von einemimg Element mit entsprechenden Werten für seinesrcset undsizes Attribute verwendet wird.

integrity

Beinhaltet Inline-Metadaten — eine base64-kodierte kryptografische Prüfsumme der Ressource, die der Browser abrufen soll.Der Browser kann dies verwenden, um zu überprüfen, dass die abgerufene Ressource ohne unerwartete Manipulationen geliefert wurde.Das Attribut muss nur dann angegeben werden, wenn dasrel Attribut aufstylesheet,preload, odermodulepreload festgelegt ist.SieheSubresource Integrity.

media

Dieses Attribut gibt die Medien an, auf die die verlinkte Ressource angewendet wird. Sein Wert muss ein Medientyp /media query sein.Dieses Attribut ist hauptsächlich nützlich, wenn auf externe Stylesheets verlinkt wird — es ermöglicht es dem Benutzeragenten, das am besten angepasste für das Gerät auszuwählen, auf dem es ausgeführt wird.

referrerpolicy

Ein String, der angibt, welchen Referrer beim Abrufen der Ressource verwendet werden soll:

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 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 betrifft.
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 beim Navigieren am selben Ursprung der Pfad des Referrers enthalten ist.
unsafe-url bedeutet, dass der Referrer den Ursprung und den Pfad (aber nicht das Fragment, Passwort oder den Benutzernamen) umfassen wird.Dieser Fall ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen zu unsicheren Ursprüngen leaken kann.

rel

Dieses Attribut benennt eine Beziehung des verlinkten Dokuments zum aktuellen Dokument. Das Attribut muss eine durch Leerzeichen getrennte Liste vonlink type values sein.

sizes

Dieses Attribut definiert die Größen der Icons für visuelle Medien, die in der Ressource enthalten sind.Es muss nur dann vorhanden sein, wenn dasrel Attribut einen Wert vonicon oder einen nicht standardmäßigen Typ wie Applesapple-touch-icon enthält.Es kann die folgenden Werte haben:

any, bedeutet, dass das Icon auf jede Größe skaliert werden kann, da es sich im Vektorformat befindet, wieimage/svg+xml.
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 dassizes Attribut die meiste Zeit nur einen Eintrag.Microsofts ICO Format und Apples ICNS Format können mehrere Icon-Größen in einer einzigen Datei speichern. ICO hat bessere Browser-Unterstützung, daher sollten Sie dieses Format verwenden, wenn plattformübergreifende Unterstützung wichtig ist.

title

Dastitle Attribut hat spezielle Semantik auf dem<link> Element.Wenn es auf einem<link rel="stylesheet"> verwendet wird, definiert es einStandard- oder alternatives Stylesheet.

type

Dieses Attribut wird verwendet, um den Typ des verlinkten Inhalts zu definieren.Der Wert des Attributs sollte ein MIME-Typ wietext/html,text/css usw. sein.Der übliche Gebrauch dieses Attributes ist es, den Typ des referenzierten Stylesheets zu definieren (zum Beispieltext/css), aber da CSS die einzige Stylesheet-Sprache im Web ist, ist es nicht nur möglich, dastype Attribut wegzulassen, es wird sogar empfohlen.Es wird auch beirel="preload" Link-Typen verwendet, um sicherzustellen, dass der Browser nur Dateitypen herunterlädt, die er unterstützt.

Nicht-standardisierte Attribute

targetVeraltet: Definiert den Name des Fensters oder Frames, das die definierte Verknüpfungsbeziehung hat oder das die Darstellung jeder verknüpften Ressource zeigen wird.

Veraltete Attribute

charsetVeraltet: Dieses Attribut definiert die Zeichencodierung der verknüpften Ressource.Der Wert ist eine durch Leerzeichen und / oder Kommas getrennte Liste von Zeichensätzen, wie inRFC 2045 definiert.Der Standardwert istiso-8859-1.
Hinweis:Um denselben Effekt wie dieses veraltete Attribut zu erzielen, verwenden Sie denContent-Type HTTP-Header auf der verknüpften Ressource.
revVeraltet: Der Wert dieses Attributs zeigt die Beziehung des aktuellen Dokuments zum verlinkten Dokument, wie durch dashref Attribut definiert, an.Das Attribut definiert somit die umgekehrte Beziehung im Vergleich zum Wert desrel Attributs.Linktyp-Werte für das Attribut sind ähnlich wie die möglichen Werte fürrel.
Hinweis:Stattrev sollten Sie dasrel Attribut mit dem umgekehrtenlinktyp-Wert verwenden.Zum Beispiel, um den umgekehrten Link fürmade festzustellen, geben Sieauthor an. Dieses Attribut steht nicht für "revision" (Version) und darf nicht mit einer Versionsnummer verwendet werden, auch wenn viele Seiten es auf diese Weise missbrauchen.

Beispiele

Einbinden eines Stylesheets

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

html

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

Bereitstellung alternativer Stylesheets

Sie können auchalternative Stylesheets angeben.

Der Benutzer kann auswählen, welches Stylesheet verwendet werden soll, indem er es aus demAnsicht > Seitendesign Menü auswählt.Dies bietet eine Möglichkeit, mehrere Versionen einer Seite für Benutzer zugänglich zu machen.

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

Sie können Verknüpfungen zu mehreren Icons auf derselben Seite einfügen, und der Browser wird basierend auf dem Kontext auswählen, welches am besten funktioniert, indem er dierel undsizes Werte als Hinweis 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, welchesizes für Apple-Icons zu wählen sind, sieheApples Dokumentation zur Konfiguration von Webanwendungen und den verlinktenApple Human Interface Guidelines. Normalerweise genügt es, ein großes Bild wie 192x192 bereitzustellen und den Browser es nach Bedarf verkleinern zu lassen, aber möglicherweise möchten Sie Bilder mit unterschiedlichen Detailstufen für verschiedene Größen bereitstellen, wie die Apple-Designrichtlinie empfiehlt. Kleinere Icons für niedrigere Auflösungen zu bereitzustellen, spart auch Bandbreite.

Es kann nicht notwendig sein,<link> Elemente überhaupt bereitzustellen. Zum Beispiel fordern Browser automatisch/favicon.ico vom Hauptverzeichnis einer Seite an, und Apple fordert auch automatisch/apple-touch-icon-[size].png,/apple-touch-icon.png usw. an. Durch explizite Links schützen Sie sich jedoch vor Änderungen dieser Konventionen.

Bedingtes Laden von Ressourcen mit Medienabfragen

Sie können eine Medientyp- oder Abfrage innerhalb einesmedia Attributs bereitstellen;diese Ressource wird dann nur geladen, wenn die Medienbedingung wahr ist. Beispielsweise:

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 ermitteln, wann ein Stylesheet geladen wurde, indem Sie auf einload Ereignis warten, das darauf ausgelöst wird; ähnlich können Sie erkennen, ob ein Fehler bei der Verarbeitung eines Stylesheets aufgetreten ist, indem Sie auf einerror Ereignis warten:

html

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

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:Dasload Ereignis wird ausgelöst, sobald das Stylesheet und alle importierten Inhalte geladen und geparst wurden und direkt bevor die Stile auf den Inhalt angewendet werden.

Preload-Beispiele

Sie finden eine Reihe von<link rel="preload"> Beispielen inInhalte vorladen mitrel="preload".

Blockieren der Darstellung bis eine Ressource abgerufen ist

Sie können einrender Token innerhalb einesblocking Attributs aufnehmen;die Darstellung 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	Metadateneinhalte. Wenn`itemprop` vorhanden ist:Flussinhalte undPhrasinhalte.
Erlaubter Inhalt	Keiner; es ist einvoid element.
Tag-Auslassung	Er muss einen Start-Tag haben und darf keinen End-Tag haben.
Erlaubte Eltern	Jedes Element, das Metadaten-Elemente akzeptiert. Wennitemprop vorhanden ist: jedes Element, dasPhrasinhalte 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

Help improve MDN

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

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

Movatterモバイル変換

<link>: Das External Resource Link Element

Help improve MDN