HTML <link>-Tag

Das <link>-Tag definiert die Beziehung zwischen dem aktuellen Dokument und einer externen Ressource. Seine häufigste Aufgabe besteht darin, ein externes CSS-Stylesheet einzubinden, aber es wird auch verwendet, um ein Favicon hinzuzufügen, übersetzte Versionen einer Seite zu deklarieren und dem Browser Hinweise zu geben, welche Ressourcen frühzeitig für eine bessere Leistung geladen werden sollen.

Diese Seite behandelt die Syntax von <link>, alle Attribute, die es akzeptiert, sowie praktische Beispiele für die rel-Werte, die am häufigsten benötigt werden: stylesheet, icon, preload und alternate. Sie erklärt auch die Resource-Hint-Familie (preload, prefetch, preconnect, dns-prefetch) sowie die Sicherheitsattribute crossorigin und integrity.

Zu beachten ist, dass <link> keine Skripte lädt — das ist die Aufgabe des <script>-Tags. Die einzige Ausnahme ist rel="modulepreload", das ein JavaScript-Modul nur vorab abruft, damit es bereit ist, wenn ein <script> es später anfordert.

Ein HTML-Dokument kann mehrere <link>-Elemente für verschiedene Ressourcentypen enthalten, wie Stylesheets, Icons und vorgeladene Inhalte. Alle gehören in den <head>-Abschnitt des Dokuments, typischerweise vor dem schließenden </head>-Tag.

Syntax

Das <link>-Tag ist leer, das heißt, das schließende Tag ist nicht erforderlich. Es enthält nur Attribute. In XHTML muss das <link>-Tag jedoch geschlossen werden (<link/>).

Beispiel des HTML-`<link>`-Tags:

HTML <link>-Tag

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>The appearance of the header is determined by the CSS styles specified in the external file.</h1>
    <p>The appearance of the paragraph is determined by the CSS styles specified in the external file.</p>
  </body>
</html>

Probier es selbst »

In diesem Beispiel hat die Seite kein eigenes Styling. Jede Regel, die das Aussehen der Überschrift und des Absatzes steuert, befindet sich in der externen Datei style.css, die das <link>-Element einbindet. Öffnen Sie den Live-Editor oben und bearbeiten Sie style.css, um zu sehen, wie sich die Änderungen auf das Markup auswirken.

Ein Favicon einbinden

Ein Favicon ist das kleine Symbol, das im Browser-Tab und in Lesezeichen angezeigt wird. Es wird mit rel="icon" deklariert. Das type-Attribut teilt dem Browser das Bildformat mit, und sizes ermöglicht es, mehrere Auflösungen anzubieten, sodass der Browser die beste auswählen kann.

<head>
  <!-- A standard favicon -->
  <link rel="icon" href="/favicon.ico" sizes="any" />

  <!-- A modern SVG icon (scales to any resolution) -->
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />

  <!-- A PNG at a specific size -->
  <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png" />

  <!-- Icon used when the page is added to an iOS home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

sizes="any" markiert ein skalierbares Symbol (z. B. .ico oder .svg); andernfalls verwenden Sie BREITExHÖHE (zum Beispiel 32x32) pro Datei.

Ressourcen vorladen mit `rel="preload"`

rel="preload" weist den Browser an, eine Ressource frühzeitig und mit hoher Priorität abzurufen, bevor der Parser sie normalerweise entdecken würde. Es wendet die Ressource nicht an — es lädt sie nur herunter, damit die Datei bereits gecacht ist, wenn sie benötigt wird.

Wenn Sie preload verwenden, ist das as-Attribut erforderlich. Es teilt dem Browser den Ressourcentyp mit, damit er die richtige Priorität setzen, den richtigen Accept-Header senden und die korrekten CORS- und Content-Security-Policy-Prüfungen auslösen kann.

<head>
  <!-- Preload a stylesheet -->
  <link rel="preload" href="/main.css" as="style" />

  <!-- Preload a font (fonts are always fetched with CORS, so crossorigin is required) -->
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

  <!-- Preload an image that is the page's largest element -->
  <link rel="preload" href="/hero.jpg" as="image" />
</head>

Ein vorgeladenes Stylesheet benötigt weiterhin einen normalen rel="stylesheet"-Link (oder ein <style>/@import), um tatsächlich auf die Seite angewendet zu werden — preload allein lädt es nur herunter.

Resource Hints: preload vs. prefetch vs. preconnect vs. dns-prefetch

Diese vier rel-Werte verbessern alle die Leistung, lösen aber unterschiedliche Probleme und sind nicht austauschbar:

`rel`-Wert	Was es tut	Wann verwenden
`preload`	Lädt eine Ressource, die die aktuelle Seite bald benötigt, mit hoher Priorität herunter.	Kritisches CSS, Schriftarten, das LCP-Bild — Dateien, die sonst spät entdeckt würden.
`prefetch`	Lädt eine Ressource, die eine zukünftige Navigation wahrscheinlich benötigt, mit niedriger Priorität herunter.	Assets für die nächste Seite, die der Benutzer wahrscheinlich besuchen wird.
`preconnect`	Öffnet die Verbindung (DNS + TCP + TLS-Handshake) zu einem anderen Ursprung im Voraus.	Ursprünge, von denen Sie bald definitiv Anfragen senden werden, wie ein Schrift- oder API-Host.
`dns-prefetch`	Löst nur den DNS für einen Ursprung auf. Günstiger als `preconnect` und ein guter Fallback.	Ursprünge, die Sie möglicherweise verwenden, oder als Ergänzung zu `preconnect` für ältere Browser.

