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 Link-Element für externe Ressourcen

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, es wird jedoch auch genutzt, um Website-Icons festzulegen (sowohl "Favicon"-Stil-Icons als auch Icons für den Startbildschirm und Apps auf mobilen Geräten), 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 innerhalb Ihres<head> wie folgt ein:

html

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

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

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

html

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

Es gibt eine Reihe weitererrel Werte für Icons, die hauptsächlich zur Angabe spezieller Icon-Typen für die Nutzung auf verschiedenen mobilen Plattformen verwendet werden, z.B.:

html

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

Dassizes Attribut gibt die Größe des Icons an, währendtype den MIME-Typ der verlinkten Ressource enthält. Diese bieten nützliche Hinweise, damit der Browser das am besten geeignete verfügbare Icon auswählen kann.

Sie können auch einen Medientyp oder eine Mediensuche in einemmedia Attribut 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 Sicherheitsfeatures wurden auch dem<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 vorladen soll (sieherel="preload" für weitere Informationen), mit demas Attribut, das die spezifische Klasse des abgerufenen Inhalts angibt. Dascrossorigin Attribut gibt an, ob die Ressource mit einerCORS Anfrage abgerufen werden soll.

Weitere Hinweise zur Verwendung:

Ein<link> Element kann entweder im<head> oder im<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. 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.
Beim Einsatz von<link>, um ein Favicon für eine Seite zu etablieren, und Ihre Seite verwendet eine Content Security Policy (CSP), um ihre Sicherheit zu erhöhen, gilt die Richtlinie für das Favicon. Wenn Sie Probleme damit haben, dass das Favicon nicht geladen wird, überprüfen Sie, ob dieContent-Security-Policy Headerimg-src Richtlinie den Zugriff darauf nicht verhindert.
Die HTML und XHTML Spezifikationen definieren Ereignishandler für das<link> Element, aber es ist unklar, wie sie verwendet werden würden.
Unter XHTML 1.0 erfordernleere Elemente wie<link> einen abschließenden Schrägstrich:<link />.
WebTV unterstützt die Nutzung des Wertsnext fürrel, um die nächste Seite in einer Dokumentreihe vorzuladen.

Attribute

Dieses Element beinhaltet dieglobalen Attribute.

as

Dieses Attribut ist erforderlich, wennrel="preload" auf dem<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 Request-Abgleich, Anwendung der korrektenContent Security Policy und Einstellen des korrektenAccept Anfrage-Headers.

Des Weiteren nutztrel="preload" dieses 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, auf.

Wert	Gilt für
audio	`<audio>` Elemente
document	`<iframe>` und`<frame>` Elemente
embed	`<embed>` Elemente
fetch	fetch, XHR Hinweis: Dieser Wert erfordert ebenfalls, dass`<link>` das crossorigin Attribut enthält, sieheCORS-fähige Abrufe.
font	CSS @font-face Hinweis: Dieser Wert erfordert ebenfalls, dass`<link>` das crossorigin Attribut enthält, sieheCORS-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 zeigt explizit an, dass bestimmte Operationen blockiert werden sollten, bis spezifische Bedingungen erfüllt sind. Es darf nur verwendet werden, wenn dasrel Attribut die Schlüsselwörterexpect oderstylesheet enthält. Mitrel="expect" zeigt es an, dass Operationen blockiert werden sollten, bis ein bestimmter DOM-Knoten geparst wurde. Mitrel="stylesheet" zeigt es an, dass Operationen blockiert werden sollten, bis ein externes Stylesheet und seine kritischen Teilressourcen 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 folgenden Liste enthalten. Derzeit gibt es nur ein Token:

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

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

crossorigin

Diesesenumerierte Attribut gibt an, obCORS für das Abrufen der Ressource verwendet werden muss.CORS-fähige Bilder können im<canvas> Element ohneVerfälschung wiederverwendet werden.Die erlaubten Werte sind:

anonymous: Eine Cross-Origin-Anfrage (d.h. mit einemOrigin HTTP-Header) wird durchgeführt, aber es werden keine Anmeldedaten gesendet (d.h. kein Cookie, X.509-Zertifikat oder HTTP-Authentifizierung).Wenn der Server keine Anmeldedaten an die Ursprungsseite übermittelt (indem er denAccess-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 einemOrigin HTTP-Header) wird zusammen mit einer Anmeldedatenübermittlung durchgeführt (d.h. ein Cookie, ein Zertifikat und/oder eine HTTP-Authentifizierung wird durchgeführt).Wenn der Server keine Anmeldedaten an die Ursprungsseite übermittelt (durch denAccess-Control-Allow-Credentials HTTP-Header), wird die Ressourceverfälscht und ihre Nutzung eingeschränkt.

Ist das Attribut nicht vorhanden, wird die Ressource ohne eineCORS Anfrage abgerufen (d.h. ohne denOrigin HTTP-Header zu senden), wodurch deren nicht-verfälschte Nutzung verhindert wird. Gilt es als ungültig, wird es behandelt, als wäre das enumerierte Schlüsselwortanonymous verwendet worden.Weitere Informationen finden Sie unterCORS-Einstellungen Attribute.

