<link>
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.
- Kategorie
- Meta & Scripting
- Art
- Leeres Element
- Attribute
- 8
- Beispiele
- 4
- Browser
- 4 von 4
- 0 von 4
- Stand
- 03.07.2026
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
8 AttributeWichtige rel-Werte
Beispiele
4 Beispiele<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.
<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.
<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.
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
3 Fehler01 rel-Attribut vergessen
rel-Attribut weiß der Browser nicht, wie er die verlinkte Ressource behandeln soll. Das Attribut ist zwingend erforderlich und definiert die Beziehung zur Ressource. 02 Verwechslung mit dem a-Element
<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. 03 Zu viele Stylesheets ohne Optimierung
<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
4 von 4Das 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.
-
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
0 von 4In 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.
-
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
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da