<head>
  <!-- Open the connection to the font host as early as possible -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <!-- Fallback DNS lookup for browsers that ignore preconnect -->
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

  <!-- Warm up an asset the next page will need -->
  <link rel="prefetch" href="/next-page.js" as="script" />
</head>

Faustregel: preload für diese Seite, prefetch für die nächste Seite und preconnect / dns-prefetch zum Aufwärmen von Verbindungen zu anderen Ursprüngen.

Alternative Versionen mit `rel="alternate"`

rel="alternate" verweist auf eine alternative Darstellung des aktuellen Dokuments. In Kombination mit hreflang teilt es Suchmaschinen mit, welche URL welche Sprache oder Region bedient — unverzichtbar für mehrsprachige Websites.

<head>
  <link rel="alternate" hreflang="en" href="https://example.com/en/" />
  <link rel="alternate" hreflang="de" href="https://example.com/de/" />
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
  <!-- Default fallback when no language matches -->
  <link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>

Derselbe rel-Wert deklariert auch Nicht-HTML-Alternativen, wie einen RSS-Feed:

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml" />

`crossorigin` und `integrity`

Das crossorigin-Attribut steuert, ob die Cross-Origin-Anfrage mit CORS gestellt wird und ob Anmeldedaten (Cookies) gesendet werden:

crossorigin="anonymous" (oder einfach crossorigin) — stellt eine CORS-Anfrage ohne Anmeldedaten.
crossorigin="use-credentials" — stellt eine CORS-Anfrage, die Anmeldedaten enthält.

crossorigin wird immer dann benötigt, wenn der Browser die Antwort über Ursprünge hinweg lesen muss, am häufigsten bei Schriftarten (die immer im CORS-Modus abgerufen werden) und bei jeder Ressource, die Sie mit integrity schützen.

Das integrity-Attribut aktiviert Subresource Integrity (SRI). Sie geben einen kryptographischen Hash der Datei an; der Browser ruft die Ressource ab, berechnet ihren Hash und verweigert die Anwendung, wenn die Hashes nicht übereinstimmen. Dies schützt Sie, wenn ein CDN kompromittiert wurde oder eine Datei manipuliert wurde.

<link
  rel="stylesheet"
  href="https://cdn.example.com/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
/>

Das Hash-Format ist <algorithm>-<base64-hash> (erlaubte Algorithmen: sha256, sha384, sha512). Da die Integritätsprüfung die Antwort lesen muss, muss ein integrity-Link zu einem anderen Ursprung auch crossorigin setzen.

Attribute

Attribut	Wert	Beschreibung
as	content_type	Gibt den Typ des geladenen Inhalts an. Erforderlich bei `rel="preload"`.
charset	char_encoding	Definiert die Kodierung des verknüpften Dokuments. Veraltet in HTML5.
crossorigin	anonymous use-credentials	Konfiguriert CORS-Einstellungen für die verknüpfte Ressource.
href	URL	Definiert die URL der externen Datei.
hreflang	language_code	Definiert die Textsprache des verknüpften Dokuments.
integrity	hash_value	Aktiviert Subresource Integrity zur Überprüfung abgerufener Ressourcen.
media	media_query	Definiert das Gerät, für das die Styles angewendet werden.
rel	alternate author bookmark dns-prefetch first help icon last license next nofollow noreferrer pingback preload prefetch prev search stylesheet tag preconnect manifest modulepreload	Definiert die Beziehung zwischen dem aktuellen Dokument und der verknüpften Datei. Häufige Werte: `stylesheet` (bindet eine CSS-Datei ein), `icon` (verknüpft ein Favicon), `preload` (lädt eine Ressource vor), `alternate` (verweist auf eine alternative Version des Dokuments).
rev	reversed relationship	Definiert die Beziehung zwischen dem aktuellen und dem verknüpften Dokument. Veraltet in HTML5.
sizes	Width x Height	Legt die Größe zugehöriger Icons fest. Wird nur mit `rel="icon"` verwendet.
type	media_type	Definiert den MIME-Typ (Spezifikation für den Netzwerktransfer verschiedener Dateitypen) des verknüpften Dokuments. Hinweis: Beim Verknüpfen eines Stylesheets ist `type="text/css"` optional und standardmäßig CSS.

Das <link>-Tag unterstützt auch Globale Attribute und die Ereignisattribute.

Übungen

Übung

Welches Attribut ist erforderlich, wenn Sie das HTML-link-Tag mit rel='preload' verwenden?

assrctargetdownload

Übung

Wählen Sie alle gültigen Attribute des HTML-link-Tags aus (mehr als eine Antwort ist korrekt).

Syntax

Beispiel des HTML-<link>-Tags:

Ein Favicon einbinden

Ressourcen vorladen mit rel="preload"