Para que é que é usada a tag <link>?

A tag <link> é usada para estabelecer ligações entre o documento atual e outros recursos.

Principais casos de uso:

Ligação a folhas de estilo CSS: A aplicação mais comum. Permite ligar ficheiros CSS externos para estilizar a página.
```
<link rel="stylesheet" href="/css/style.css">
```

Ligação a fontes: Por exemplo, 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">

Ligação a ícones (Favicon): Alterar o ícone padrão da aba do navegador.

<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">

Indicação de ligação canónica: Ajuda os motores de busca a determinar a versão principal da página em caso de conteúdo duplicado.
```
<link rel="canonical" href="https://example.com/page">
```
Indicação de versões alternativas do documento: Por exemplo, para diferentes línguas.
```
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
```

Pré-carregamento de recursos (preload, prefetch, preconnect, prerender): Melhoria do desempenho através do carregamento antecipado ou estabelecimento de ligações.

<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">

Atributos-chave incluem rel (relação ao documento atual), href (URL do recurso), type (tipo MIME) e media (consulta de mídia).