Tag <link>

Tag <link>

Definition

Status: Aktueller Standard

Das Tag <link> steht für link (Verbindung).

Das HTML-Element <link> ist ein essentielles Steuerungselement im <head>-Bereich einer Webseite. Es definiert die Beziehung zwischen dem aktuellen Dokument und einer externen Ressource. Es wird eingesetzt um z.B. externe CSS-Dateien oder das favicon einzubinden. Es hat keinen schließenden Tag! Bei einige Typen (wie Stylesheets) wäre auch eine Einbindung im <body>" legitim, gilt dort aber als schlechte Praxis.

Syntax

<link rel="..." attribut="wert">

Attribute bzw. Unterelemente

rel

Art der Beziehung (erforderlich). Mögliche Werte: stylesheet, icon, canonical, preload

href

Pfad zur Datei

type

MIME-Typ (z.B. text/css, image/x-icon)

media

Bedingung, wann die Ressource genutzt wird (z.B. nur für Ausdruck: print

as

Typ der Ressource beim Preloading (style, script, font, image)

crossorigin

Regelt CORS-Anfragen für externe Ressourcen (anonymous, use-credentials)

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <link> - Diverse Anwendungen

Der Code:

<!-- CSS-Datei einbinden -->
<link rel="stylesheet" href="style.css">

<!-- Favicon einbinden -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- Google Fonts schneller laden (Preconnect) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>