Quando si inizia a imparare l’HTML, la prima cosa importante da capire è la struttura di base di una pagina web. Ogni documento HTML è organizzato in modo molto chiaro e logico, seguendo uno schema che permette ai browser (come Chrome, Firefox, Safari, ecc.) di leggere e interpretare il contenuto in modo corretto.
Il contenitore principale: <html>
Alla base di tutto c’è l’elemento <html>. I tag <html> e </html> racchiudono l’intero contenuto della pagina web e indicano al browser che si tratta di un documento scritto nel linguaggio HTML. Tutto il codice che compone la pagina – sia quello visibile che quello “dietro le quinte” – deve trovarsi all’interno dell’elemento <html>.
Si può pensare al tag <html> come alla cornice di un quadro: non si vede il contenuto finché non si entra al suo interno, ma è indispensabile per definire i confini della pagina. Al suo interno troviamo sempre due sezioni fondamentali e distinte: <head> e <body>.
Che cos’è la sezione <head>?
La sezione <head> si trova all’inizio del documento, subito dopo il tag <html>, ed è invisibile agli utenti che visitano la pagina. Non contiene elementi grafici o testi visibili, ma informazioni fondamentali che servono al browser e ai motori di ricerca.
Al suo interno si inseriscono di solito:
- il titolo della pagina (con il tag
<title>), che compare nella scheda del browser; - i collegamenti ai fogli di stile (CSS), per gestire l’aspetto grafico;
- eventuali metadati, cioè dati che descrivono il contenuto della pagina (ad esempio autore, descrizione, lingua);
- collegamenti a font o icone.
In breve, la sezione <head> contiene tutto ciò che serve alla pagina “dietro le quinte”.
E la sezione <body>?
La sezione <body>, invece, è quella visibile sullo schermo quando si apre una pagina web. È qui che si scrivono i contenuti veri e propri: titoli, testi, immagini, link, video e tutto quello che l’utente può vedere e con cui può interagire.
Tutto ciò che viene inserito nel <body> viene interpretato dal browser e mostrato all’utente, seguendo lo stile e le indicazioni fornite nel <head>.
Per capire meglio…
Per capire come funziona una pagina HTML, è utile osservare la sua struttura di base, proprio come mostrato nel disegno qui sotto.
Ogni documento HTML è composto da tre elementi principali: <html>, <head> e <body>.
L’elemento <html> è il contenitore generale: tutto il codice della pagina deve trovarsi al suo interno. Si potrebbe dire che definisce i confini del documento e comunica al browser: “qui comincia e finisce la mia pagina HTML”.
Dentro <html> ci sono due sezioni distinte, ognuna con un ruolo ben preciso:
<body>è la parte visibile, quella che viene mostrata sullo schermo. Tutti i contenuti che l’utente può leggere, vedere o cliccare (testi, titoli, immagini, link, video…) si trovano qui.
<head>è la parte invisibile della pagina. Non contiene testi o immagini che l’utente vede, ma informazioni utili per il browser, come il titolo della pagina, i collegamenti ai fogli di stile (CSS) o altri dati tecnici. È come la cabina di regia: lavora dietro le quinte per far funzionare tutto correttamente.