HTML <link>-Tag
The <link> tag contains a link pointing to the external file with the CSS styles or scripts. Tag description, attributes and using examples.
HTML <link>-Tag
Das `<link>`-Tag definiert die Beziehung zwischen dem aktuellen Dokument und einer externen Ressource. Es wird in der Regel verwendet, um eine externe CSS-Stylesheet-Datei zu verknüpfen.
Das `<link>`-Tag kann verwendet werden, um verschiedene Versionen einer Seite zu verknüpfen. Dies ist nützlich, wenn es mehrere Übersetzungen des Inhalts gibt.
Ein HTML-Dokument kann mehrere `<link>`-Elemente enthalten, um verschiedene Arten von Ressourcen zu laden, wie Stylesheets, Icons oder vorgeladene Inhalte. Alle diese `<link>`-Elemente sollten im <head>-Bereich des Dokuments platziert werden (üblicherweise vor dem schließenden `</head>`-Tag). In einem einzelnen Dokument können mehrere `<link>`-Elemente verwendet werden.
Syntax
Das `<link>`-Tag ist leer, was bedeutet, dass das schließende Tag nicht erforderlich ist. Es enthält nur Attribute. In XHTML muss das `<link>`-Tag jedoch geschlossen werden (<link/>).
Beispiel für das HTML `<link>`-Tag:
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>Ergebnis
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| as | content_type | Gibt den Typ des zu ladenden Inhalts an. Erforderlich bei rel="preload". |
| charset | char_encoding | Definiert die Kodierung des verknüpften Dokuments. In HTML5 veraltet. |
| crossorigin | anonymous use-credentials | Konfiguriert die CORS-Einstellungen für die verknüpfte Ressource. |
| href | URL | Definiert die URL der externen Datei. |
| hreflang | language_code | Definiert die Sprache des verknüpften Dokuments. |
| integrity | hash_value | Aktiviert die Subresource-Integrität zur Überprüfung abgerufener Ressourcen. |
| media | media_query | Definiert das Gerät, für das die Styles angewendet werden sollen. |
| 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 (verknüpft eine CSS-Datei), icon (verknüpft ein Favicon), preload (lädt eine Ressource vor), alternate (verknüpft eine alternative Version des Dokuments). |
| rev | reversed relationship | Definiert die Beziehung zwischen dem aktuellen und den verknüpften Dokumenten. In HTML5 veraltet. |
| sizes | Width x Height | Legt die Größe der zugehörigen Icons fest. Wird nur mit rel="icon" verwendet. |
| type | media_type | Definiert den MIME-Typ (Spezifikation für die Netzwerkübertragung verschiedener Dateitypen) des verknüpften Dokuments. Hinweis: Beim Verknüpfen eines Stylesheets ist type="text/css" optional und standardmäßig auf CSS eingestellt. |
Das `<link>`-Tag unterstützt auch Globale Attribute und Ereignisattribute.
Praxis
Welche Attribute hat das HTML <a>-Tag?