Che cos'è una pagina web

Ogni pagina che apri nasce come semplice file di testo. Fai clic con il tasto destro su quasi qualsiasi pagina, scegli Visualizza sorgente pagina e puoi leggere l'HTML inviato dal server.

Una pagina è un file di testo

Quando digiti un indirizzo nel browser, il browser chiede un file a un server e riceve del semplice testo. Quel testo è scritto in HTML, l'HyperText Markup Language. Il browser lo legge dall'alto in basso, capisce quali parti sono titoli, paragrafi, link e immagini, e poi disegna la pagina che vedi. Puoi verificarlo su quasi ogni sito: fai clic con il tasto destro sulla pagina e scegli Visualizza sorgente pagina. Dietro i colori e l'impaginazione c'è un lungo file di testo leggibile.

L'HTML è un linguaggio di markup, non un linguaggio di programmazione. Non ha cicli e non fa calcoli. Il suo compito è etichettare i contenuti: questa riga è il titolo principale, queste tre righe sono un elenco, questa frase porta a un'altra pagina. Di solito viaggia con altri due linguaggi. Il CSS decide l'aspetto (colori, caratteri, spaziature, impaginazione), e JavaScript fa reagire la pagina a clic e digitazione. Questo corso tratta il primo livello. Il corso di CSS tratta il secondo.

Lo scheletro comune a tutte le pagine

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

La prima riga, <!DOCTYPE html>, è un residuo del web delle origini. Oggi serve solo a dire al browser di usare la modalità standard invece di una vecchia modalità di compatibilità che imita i bug dei browser degli anni 1990, quindi tienila sempre. Poi viene l'elemento <html>, che avvolge l'intero documento. Il suo attributo lang indica la lingua della pagina. Gli screen reader lo usano per scegliere la pronuncia giusta, e gli strumenti di traduzione per sapere che cosa stanno traducendo.

Dentro <html> ci sono due parti. <head> contiene informazioni sulla pagina che non vengono disegnate nella pagina stessa. <meta charset="utf-8"> dice quale codifica dei caratteri usa il file; UTF-8 può memorizzare le lettere di tutti i sistemi di scrittura, coreano compreso, così il testo non si trasforma in simboli strani. <title> è il nome mostrato sulla scheda del browser, nei segnalibri e nei risultati di ricerca, ed è la prima cosa che uno screen reader annuncia quando la pagina si apre. <body> contiene tutto ciò che compare sullo schermo.

Dal testo a un albero

Il browser non conserva il tuo HTML come un'unica lunga stringa. Lo analizza e lo trasforma in un albero di oggetti chiamato DOM, il Document Object Model. Ogni elemento diventa un nodo, e gli elementi scritti dentro un altro elemento diventano suoi figli. Nella figura qui sotto, title è figlio di head, mentre h1 e p sono figli di body. Sia i selettori CSS sia JavaScript lavorano su questo albero, ed è uno dei motivi per cui un annidamento accurato è importante.

I browser sono indulgenti. Se dimentichi un tag di chiusura, il parser segue le regole di riparazione scritte nello standard HTML e costruisce comunque un albero, ma l'albero riparato potrebbe non essere quello che intendevi. Prendere l'abitudine di scrivere la struttura correttamente risparmia parecchio debugging confuso in seguito.

Chi scrive le regole

Tim Berners-Lee scrisse la prima proposta per il World Wide Web nel marzo 1989, mentre lavorava al CERN, e alla fine del 1990 lì funzionavano già il primo server web e il primo browser. Da allora l'HTML è cresciuto moltissimo. Oggi è definito dall'HTML Living Standard, curato dal WHATWG, un gruppo creato dai produttori di browser. Nel 2019 il W3C e il WHATWG si sono accordati per lavorare su quest'unica versione. Living, cioè «vivo», significa che il documento non ha numeri di versione e viene aggiornato di continuo, quindi il nome HTML5 che trovi ancora nei libri è solo un'etichetta generica.

L'editor qui sotto funziona come un piccolo browser. Scrivi a sinistra e il risultato compare a destra un attimo dopo. Riproduci ridisegna subito il risultato. Quando pensi di aver finito, premi Verifica: la pagina esegue alcuni test sul tuo HTML e ti dice quali non sono ancora superati. Ricomincia riporta il codice iniziale.