Wofür ist das Attribut rel im Link-Tag notwendig?

Das Attribut rel im <link>-Tag legt die Beziehung (Relationship) zwischen dem aktuellen Dokument und dem Dokument fest, auf das sich der Tag bezieht. Es teilt dem Browser mit, wie die verknüpfte Ressource verwendet werden soll.

Die am häufigsten verwendeten Werte für rel sind:

• stylesheet: Gibt eine externe CSS-Datei an, die auf das Dokument angewendet werden soll.
• icon/shortcut icon: Gibt ein Symbol (Favicon) für die Website an, das im Browser-Tab angezeigt wird.
• preload: Lädt die Ressource vorab, die später benötigt wird, ohne das Rendering zu blockieren.
• preconnect: Stellt eine Verbindung zum angegebenen Ursprung im Voraus her, um nachfolgende Anfragen zu beschleunigen.
• prefetch: Lädt die Ressource vorab, die bei einer zukünftigen Navigation des Nutzers benötigt werden könnte.
• canonical: Gibt die kanonische URL der Seite an, um Suchmaschinen bei der Bestimmung der Hauptversion des Inhalts zu helfen.
• alternate: Gibt eine alternative Version des aktuellen Dokuments an (z.B. in einer anderen Sprache oder im anderen Format).
• author: Gibt den Autor des Dokuments an.
• help: Gibt ein Hilfedokument an.

Beispiel für die Verwendung von rel="stylesheet":

<link rel="stylesheet" href="/css/style.css">

Beispiel für die Verwendung von rel="icon":

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

Beispiel für die Verwendung von rel="preload":

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

Die Verwendung von rel ist notwendig für die korrekte Verarbeitung externer Ressourcen durch den Browser und Suchmaschinen sowie zur Optimierung der Leistung.