Il tag <LINK> in Html

In questa lezione del corso Html ti spiego il tag <link>

<link>

Nel linguaggio Html il tag <link> è utilizzato per definire i collegamenti tra il documento che lo contiene e altri file o documenti.

Ad esempio, ti permette di collegare un documento HTML a un foglio di stile CSS, una favicon o un'immagine.

Ma come si utilizza il tag <link>?

In primo luogo, devi inserirlo nella sezione <head> del documento.

Ti faccio un esempio pratico

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
...
</body>
</html>

Puoi anche inserire più di un tag <link> nel documento o non inserirne affatto.

Gli attributi del tag <link>

Ogni volta che utilizzi il tag <link> devi specificare diversi attributi.

I principali attributi sono i seguenti

rel
L'attributo rel indica il tipo di relazione tra il documento e quelli collegati.
href
Nell'attributo href devi indicare l'URL del documento da collegare.
type
Hell'attributo type puoi specificare il tipo di documento collegato.

Il tag <link> ha anche altri attributi meno frequenti (es. charset, hreflang, media, rev).

Esempio. Se devi collegare il foglio di stile esterno "style.css" al documento html, devi specificare l'attributo rel="stylesheet", l'attributo type="text/css" e l'attributo href="style.css".

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

Il tag <link> è un elemento molto semplice ma estremamente importante nella creazione di una pagina web.

Può svolgere diverse funzioni. Ecco qualche esempio

1] Collegare un foglio di stile

Il tag <link> è usato per collegare il file "style.css" alla pagina HTML.

Quando il browser sta scaricando il documento html, scarica anche il foglio con le regole di stile e le adotta per formattare e organizzare i contenuti.

2] Collegare una favicon

In questo caso, il tag <link> viene utilizzato per collegare una immagine favicon del sito alla pagina HTML.

La favicon è quell'icona che compare accanto all'indirizzo URL nella barra del browser e nella scheda del sito sul browser.

3] Collegare un'altra pagina del sito

Il tag <link> collega il documento corrente alla pagina successiva "pagina2.html".

L'attributo rel="next" comunica ai motori di ricerca che le informazioni del documento proseguono su un'altra pagina del sito.

Allo stesso modo, nel documento "pagina2.html" devi inserire il tag <link> con l'attributo rel="prev" per indicare che la pagina è la prosecuzione di un altro documento ("pagina1.html").

4] Collegare una pagina esterna

In questo esempio, viene collegata una pagina web esterna chiamata "http://www.stemkb.com".

L'attributo rel="prefetch" indica che la pagina dovrebbe essere scaricata in anticipo per migliorare le prestazioni del sito.

5] Collegare un file XML esterno

In questo esempio, viene collegato un file XML chiamato "feed.xml" del tipo "application/rss+xml" che contiene un feed RSS.

L'attributo rel="alternate" indica che si tratta di un'alternativa alla pagina corrente.

6] Collegare un'immagine per la stampa

In questo caso il tag <link> collega un'immagine chiamata "print.png" che viene usata quando si stampa la pagina.

L'attributo rel="prerender" indica che l'immagine deve essere precaricata per migliorare le prestazioni del sito web, mentre l'attributo media="print" specifica che la regola va seguita solo quando si stampa la pagina e non in altri casi.

7] Collegare un foglio di stile per la stampa

In questo esempio, il tag <link> collega la pagina a un foglio di stile "print.css" che viene utilizzato solo quando si stampa la pagina.

L'attributo rel="stylesheet" indica che si tratta di un foglio di stile, mentre il media query media="print" specifica che il foglio di stile va usato solo quando si stampa la pagina.

8] Collegare una risorsa di preconnessione

In questo esempio, il tag <link> collega una risorsa esterna chiamata "https://www.stemkb.com".

L'attributo rel="preconnect" indica che la connessione deve essere stabilita in anticipo per migliorare le prestazioni del sito.