Introduzione alla sezione
Benvenuti alla terza lezione del nostro corso "Impara HTML in 45 lezioni". Nelle lezioni precedenti abbiamo visto la struttura di base di un documento HTML e come creare il corpo della pagina utilizzando il tag <body>. Tuttavia, c'è una parte fondamentale del codice che spesso i principianti tendono a ignorare perché non produce risultati visibili immediati sullo schermo: la sezione <head>.
Se immaginiamo una pagina web come un essere umano, il <body> rappresenta il corpo (ciò che tutti vedono), mentre l'elemento <head> rappresenta il cervello. Qui non vengono inseriti testi, immagini o link che l'utente finale può leggere direttamente, ma vengono depositate tutte le istruzioni necessarie affinché il browser e i motori di ricerca sappiano come interpretare e visualizzare correttamente il contenuto.
Senza una sezione head configurata correttamente, la tua pagina potrebbe mostrare caratteri strani (i famigerati simboli a quadratino), non adattarsi ai dispositivi mobili o non essere indicizzata correttamente da Google. In questa lezione analizzeremo nel dettaglio ogni elemento che compone questa sezione vitale.
Il concetto di Metadata
La parola "metadata" significa letteralmente "dati sui dati". Nel contesto dell'HTML, i metadati sono informazioni che descrivono la pagina web. Non sono contenuti destinati al visitatore, ma istruzioni destinate a software specifici: browser (Chrome, Firefox, Safari), crawler dei motori di ricerca (Googlebot, Bingbot) e social network (Facebook, LinkedIn).
I metadati permettono di definire:
- La codifica dei caratteri: per evitare errori di visualizzazione dei testi.
- Il titolo della pagina: che appare nella scheda del browser.
- La responsività: per far sì che il sito si veda bene su smartphone.
- La SEO (Search Engine Optimization): per aiutare Google a capire di cosa parla la pagina.
Il Charset: Perché è fondamentale?
Uno dei primi tag che dobbiamo inserire nell'head è <meta charset="UTF-8">. Ma cosa significa esattamente?
I computer non comprendono le lettere, ma solo i numeri (bit). Per visualizzare un testo, il computer deve utilizzare una "tabella di traduzione" che associa un numero a un carattere specifico. Questa tabella è chiamata character encoding (codifica dei caratteri).
In passato esistevano molte codifiche diverse (come ISO-8859-1 per l'Europa occidentale), ma questo creava problemi: se un sito era scritto in una codifica e il browser lo leggeva con un'altra, le lettere accentate (come à, è, ì, ò, ù) venivano sostituite da simboli incomprensibili.
UTF-8 (Unicode Transformation Format - 8-bit) è lo standard universale moderno. Supporta quasi tutti i caratteri di ogni lingua scritta al mondo, inclusi emoji e simboli matematici. Dichiarare UTF-8 all'inizio del documento garantisce che il tuo sito sia leggibile correttamente in ogni angolo del pianeta.
Il tag : Più di un semplice nome
Il tag <title> è l'unico elemento all'interno dell'head che produce un output visibile all'utente, sebbene non all'interno della pagina stessa. Il testo contenuto tra <title> e </title> apparirà in due posti cruciali:
- Nella scheda (tab) del browser.
- Come titolo principale del risultato di ricerca nei motori di ricerca.
Da un punto di vista SEO, il titolo è uno dei fattori più importanti. Deve essere chiaro, descrittivo e contenere le parole chiave principali della pagina.
Approfondimento sui Meta Tag
I tag <meta> sono elementi "void" (ovvero non hanno un tag di chiusura) e funzionano tramite coppie di attributi. I più comuni e importanti sono i seguenti:
1. Viewport e Mobile First
Con l'esplosione del traffico da smartphone, è diventato obbligatorio definire il viewport. Senza questo tag, i browser mobile tenderebbero a renderizzare la pagina come se fosse su un desktop, rimpicciolendo tutto e rendendo il testo illeggibile.
Il tag standard è: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
width=device-width: dice al browser di impostare la larghezza della pagina uguale alla larghezza dello schermo del dispositivo.initial-scale=1.0: imposta il livello di zoom iniziale al 100%.
2. Descrizione della pagina
Il meta tag description non influenza direttamente il posizionamento in classifica, ma influenza il CTR (Click-Through Rate). È il breve testo che appare sotto il titolo nei risultati di Google.
3. Autore e Keyword
Sebbene i motori di ricerca moderni ignorino quasi completamente il tag keywords (perché troppo abusato in passato per lo spam), è ancora possibile definire l'autore della pagina per scopi di documentazione interna.
Esempi Pratici
Vediamo ora come mettere insieme tutto ciò che abbiamo imparato in un documento HTML completo. Analizzeremo due scenari: uno minimale e uno ottimizzato per la SEO.
Esempio 1: Struttura minima corretta
Questo è il setup di base che ogni singola pagina web dovrebbe avere per funzionare correttamente.
<!DOCTYPE html>
<html lang="it">
<head>
<!-- Definiamo la codifica per evitare errori con le accentate -->
<meta charset="UTF-8">
<!-- Rendiamo la pagina responsive per i dispositivi mobili -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Il mio primo sito - Home</title>
</head>
<body>
<h1>Benvenuti!</h1>
<p>Questa pagina ha un head configurato correttamente.</p>
</body>
</html>
In questo esempio, abbiamo garantito che il browser sappia che stiamo usando l'italiano (lang="it"), che i caratteri sono UTF-8 e che il layout deve adattarsi allo schermo del telefono.
Esempio 2: Setup avanzato per SEO e Social
Immaginiamo di voler creare una pagina che venga condivisa su Facebook o LinkedIn. In questo caso, aggiungiamo i meta tag per la descrizione e i cosiddetti Open Graph tags.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Corso HTML Gratuito | Impara a programmare il Web</title>
<!-- Meta descrizione per Google (consigliata lunghezza 150-160 caratteri) -->
<meta name="description" content="Scopri come imparare HTML da zero con il nostro corso gratuito in 45 lezioni. Guide pratiche, esempi e progetti reali per diventare sviluppatore web.">
<!-- Meta tag per l'autore -->
<meta name="author" content="Esperto Web Dev">
<!-- Open Graph: Per migliorare la condivisione sui Social Network -->
<meta property="og:title" content="Corso HTML Gratuito | Impara a programmare il Web">
<meta property="og:description" content="Impara HTML in 45 lezioni facilitate. Inizia oggi il tuo percorso nel web development!">
<meta property="og:image" content="https://www.esempio.it/immagini/corsohtml.jpg">
<meta property="og:url" content="https://www.esempio.it/corso-html">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Benvenuti al Corso di HTML</h1>
<p>Contenuto della pagina...</p>
</body>
</html>
In questo secondo esempio, abbiamo aggiunto informazioni che non appaiono nella pagina, ma che "comunicano" con l'esterno. Se incolli l'URL di questa pagina su Facebook, il social leggerà i tag og:title, og:description e og:image per creare un'anteprima accattivante.
Errori comuni e FAQ
Durante l'apprendimento della sezione head, molti studenti commettono alcuni errori sistematici. Ecco i più frequenti:
1. Dimenticare il charset o metterlo troppo in basso
Errore: Inserire <meta charset="UTF-8"> dopo il tag <title> o altri meta tag.
Perché è sbagliato: Il browser inizia a leggere il file dall'alto. Se incontra del testo (come il titolo) prima di sapere quale codifica usare, potrebbe interpretare erroneamente i caratteri e poi dover "tornare indietro", causando rallentamenti o glitch visivi. Il charset deve essere sempre il primo elemento dopo l'apertura di <head>.
2. Mettere contenuti visibili nell'head
Errore: Inserire tag <h1>, <p> o <img> all'interno di <head>.
Perché è sbagliato: L'head non è destinato alla visualizzazione. Se inserisci un tag di contenuto, il browser cercherà di "aggiustare" l'errore chiudendo automaticamente l'head e aprendo il body, ma questo renderà il tuo codice non standard e potrebbe causare bug imprevedibili.
3. Descrizioni troppo lunghe
Errore: Scrivere un paragrafo di 500 parole nel meta tag description.
Perché è sbagliato: Google taglia le descrizioni dopo circa 155-160 caratteri. Scrivere di più è inutile e spreca spazio nel codice.
Prossimi passi
Ora che hai compreso come funziona il "cervello" della tua pagina web, sei pronto per rendere il tuo sito non solo funzionale, ma anche professionale e visibile.
Ecco cosa ti suggeriamo di fare per consolidare queste conoscenze:
- Esercitazione pratica: Prendi un sito che ammiri, fai click destro sulla pagina e seleziona "Visualizza sorgente pagina". Cerca la sezione
<head>e prova a identificare quali meta tag stanno utilizzando per la SEO e i social. - Sperimenta: Crea una pagina HTML, aggiungi una meta descrizione e prova a caricarla su un servizio di hosting gratuito (come Netlify o GitHub Pages) per vedere come viene letta dai motori di ricerca o dai social.
- Approfondimento: Nella prossima lezione, vedremo come collegare file esterni all'head, come i fogli di stile CSS (
<link>) e gli script JavaScript (<script>), per iniziare a dare stile e interattività alle tue pagine.
Ricorda: un codice pulito e un head ben configurato sono il segno di uno sviluppatore attento ai dettagli e consapevole dell'esperienza utente e dell'accessibilità.