<link>
Zuletzt aktualisiert am 3. Juli 2026
Das <link>-Element verbindet deine HTML-Seite mit externen Ressourcen wie CSS-Dateien, Icons oder Schriftarten. Es ist wichtig, dieses Element nicht mit dem <a>-Element zu verwechseln: Während <a> für klickbare Links im sichtbaren Bereich steht, ist <link> ein unsichtbares Meta-Element, das im <head> lebt und dem Browser mitteilt, welche externen Dateien er laden soll.
Grundlagen
Das <link>-Element ist ein void-Element, hat also kein schließendes Tag. Es steht immer im <head>-Bereich deiner HTML-Datei und ist für Nutzer unsichtbar. Die häufigste Verwendung ist das Einbinden von CSS-Stylesheets, aber du kannst damit auch Favicons definieren, Ressourcen vorladen oder Verbindungen zu anderen Domains vorbereiten.
Der Browser verarbeitet <link>-Elemente beim Laden der Seite und entscheidet anhand der Attribute, wie die verknüpfte Ressource behandelt werden soll. Das macht <link> zu einem wichtigen Werkzeug für Performance-Optimierung und korrekte Darstellung deiner Webseite.
Syntax
<link rel="stylesheet" href="styles.css">Attribute
| Attribut | Typ | Beschreibung | Beispiel |
|---|---|---|---|
rel | String | Definiert die Beziehung zwischen Dokument und verlinkter Ressource (z.B. stylesheet, icon, preload) | rel="stylesheet" |
href | URL | Die URL der externen Ressource (absolut oder relativ) | href="css/main.css" |
type | MIME-Type | Der MIME-Type der verlinkten Ressource (optional, meist automatisch erkannt) | type="text/css" |
media | Media Query | Definiert, für welche Medientypen die Ressource gilt (z.B. für Print oder bestimmte Bildschirmgrößen) | media="print" |
crossorigin | anonymous | use-credentials | Steuert CORS-Anfragen für externe Ressourcen | crossorigin="anonymous" |
as | String | Gibt den Ressourcentyp bei rel="preload" an (z.B. font, image, script) | as="font" |
sizes | WidthxHeight | Definiert Icon-Größen für rel="icon" (mehrere Größen möglich) | sizes="16x16 32x32" |
fetchpriority | String | Ladepriorität der Ressource: high, low oder auto. Besonders nützlich in Kombination mit rel="preload" | fetchpriority="high" |
Wichtige rel-Werte
| rel-Wert | Beschreibung | Typische Verwendung |
|---|---|---|
| stylesheet | Bindet ein CSS-Stylesheet ein | CSS-Dateien für Styling |
| icon | Definiert ein Favicon oder App-Icon | Browser-Tab-Icon, Mobile-Icon |
| preload | Lädt Ressource mit hoher Priorität vor | Kritische Fonts oder CSS |
| preconnect | Baut Verbindung zu Domain im Voraus auf | Externe APIs oder CDNs |
| canonical | Gibt die kanonische URL der Seite an | SEO bei Duplicate Content |
| alternate | Verweist auf alternative Versionen | Andere Sprachen, RSS-Feeds |
| manifest | Verknüpft ein Web-App-Manifest | Progressive Web Apps (PWA) |
Beispiele
Stylesheet einbinden
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">Das ist die klassische Verwendung von <link>: CSS-Dateien werden eingebunden und vom Browser geladen. Mit dem media-Attribut kannst du Stylesheets nur für bestimmte Bildschirmgrößen oder Ausgabemedien wie Drucker laden.
Favicon setzen
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="icon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon.png">Moderne Webseiten bieten mehrere Icon-Größen für unterschiedliche Geräte an. Der Browser wählt automatisch das passende Icon aus. Apple-Geräte nutzen spezielle Touch-Icons für den Homescreen.
Preload für Performance
<link rel="preload" href="fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="critical.css" as="style">
<link rel="stylesheet" href="critical.css">Mit rel="preload" teilst du dem Browser mit, dass bestimmte Ressourcen hohe Priorität haben und früh geladen werden sollen. Das ist besonders nützlich für Schriftarten oder kritisches CSS, die sofort für die Darstellung benötigt werden. Das as-Attribut ist dabei Pflicht und gibt an, um welchen Ressourcentyp es sich handelt.
Ladepriorität mit fetchpriority
Noch feiner steuerst du das Laden mit dem fetchpriority-Attribut. Es sagt dem Browser, wie dringend eine Ressource im Vergleich zu anderen ist. Der klassische Anwendungsfall ist das Hero-Bild ganz oben auf der Seite: Es bestimmt oft den Largest Contentful Paint (LCP), also den Moment, in dem der größte sichtbare Inhalt erscheint. Lädst du es per rel="preload" mit fetchpriority="high" vor, fordert der Browser es vor weniger wichtigen Ressourcen an und die Seite wirkt spürbar schneller fertig. Das Attribut wird von allen modernen Browsern unterstützt, ältere Browser ignorieren es einfach.
<!-- LCP-Bild mit hoher Priorität vorladen -->
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">Barrierefreiheit
Das <link>-Element beeinflusst die Barrierefreiheit indirekt über die eingebundenen Ressourcen:
- Stylesheets und Barrierefreiheit: Die per
<link>eingebundenen CSS-Dateien steuern entscheidende Accessibility-Aspekte: Farbkontraste, Focus-Styles, Schriftgrößen und Animationen. Wenn ein Stylesheet nicht lädt, können Focus-Indikatoren und andere wichtige visuelle Hilfen fehlen. prefers-reduced-motion: Über dasmedia-Attribut kannst du ein Stylesheet nur dann laden, wenn der Nutzer keine Bewegungsreduktion wünscht:<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">. So vermeidest du Animationen für Nutzer, die empfindlich auf Bewegung reagieren.prefers-color-scheme: Du kannst separate Stylesheets für Light- und Dark-Mode anbieten:<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">. Das unterstützt Nutzer, die aus visuellen oder medizinischen Gründen ein bestimmtes Farbschema bevorzugen.- Alternative Stylesheets: Mit
rel="alternate stylesheet"kannst du alternative Stylesheets anbieten, z.B. eine Version mit höherem Kontrast oder größerer Schrift. Browser wie Firefox ermöglichen es Nutzern, zwischen diesen Stylesheets zu wechseln.
Häufige Fehler
rel-Attribut vergessen: Ohne das rel-Attribut weiß der Browser nicht, wie er die verlinkte Ressource behandeln soll. Das Attribut ist zwingend erforderlich und definiert die Beziehung zur Ressource.
Verwechslung mit dem a-Element: Anfänger verwechseln manchmal <link> mit <a>. Merke dir: <link> steht im <head>, ist unsichtbar und verbindet Ressourcen. <a> steht im <body>, ist sichtbar und erstellt klickbare Links für Nutzer.
Zu viele Stylesheets ohne Optimierung: Jedes <link rel="stylesheet"> verursacht eine separate HTTP-Anfrage. Wenn du 10 CSS-Dateien verlinkst, werden 10 Anfragen gestartet, was die Ladezeit erhöht. Für Production solltest du CSS-Dateien zusammenfassen (bundeln) oder kritisches CSS inline im <style>-Tag einbinden.
Browser-Kompatibilität
Das link-Element wird von allen modernen Browsern vollständig unterstützt. Auch spezielle rel-Werte wie preload und preconnect funktionieren seit mehreren Jahren zuverlässig in allen gängigen Browsern.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Chrome | Komplett | Vollständige Unterstützung |
| Firefox | Komplett | Vollständige Unterstützung |
| Safari | Komplett | Vollständige Unterstützung |
| Edge | Komplett | Vollständige Unterstützung |
Email-Kompatibilität
In HTML-Emails funktioniert das link-Element praktisch nicht. Die meisten Email-Clients entfernen den head-Bereich komplett oder blockieren externe Stylesheets aus Sicherheitsgründen. Für Email-Styling musst du Inline-Styles direkt am Element oder style-Tags im head verwenden, wobei auch style-Tags oft entfernt werden. Am sichersten sind direkte style-Attribute an den HTML-Elementen.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Gmail | Keine | Head-Elemente werden entfernt |
| Outlook | Keine | Externe Stylesheets werden blockiert |
| Apple Mail | Keine | Head-Bereich wird ignoriert |
| Thunderbird | Keine | Keine Unterstützung für externe Ressourcen |
Verwandte Elemente
Bleib auf dem Laufenden
Erhalte neue Inhalte direkt in dein Postfach
Was erwartet dich?
Neue Artikel & Videos
Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.
Plattform & Kurs-Updates
Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.
Einmal die Woche in deinem Postfach
Kurz, auf den Punkt, kein Spam.