Il tag <HEAD> in Html

In questa lezione ti spiego cos'è tag <head> del linguaggio HTML, a cosa serve e come utilizzarlo

<head> ... </head>

E' una delle due sezioni piu importanti di un documento ipertestuale.

Si trova all'interno del tag <html>.

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Si chiama <head> perché è la testata del documento e devi inserirla sempre prima della sezione <body>

Per ricordare questo concetto puoi considerare il documento html come una persona, con una testa (head) e un corpo (body)

A cosa serve il tag <head>?

Il tag <head> definisce la sezione del documento del HTML che contiene informazioni sul documento, come il titolo della pagina, la descrizione e le parole chiave.

Nota, Le informazioni nella sezione <head> non sono un contenuto vero e proprio della pagina, perché non vengono visualizzate direttamente sul sito e non tutte sono visibili all'utente. Tuttavia, sono fondamentali per indicizzare il sito sui motori di ricerca e per fornire un'esperienza di navigazione migliore agli utenti.

All'interno della sezione <head> puoi trovare questi tag

Il tag <title>
E' il tag che ti permette di definire il titolo del documento html. Viene visualizzato nella scheda del browser quando leggi una pagina web. Inoltre, spesso il titolo della pagina è una delle prime cose che gli utenti vedono nei risultati di ricerca.

Nota. E' molto importante che il titolo descriva in modo pertinente il contenuto della pagina, per far sapere gli utenti cosa potranno trovare sul pagina. Un titolo pertinente e accattivante incoraggia gli utenti a cliccare sul link. Spesso il titolo contiene le parole chiave principali utili per posizionare meglio la pagina sui motori di ricerca.
Il tag <meta>
Nella sezione <head> trovi anche il tag <meta>. E' una famiglia di tag che ti permette di fornire molte informazioni aggiuntive sul documento tramite l'inserimento dei metadati. Ad esempio, puoi usare il tag <meta> per scrivere una breve descrizione del contenuto della pagina e un elenco i parole chiave (keyword) per aiutare i motori di ricerca a capire di quali argomenti tratta la pagina web, dare indicazione ai motori di ricerca se vuoi indicizzare o meno una pagina web, per indicare al browser quale set di caratteri utilizza il documento, ecc.
Il tag <link>
E' un'altra famiglia di tag della sezione <html>. I tag <link> ti permettono di richiamare i file dei fogli di stile css per formattare i contenuti della pagina (rel=stylesheet). Puoi usare un tag <link> anche per indicare se un documento è una copia canonica (rel=canonical) di un altro, ecc.
Il tag <script>
Questo tag ti permette di definire uno script, ad esempio in javascript. Puoi scrivere lo script direttamente sul documento oppure richiamare il file dello script dall'esterno. Quando inserisci il tag <script> nella sezione <head>, il browser lo carica in memoria prima di visualizzare la pagina sullo schermo dell'utente. Se lo inserisci nella sezione <body>, invece, il tag <script> viene caricato in memoria insieme ai contenuti della pagina.

Il tag <head> contiene molte altre informazioni utili, come i link ai font utilizzati sul sito, la lingua della pagina, i metadati per i social media, ecc.

Ti faccio un esempio pratico.

Ecco il codice di un documento html di un sito che parla di programmazione

<!DOCTYPE html>
<html>
<head>
<title>Guida per imparare a programmare</title>
<meta name="description" content="Scopri i migliori tutorial di programmazione online gratuiti e impara a programmare in diversi linguaggi, dal JavaScript al Python">
<meta name="keywords" content="tutorial di programmazione, imparare a programmare, JavaScript, Python, HTML, CSS">
<link rel="stylesheet" href="/nigiara.css" type="text/css">
<script type="text/javascript" src="file.js"></script>
</head>
<body>
</body>
</html>

Per utilizzare il tag <head> in modo efficace, è importante seguire alcune buone pratiche. Eccone alcune.

Utilizza solo un titolo per pagina tramite il tag <title> e assicurati che sia descrittivo e pertinente.
Crea una descrizione unica per ogni pagina web, evitando di copiare e incollare la stessa descrizione su tutte le pagine del sito web.
Inserisci solo le parole chiave pertinenti con il contenuto della pagina.

In conclusione, il tag <head> è fondamentale per fornire una buona esperienza di navigazione agli utenti e anche per ottimizzare e indicizzare la pagina sui search engine.

Utilizzalo in modo efficace e responsabile e vedrai i risultati.