La struttura di una pagina HTML5

Ogni pagina web, anche la più complessa che tu possa immaginare, nasce dallo stesso scheletro: quattro elementi che si ripetono identici dappertutto. Imparali una volta e li riconoscerai per sempre.

Ecco lo scheletro completo di una pagina valida:

<!DOCTYPE html>
 <html lang="it"> 

       <head> 
           <meta charset="utf-8"> 
           <title>La mia pagina</title> 
       </head>
 
       <body> 
           <h1>Ciao, mondo!</h1> 
       </body> 

</html>

Analizziamo i quattro pezzi, uno alla volta.

1. <!DOCTYPE html>: la prima riga in assoluto

È la primissima cosa che il browser legge, prima di ogni altro contenuto. E, sorpresa: non è nemmeno un vero elemento HTML. È una dichiarazione, con un unico scopo: dire al browser «segui le regole moderne del web».

Senza questa riga, il browser passa alla cosiddetta modalità quirks: una vecchia modalità di compatibilità con i siti di venti anni fa, in cui il layout e il CSS possono comportarsi in modi imprevedibili. Con <!DOCTYPE html>, la forma più semplice e quella raccomandata, resti sempre nella modalità standard.

Fonte: MDN Web Docs: «Quirks Mode and Standards Mode»; WHATWG HTML Living Standard.

2. <html>: il contenitore di tutto (e la lingua)

È l'elemento radice: avvolge l'intera pagina. Tutto ciò che vedremo dopo, head e body, è al suo interno. Tornando all'esempio della casa, il tag <html> rappresenta i muri perimetrali della casa, quelli che racchiudono e tengono insieme ogni singola stanza.

Nota l'attributo lang="it". Serve a dichiarare la lingua della pagina (qui, l'italiano). Non è un dettaglio estetico: gli screen reader, i lettori di schermo usati dalle persone non vedenti, lo leggono per pronunciare il testo con l'accento corretto. È anche un requisito delle linee guida di accessibilità WCAG.

Fonte: MDN Web Docs: attributo globale «lang»; W3C WAI: «HTML lang attribute» (WCAG 3.1.1).

3. <head>: il dietro le quinte

Il <head> contiene informazioni sulla pagina, ma non compare a schermo.

Qui mettiamo i metadati: il titolo che appare nella scheda del browser (<title>), i collegamenti ai file CSS, la codifica dei caratteri con <meta charset="utf-8">. In HTML5 l'unica codifica valida è UTF-8, e va indicata subito, tra le prime righe del head. Il charset è l'alfabeto che il browser usa per trasformare i byte in lettere leggibili. Con quello sbagliato, le lettere accentate (à, è, ù) e le emoji diventano simboli senza senso: il classico «perchè» al posto di «perché». UTF-8 contiene praticamente ogni carattere di ogni lingua del mondo.

Fonte: MDN Web Docs: elemento «<meta>»

4. <body>: ciò che si vede davvero

Finalmente il contenuto visibile: tutto ciò che il visitatore vede e con cui interagisce (testi, titoli, immagini, pulsanti, link) vive dentro il <body>. E' qui che le stanze della nostra casa vengono arredate, in cui entri e ti muovi. DOCTYPE, html e head hanno preparato il terreno; il body è la casa che finalmente abiti.

In sintesi

Quattro elementi, sempre gli stessi. Una volta compreso lo scheletro, sarà più semplice costruirci al suo interno.