Waarvoor is het rel attribuut nodig in de link tag?

Het attribuut rel in de <link>-tag definieert de relatie (relationship) tussen het huidige document en het document waarnaar de tag verwijst. Het informeert de browser hoe de gekoppelde bron te gebruiken.

De meest gebruikte waarden voor rel zijn:

• stylesheet: Geeft een extern CSS-bestand aan dat op het document moet worden toegepast.
• icon/shortcut icon: Geeft een pictogram (favicon) voor de site aan, weergegeven op het tabblad van de browser.
• preload: Laadt de bron vooraf, die later nodig zal zijn, zonder de rendering te blokkeren.
• preconnect: Maakt vooraf verbinding met de opgegeven bron, waardoor vervolgverzoeken worden versneld.
• prefetch: Laadt de bron vooraf, die mogelijk nodig is bij een toekomstige navigatie van de gebruiker.
• canonical: Geeft de canonieke URL voor de pagina aan, wat zoekmachines helpt de hoofdversie van de inhoud te bepalen.
• alternate: Geeft een alternatieve versie van het huidige document aan (bijvoorbeeld in een andere taal of in een ander formaat).
• author: Geeft de auteur van het document aan.
• help: Geeft een helpdocument aan.

Voorbeeld van gebruik van rel="stylesheet":

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

Voorbeeld van gebruik van rel="icon":

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

Voorbeeld van gebruik van rel="preload":

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