Introduzione
Il tag <head> non contiene elementi visibili direttamente nella pagina, ma definisce molte informazioni fondamentali per il browser. In questo tutorial analizzeremo un caso pratico: creare una configurazione del documento capace di funzionare su browser moderni, gestire correttamente gli script JavaScript e ridurre alcuni rischi comuni legati alle risorse esterne.
L’obiettivo non è soltanto aggiungere molti tag, ma capire quale responsabilità affidare a ciascun elemento. Il tag <title> identifica la pagina, i tag <meta> descrivono il documento e ne definiscono alcune regole, <link> collega risorse esterne e <script> introduce il comportamento dinamico.
L’esempio userà un approccio di progressive enhancement: la pagina mostrerà un contenuto utile anche se JavaScript è disabilitato, mentre gli script aggiungeranno funzionalità nei browser compatibili.
Codice completo
<title>Catalogo prodotti | Negozio Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="color-scheme" content="light dark">
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/css/base.css">
<!--
Il modulo viene caricato in modo differito automaticamente.
type="module" è supportato dai browser moderni.
-->
<script type="module" src="/js/catalogo.js"></script>
<!--
Fallback per browser molto vecchi che non comprendono i moduli.
Il codice legacy viene ignorato dai browser moderni.
-->
<script nomodule src="/js/catalogo-legacy.js" defer></script>
<noscript>
<p>
JavaScript è disabilitato. Puoi consultare il catalogo,
ma alcuni filtri interattivi non saranno disponibili.
</p>
</noscript>Spiegazione
Identità e codifica del documento
Il tag <title> dovrebbe descrivere in modo breve e preciso la pagina. Un titolo come “Catalogo prodotti | Negozio Demo” è più utile di un generico “Pagina”. Viene visualizzato nella scheda del browser, nei segnalibri e spesso nei risultati dei motori di ricerca.
charset="UTF-8" stabilisce la codifica dei caratteri. Posizionarlo all’inizio del contenuto del documento aiuta il browser a interpretare correttamente lettere accentate, simboli e caratteri internazionali.
Visualizzazione e privacy
Il meta tag viewport permette alla pagina di adattarsi agli schermi mobili. Senza questa impostazione, alcuni browser mobile potrebbero simulare una viewport più larga, rendendo il layout difficile da usare.
Il meta tag referrer controlla quante informazioni sull’URL della pagina precedente vengono inviate quando l’utente segue un collegamento. Il valore strict-origin-when-cross-origin mantiene il percorso completo nello stesso sito, ma invia soltanto l’origine verso domini differenti. È una scelta equilibrata per molti progetti.
color-scheme comunica che il documento può supportare temi chiari e scuri. Da solo non crea un tema completo, ma permette al browser di adattare alcuni controlli nativi in modo coerente con il sistema operativo.
Collegare risorse con link
Il tag <link rel="stylesheet"> collega il foglio di stile principale. Usare percorsi assoluti dal sito, come /css/base.css, rende i riferimenti più prevedibili anche quando la pagina si trova in una sottocartella.
Il collegamento alla favicon migliora l’identificazione del sito nelle schede e nei segnalibri. Se si usano più formati, è possibile aggiungere ulteriori tag <link>, specificando sempre il tipo di file quando è utile al browser.
Script a moduli e fallback
Uno script con type="module" viene trattato come modulo JavaScript. I moduli sono differiti automaticamente: il browser scarica il file senza bloccare subito l’analisi del documento e lo esegue dopo aver costruito il DOM.
L’attributo nomodule offre una strategia di compatibilità. I browser che comprendono i moduli ignorano lo script legacy, mentre quelli più vecchi possono eseguire una versione alternativa. In questo modo non è necessario consegnare lo stesso codice a tutti gli utenti.
Per script non modulari, defer è spesso preferibile all’inserimento di codice bloccante. Lo script viene scaricato durante l’analisi HTML ed eseguito dopo il parsing, rispettando l’ordine degli script differiti.
Il ruolo di noscript
<noscript> mostra un messaggio quando JavaScript non è disponibile. Non dovrebbe essere usato per nascondere completamente il contenuto principale: una pagina ben progettata deve fornire almeno informazioni essenziali anche senza interazioni avanzate.
Best practice
- Usa un <title> specifico per ogni pagina e mantienilo leggibile.
- Dichiara UTF-8 e il viewport in ogni documento destinato al Web.
- Preferisci type="module" per codice moderno organizzato in file.
- Usa defer per gli script classici che non devono bloccare il parsing.
- Non caricare una libreria esterna se una funzionalità nativa del browser è sufficiente.
- Verifica che i percorsi di fogli di stile, favicon e script funzionino anche in produzione.
- Prevedi un contenuto utile dentro <noscript>, senza sostituire l’intera esperienza.
- Evita di inserire segreti, token privati o informazioni sensibili nei meta tag: il contenuto del documento è leggibile dal client.
- Testa il comportamento con JavaScript disattivato e con un browser non aggiornato.
Riepilogo
Un <head> ben progettato non è una semplice lista di tag. <title> definisce l’identità della pagina, <meta> controlla codifica, viewport e alcune regole di comunicazione, <link> collega risorse come stili e icone, mentre <script> aggiunge il comportamento applicativo.
Combinando moduli, fallback nomodule, caricamento differito e un messaggio noscript, si ottiene una pagina più robusta e compatibile. La regola principale è progettare prima il contenuto fondamentale e aggiungere JavaScript come miglioramento, non come unico requisito per utilizzare il sito.