Waarvoor wordt de <link>-tag gebruikt?

Het <link>-element wordt gebruikt om verbindingen tussen het huidige document en andere bronnen tot stand te brengen.

Belangrijkste gebruiksgevallen:

Koppeling naar CSS-stylesheets: De meest voorkomende toepassing. Hiermee kunnen externe CSS-bestanden worden gekoppeld om de pagina te stylen.
```
<link rel="stylesheet" href="/css/style.css">
```

Koppeling naar lettertypen: Bijvoorbeeld Google Fonts.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Koppeling naar iconen (Favicon): Het wijzigen van het standaard tabbladpictogram van de browser.
```
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
```
Aanwijzing van canonieke link: Helpt zoekmachines de hoofdversie van de pagina te bepalen bij duplicaatinhoud.
```
<link rel="canonical" href="https://example.com/page">
```
Aanwijzing van alternatieve versies van het document: Bijvoorbeeld voor verschillende talen.
```
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
```

Preload, prefetch, preconnect, prerender: Verbetering van de prestaties door vooraf laden of verbindingen te maken.

<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://api.example.com">
<link rel="prefetch" href="/data/next-page.json">
<link rel="prerender" href="https://example.com/next-page">

Belangrijke attributen omvatten rel (relatie tot het huidige document), href (URL van de bron), type (MIME-type) en media (mediaspecificatie).