Ogni pagina web che visiti, indipendentemente dalla sua complessità, si basa su una struttura fondamentale composta da pochi elementi essenziali. Comprendere questa struttura è il secondo passo fondamentale dopo aver capito cos’è l’HTML. In questo articolo analizzeremo nel dettaglio ogni componente di una pagina HTML valida: dalla dichiarazione DOCTYPE alle sezioni head e body.
La Dichiarazione DOCTYPE: Il Punto di Partenza
La prima riga di ogni documento HTML moderno deve essere la dichiarazione DOCTYPE. Si scrive come <!DOCTYPE html> e ha una funzione specifica: comunica al browser quale versione di HTML si sta utilizzando e come deve interpretare il documento. Senza questa dichiarazione, il browser potrebbe entrare in modalità quirks mode, un comportamento di compatibilità retrograda che può causare problemi nella visualizzazione della pagina.
La dichiarazione <!DOCTYPE html> è quella utilizzata per HTML5 ed è notevolmente più semplice rispetto alle versioni precedenti. In HTML 4.01, ad esempio, era necessario specificare anche il DTD (Document Type Definition) con un URL lungo e complesso. La semplicità della dichiarazione attuale è uno dei tanti miglioramenti introdotti con HTML5.
È importante notare che il DOCTYPE non è un tag HTML vero e proprio: è un’istruzione per il browser. Non ha un tag di chiusura, non può contenere attributi aggiuntivi e non fa parte del DOM (Document Object Model) della pagina. Deve sempre essere posizionata come primissima riga del documento, prima di qualsiasi altro elemento, compreso il tag <html>.
L’Elemento Root: Il Tag <html>
Subito dopo il DOCTYPE, troviamo il tag <html>, noto come elemento root (radice) del documento. Questo tag racchiude l’intero contenuto della pagina web e rappresenta il nodo principale dell’albero DOM. Tutto ciò che compone la pagina — metadati, contenuti, script e stili — deve essere contenuto all’interno dell’elemento <html>.
L’attributo più importante dell’elemento root è lang, che specifica la lingua principale del documento. Ad esempio, <html lang="it"> indica che il contenuto è in italiano. Questo attributo è fondamentale per l’accessibilità (gli screen reader lo utilizzano per selezionare la voce corretta), per il SEO (i motori di ricerca lo usano per la classificazione linguistica) e per le funzionalità del browser come la traduzione automatica.
L’elemento <html> contiene esattamente due elementi figlio diretti: <head> e <body>. Questa struttura è obbligatoria e invariabile in ogni documento HTML valido. Nessun altro elemento dovrebbe essere inserito come figlio diretto del tag <html> al di fuori di questi due.
La Sezione Head: Il Cervello della Pagina
La sezione <head> contiene tutti i metadati del documento, ovvero informazioni che non vengono visualizzate direttamente nella pagina ma che sono essenziali per il suo corretto funzionamento. Per un approfondimento completo su questa sezione, puoi consultare il nostro articolo dedicato a cos’è l’HTML Head.
Gli elementi principali che si inseriscono nella sezione head includono:
<title>— Il titolo della pagina, visualizzato nella scheda del browser e nei risultati dei motori di ricerca. È l’unico elemento obbligatorio all’interno del<head>.<meta charset="UTF-8">— Specifica la codifica dei caratteri, essenziale per visualizzare correttamente lettere accentate, simboli e caratteri speciali.<meta name="viewport">— Configura il viewport per i dispositivi mobili, fondamentale per il responsive design.<meta name="description">— La meta description utilizzata dai motori di ricerca come anteprima nei risultati.<link rel="stylesheet">— Collega fogli di stile CSS esterni al documento.<script>— Include o collega file JavaScript (anche se spesso è preferibile posizionarli prima della chiusura del body).<link rel="icon">— Specifica la favicon del sito, l’icona visualizzata nella scheda del browser.
L’ordine degli elementi nel <head> ha una certa importanza pratica. Il <meta charset> dovrebbe essere il primo elemento dopo l’apertura del <head>, poiché il browser deve conoscere la codifica prima di interpretare qualsiasi altro contenuto. Il <title> dovrebbe seguire immediatamente dopo, e il meta viewport subito dopo.
La Sezione Body: Il Contenuto Visibile
La sezione <body> è dove risiede tutto il contenuto visibile della pagina web. Tutto ciò che l’utente vede e con cui interagisce — testo, immagini, video, moduli, menu di navigazione — è contenuto all’interno del tag <body>. Mentre il <head> è il cervello della pagina, il <body> ne è il corpo.
All’interno del body si utilizzano i tag HTML per strutturare il contenuto in modo logico e semantico. I tag più comuni includono i tag di intestazione da <h1> a <h6> per i titoli, il tag <p> per i paragrafi, <a> per i link, <img> per le immagini, e i tag semantici HTML5 come <header>, <nav>, <main>, <section>, <article> e <footer> per definire le diverse aree della pagina.
Una buona pratica è organizzare il contenuto del body seguendo una gerarchia logica. Tipicamente, una pagina web moderna presenta questa struttura all’interno del body:
- Un
<header>con logo e navigazione principale - Un
<main>con il contenuto principale della pagina - Eventuali
<aside>per contenuti secondari (sidebar) - Un
<footer>con informazioni di contatto, link utili e copyright
È comune inserire i tag <script> appena prima della chiusura del </body> piuttosto che nel <head>. Questa pratica garantisce che il contenuto HTML sia completamente caricato prima dell’esecuzione degli script, migliorando le performance percepite della pagina. In alternativa, si può utilizzare l’attributo defer negli script inseriti nel head per ottenere lo stesso risultato.
Le Regole di Annidamento (Nesting)
Un concetto fondamentale nella scrittura di HTML corretto è l’annidamento (nesting). Gli elementi HTML possono essere inseriti l’uno dentro l’altro, creando una struttura gerarchica. Tuttavia, esistono regole precise che governano quali elementi possono contenerne altri.
La regola principale è che gli elementi devono essere chiusi nell’ordine inverso rispetto a quello di apertura. Ad esempio, questo è corretto: <div><p>Testo</p></div>. Questo è sbagliato: <div><p>Testo</div></p>. I tag non devono mai sovrapporsi.
Inoltre, esistono restrizioni sui tipi di elementi che possono essere contenuti in altri. Ad esempio, gli elementi inline (come <span>, <a>, <strong>) non dovrebbero contenere elementi di blocco (come <div>, <p>, <h1>). Un <p> non può contenere un altro <p> o un <div>. Un <ul> può contenere solo elementi <li> come figli diretti.
Rispettare queste regole è importante non solo per la validità del documento, ma anche per evitare comportamenti imprevisti nella visualizzazione e nell’interazione con CSS e JavaScript.
Esempio di Pagina HTML Minima Valida
Ecco la struttura minima di una pagina HTML5 valida, con tutti gli elementi essenziali:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Mia Prima Pagina</title>
</head>
<body>
<h1>Benvenuto</h1>
<p>Questo è il mio primo documento HTML.</p>
</body>
</html>Questa struttura contiene tutti gli elementi necessari: la dichiarazione DOCTYPE, l’elemento root con attributo lang, la sezione head con charset, viewport e title, e la sezione body con del contenuto. Partendo da questo scheletro, puoi costruire qualsiasi pagina web aggiungendo elementi e contenuti secondo le tue necessità.
Comprendere questa struttura base è il fondamento su cui costruire tutto il resto. Nel prossimo passo del tuo percorso di apprendimento, ti consigliamo di esplorare i tag HTML essenziali che ogni sviluppatore dovrebbe conoscere.
Hai bisogno di aiuto con la struttura delle tue pagine web? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.