disabled

Nur fürrel="stylesheet" gilt: Dasdisabled Boolesche Attribut gibt an, ob das beschriebene Stylesheet geladen und auf das Dokument angewendet werden soll. Wenndisabled im HTML angegeben ist, während es geladen wird, wird das Stylesheet nicht während des Seitenladevorgangs geladen. Stattdessen wird das Stylesheet bei Bedarf geladen, wenn dasdisabled Attribut auffalse geändert wird oder entfernt wird.

Das Setzen derdisabled Eigenschaft im DOM führt dazu, dass das Stylesheet aus 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: Ruft die Ressource mit einer hohen Priorität im Vergleich zu anderen Ressourcen desselben Typs ab.
low: Ruft die Ressource mit einer niedrigen Priorität im Vergleich zu anderen Ressourcen desselben Typs ab.
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 festgelegt ist.

href

Dieses Attribut gibt dieURL 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.Die Werte sollten gültigeBCP 47 Sprachkennzeichnungen sein.Verwenden Sie dieses Attribut nur, wenn dashref Attribut vorhanden ist.

imagesizes

Nur fürrel="preload" undas="image" gilt: Dasimagesizes Attribut hat eine ähnliche Syntax und Semantik wie dassizes Attribut, das die entsprechende Ressource anzeigt, die von einemimg Element mit entsprechenden Werten für seinesrcset undsizes Attribute vorab geladen werden soll.

imagesrcset

Nur fürrel="preload" undas="image" gilt: Dasimagesrcset Attribut hat eine ähnliche Syntax und Semantik wie dassrcset Attribut, das angibt, die entsprechende Ressource anzuzeigen, die von einemimg Element mit entsprechenden Werten für seinesrcset undsizes Attribute vorab geladen werden soll.

integrity

Enthält Inline-Metadaten — einen base64-codierten kryptografischen Hash der Ressource (Datei), die Sie dem Browser zum Abrufen angeben.Der Browser kann dies verwenden, um sicherzustellen, dass die abgerufene Ressource ohne unerwartete Manipulation geliefert wurde.Das Attribut darf nur angegeben werden, wenn dasrel Attribut aufstylesheet,preload odermodulepreload gesetzt ist.SieheSubressource-Integrität.

media

Dieses Attribut gibt die Medien an, auf die die verlinkte Ressource angewendet wird. Sein Wert muss ein Medientyp /Medienanfrage sein.Dieses Attribut ist hauptsächlich nützlich, wenn Sie auf externe Stylesheets verlinken — es ermöglicht dem Benutzeragenten, das am besten geeignete für das Gerät auszuwählen, auf dem es läuft.

referrerpolicy

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

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, der ungefähr dem Schema, dem Host und dem Port entspricht.
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 Pfad des Referrers beinhaltet.
same-origin bedeutet, dass der Referrer (Ursprung, Pfad und Abfragezeichenfolge) für gleicharyige Anfragen gesendet wird, aber kein Referrer für andere Ursprünge gesendet wird.
strict-origin bedeutet, dass nur der Ursprung gesendet wird, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS). Kein Referrer wird an weniger sichere Ziele gesendet (HTTPS→HTTP). Dies ist wichtig für HTTPS Seiten, da es verhindert, dass Referer-Informationen an unsichere Ursprünge gelangen.
strict-origin-when-cross-origin bedeutet, dass der vollständige Referrer für gleiche Ursprungsanfragen gesendet wird. Für andere Ursprungsanfragen 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 Privatsphäre und Sicherheit für HTTPS-Seiten ausbalanciert.
unsafe-url bedeutet, dass der Referrer den Ursprung und den Pfad enthält (jedoch nicht das Fragment, das Passwort oder den Benutzernamen).Diese Option ist unsicher, da sie Ursprünge und Pfade von TLS-geschützten Ressourcen zu unsicheren Ursprüngen durchsickern lassen kann.

rel

Dieses Attribut benennt eine Beziehung des verlinkten Dokuments zum aktuellen Dokument. Das Attribut muss eine durch Leerzeichen getrennte Liste vonLink-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 dasrel einen Wert vonicon oder einen nicht standardmäßigen Typ wie Applesapple-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 ist, wieimage/svg+xml.
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 dassizes Attribut meistens 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 eine browserübergreifende Unterstützung ein Anliegen ist.

title

Dastitle Attribut hat spezielle Bedeutungen auf dem<link> Element.Wenn es auf einem<link rel="stylesheet"> verwendet wird, definiert es einStandard- 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 wietext/html,text/css usw. sein.Die übliche Verwendung dieses Attributs besteht darin, den Typ des referenzierten Stylesheets zu definieren (wietext/css), aber da CSS die einzige Stylesheet-Sprache ist, die im Web verwendet wird, ist es nicht nur möglich, dastype Attribut wegzulassen, es wird tatsächlich jetzt empfohlen, dies zu tun.Es wird auch beirel="preload" Link-Typen verwendet, um sicherzustellen, dass der Browser nur Dateitypen herunterlädt, die er unterstützt.

