Struttura di un documento HTML5: DOCTYPE, html, head, body

Ogni pagina web inizia con uno scheletro fondamentale. Prima di poter inserire testi, immagini o layout complessi, dobbiamo dichiarare al browser con cosa ha a che fare e come deve interpretarlo. Questa struttura di base è in gran parte invisibile all’utente, ma è fondamentale per il corretto funzionamento del sito.

In questa lezione esploreremo i quattro elementi pilastro di un documento HTML: <!DOCTYPE html>, <html>, <head> e <body>.

L’ossatura di base

Ecco come si presenta il “livello zero” di qualsiasi pagina web moderna:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>La mia prima pagina</title>
</head>
<body>
  
  <!-- Il contenuto visibile andrà qui -->
  
</body>
</html>

Analizziamo ciascun blocco nel dettaglio.

1. Il DOCTYPE: il patto col browser

La prima riga di ogni file HTML non è un vero e proprio tag HTML, ma un’istruzione di elaborazione:

<!DOCTYPE html>

Serve a dire al browser: “Questa pagina è scritta usando gli standard di HTML5, per favore interpretala nel modo più moderno possibile”. Senza questa dichiarazione, i browser potrebbero entrare nella cosiddetta quirks mode (modalità compatibilità), cercando di emulare comportamenti scorretti del passato per non “rompere” vecchi siti, il che renderebbe imprevedibile il tuo CSS. Mettilo sempre come primissima riga.

2. L’elemento radice: <html>

Subito dopo il DOCTYPE troviamo il tag che racchiude letteralmente tutto il resto del documento:

<html lang="it">
  <!-- l'intera pagina vive qui dentro -->
</html>

Viene chiamato elemento radice (root element) perché è il punto di origine dell’intero albero del documento.

È una best practice assoluta (e obbligatoria per l’accessibilità) inserire l’attributo lang per indicare la lingua principale del contenuto (es. "it" per italiano, "en" per inglese). Questo attributo aiuta i motori di ricerca e suggerisce la corretta dizione agli screen reader utilizzati da persone non vedenti o ipovedenti.

3. La mente della pagina: <head>

Tutto ciò che inseriamo all’interno di <head> è il “cervello” della pagina. Quasi nulla di ciò che scrivi qui apparirà direttamente sullo schermo dell’utente.

<head>
  <meta charset="UTF-8">
  <title>La mia prima pagina</title>
</head>

In questa sezione si inseriscono i metadati (dati sui dati). Gli elementi più comuni e fondamentali sono:

• <meta charset="UTF-8">: Indica al browser come interpretare i caratteri (è vitale per non vedere strani geroglifici al posto di lettere accentate come è, à, ì).
• <title>: L’unica cosa del <head> direttamente visibile all’utente. Definisce il testo che appare nella linguetta (tab) in alto nel browser e sarà il titolo usato da Google nei risultati di ricerca.

4. Il corpo della pagina: <body>

Tutto ciò che vuoi che l’utente veda e con cui possa interagire va obbligatoriamente inserito nel <body>.

<body>
  <h1>Benvenuti nel mio sito</h1>
  <p>Questo testo sarà visibile sullo schermo.</p>
</body>

Che si tratti di un semplice paragrafo di testo, di un video, di una griglia di prodotti, o dell’intera interfaccia di una web app complessa, tutto deve vivere all’interno di questi due tag <body> ... </body>.

---

Laboratorio pratico

Apri il tuo editor di testo preferito e ricopia la struttura di base che abbiamo visto all’inizio. Salva il file chiamandolo index.html e aprilo (trascinalo o fai doppio clic) nel tuo browser: Vedrai una pagina completamente bianca (perché il body è vuoto), ma noterai due cose:

1. Il browser è in grado di leggerla.
2. Il titolo della scheda nel browser riporterà esattamente il testo che hai scritto all’interno del tag <title>.