Mit jelent a rel attribútum a link tagben?

A <link> címkében az rel attribútum határozza meg a kapcsolatot (relationship) a jelenlegi dokumentum és a címkére hivatkozó dokumentum között. Tájékoztatja a böngészőt, hogyan használja a kapcsolódó erőforrást.

A leggyakrabban használt rel értékek:

• stylesheet: Külső CSS-fájlt jelez, amelyet alkalmazni kell a dokumentumra.
• icon/shortcut icon: Egy ikon (favicon) megjelenítése a böngészőfülön.
• preload: Előre betölti az erőforrást, amely később szükséges lesz, anélkül, hogy blokkolná a renderelést.
• preconnect: Előre kapcsolatot létesít a megadott forrással, gyorsítva a későbbi kéréseket.
• prefetch: Előre betölti az erőforrást, amely lehet, hogy szükséges lesz a felhasználó későbbi navigációja során.
• canonical: A lap kanonikus URL-jét jelöli, segítve a keresőmotorokat a tartalom fő verziójának meghatározásában.
• alternate: Alternatív változatot jelez a jelenlegi dokumentumhoz (például más nyelven vagy más formátumban).
• author: A dokumentum szerzőjét jelöli.
• help: Segédlet dokumentumot jelez.

Példa a rel="stylesheet" használatára:

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

Példa az rel="icon" használatára:

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

Példa a rel="preload" használatára:

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