Nicht standardmäßige Attribute

targetVeraltet: Definiert den Namen des Frames oder Fensters, der die definierte Verknüpfungsbeziehung hat oder das die Darstellung einer beliebigen verlinkten Ressource anzeigt.

Obsolete Attribute

charsetVeraltet: Dieses Attribut definiert die Zeichenkodierung der verlinkten 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 mit diesem veralteten Attribut zu erzielen, verwenden Sie denContent-Type HTTP-Header auf der verlinkten Ressource.
revVeraltet: Der Wert dieses Attributs zeigt die Beziehung des aktuellen Dokuments zum verlinkten Dokument an, wie durch dashref Attribut definiert.Das Attribut definiert somit die umgekehrte Beziehung im Vergleich zu dem Wert desrel Attributs.Link-Typ-Werte für das Attribut sind ähnlich den möglichen Werten fürrel.
Hinweis:Anstelle vonrev sollten Sie dasrel Attribut mit dem gegenteiligenLink-Typ-Wert verwenden.Zum Beispiel, um den umgekehrten Link fürmade zu etablieren, spezifiziereauthor. Außerdem steht dieses Attribut nicht für "Revision" und darf nicht mit einer Versionsnummer verwendet werden, obwohl viele Websites es in dieser Weise missbrauchen.

Beispiele

Ein Stylesheet einschließen

Um ein Stylesheet in eine Seite einzuschließen, verwenden Sie die folgende Syntax:

html

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

Alternative Stylesheets bereitstellen

Sie können auchalternative Stylesheets angeben.

Der Benutzer kann auswählen, welches Stylesheet verwendet werden soll, indem er es aus dem MenüAnsicht > Seitenstil auswählt. Dies bietet dem Benutzer die Möglichkeit, 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" />

Icons für verschiedene Nutzungskontexte bereitstellen

Sie können Links zu mehreren Icons auf derselben Seite inkludieren und der Browser wird auswählen, welches am besten für seinen speziellen Kontext geeignet ist, indem dierel undsizes Werte als Hinweise genutzt werden.

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, welchesizes für Apple-Icons zu wählen sind, sieheApples Dokumentation zur Konfiguration von Webanwendungen und die referenziertenApple Human Interface Guidelines. Gewöhnlich reicht es aus, ein großes Bild bereitzustellen, wie 192x192, und den Browser es bei Bedarf skaliere, jedoch möchten Sie vielleicht Bilder mit unterschiedlichen Detailstufen für verschiedene Größen bereitstellen, wie die Apple Designrichtlinien empfehlen. Kleinere Icons für niedrigere Auflösungen bereitzustellen spart ebenfalls Bandbreite.

Es kann nicht nötig sein,<link> Elemente überhaupt bereitzustellen. Zum Beispiel fordern Browser automatisch/favicon.ico vom Wurzelverzeichnis einer Site an und Apple fordert ebenfalls automatisch/apple-touch-icon-[size].png,/apple-touch-icon.png usw. an. Jedoch schützt das explizite Bereitstellen von Links Sie vor Änderungen dieser Konventionen.

Bedingt Ressourcen mit Medienabfragen laden

Sie können einen Medientyp oder eine Mediensuche in einemmedia Attribut 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="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 bestimmen, wann ein Stylesheet geladen wurde, indem Sie auf einload Ereignis warten; ähnlich können Sie erkennen, ob ein Fehler beim Verarbeiten eines Stylesheets aufgetreten ist, indem Sie auf einerror Ereignis achten:

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 tritt auf, sobald das Stylesheet und der gesamte importierte Inhalt geladen und geparst wurden und unmittelbar bevor die Stile auf den Inhalt angewendet werden.

Preload-Beispiele

Eine Anzahl von<link rel="preload"> Beispielen finden Sie inInhalte mitrel="preload" vorladen.

Rendering blockieren, bis eine Ressource abgerufen wurde

Sie können dasrender Token innerhalb einesblocking Attributs einfügen; das Rendern der Seite wird blockiert, bis die Ressource und ihre kritischen Teilressourcen abgerufen und auf das Dokument angewendet werden. Zum Beispiel:

html

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

Technische Zusammenfassung

Inhaltskategorien	Metadateninhalt. Wenn`itemprop` vorhanden ist:Flussinhalt undFormulierungskontent.
Zulässiger Inhalt	Keiner; es ist einleeres Element.
Tag Auslassung	Muss einen Starttag haben und darf keinen Endtag haben.
Zulässige Eltern	Jedes Element, das Metadaten-Elemente akzeptiert. Wennitemprop vorhanden ist: jedes Element, dasFormulierungskontent akzeptiert.
Implizite ARIA Rolle	`link` mit`href` Attribut
Zulässige 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

Movatterモバイル変換

<link>: Das Link-Element für externe Ressourcen

Help improve MDN