Na co je potřeba atribut rel v tagu link?

A atribut rel v tagu <link> určuje vztah (relationship) mezi aktuálním dokumentem a dokumentem, na který odkazuje tag. Informuje prohlížeč, jak má používat propojený zdroj.

Nejčastěji používané hodnoty rel jsou:

• stylesheet: Určuje externí CSS soubor, který má být aplikován na dokument.
• icon/shortcut icon: Určuje ikonu (favicon) pro web, zobrazovanou na záložce prohlížeče.
• preload: Předběžně načte zdroj, který bude později potřeba, aniž by blokoval vykreslování.
• preconnect: Naváže spojení s uvedeným zdrojem předem, urychluje následné požadavky.
• prefetch: Předběžně načte zdroj, který může být potřebný při budoucí navigaci uživatele.
• canonical: Určuje kanonickou URL stránky, pomáhá vyhledávačům určit hlavní verzi obsahu.
• alternate: Určuje alternativní verzi aktuálního dokumentu (například v jiném jazyce nebo formátu).
• author: Určuje autora dokumentu.
• help: Určuje nápovědu nebo pomocný dokument.

Příklad použití rel="stylesheet":

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

Příklad použití rel="icon":

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

Příklad použití rel="preload":

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