Ciao, e benvenuto nella seconda puntata della settima stagione. Nella scorsa puntata abbiamo visto che il browser chiede una pagina al server e la riceve. Ma cosa riceve, esattamente? Il primo mattone, il fondamento di ogni pagina web, è il linguaggio della struttura, quello che comunemente si chiama HTML. Oggi capiamo cos'è, cosa fa, e soprattutto qual è la sua vera natura, che tanti fraintendono.
Cominciamo da un'idea che voglio piantarti subito, perché è la chiave di tutto: il linguaggio della struttura serve a dare significato al contenuto, non a renderlo bello. Questa è la cosa più importante e più fraintesa. Il suo compito non è decidere i colori, i caratteri, la disposizione: quello viene dopo, ed è un altro linguaggio. Il suo compito è dire cosa sono le cose. Questo è un titolo. Questo è un paragrafo. Questa è una lista. Questa è un'immagine. Questo è un collegamento. Descrive il significato e la struttura del contenuto, come lo scheletro di un corpo.
Facciamo l'analogia che chiarisce tutto: pensa a un documento scritto, come l'articolo di un giornale. C'è un titolo grande, dei sottotitoli, dei paragrafi di testo, magari un elenco puntato, qualche foto con didascalia. Il linguaggio della struttura serve proprio a marcare queste parti: a dire "questo pezzo è il titolo, questo è un paragrafo, questi sono gli elementi di un elenco". Non stabilisce che il titolo sia grande e nero; stabilisce che quello, concettualmente, è il titolo. La differenza sembra sottile ma è enorme, e regge tutto il resto.
Come si fa, in pratica, a marcare queste parti? Con le etichette, che circondano il contenuto e ne dichiarano il ruolo. In genere avvolgi un pezzo di testo tra un'etichetta di apertura e una di chiusura, che dicono "ciò che sta qui in mezzo è un titolo", oppure "è un paragrafo". Il browser, quando riceve la pagina, legge queste etichette e capisce la struttura del contenuto: sa cosa è titolo, cosa è paragrafo, cosa è elenco. Non devi memorizzare nulla adesso; ti basta afferrare il meccanismo: contenuto avvolto da etichette che ne dichiarano il significato.
Questi elementi, inoltre, si annidano uno dentro l'altro, formando una struttura ad albero. Una pagina contiene delle sezioni, una sezione contiene dei paragrafi, un paragrafo può contenere un collegamento. È come le scatole dentro le scatole, o come i rami di un albero che si diramano. Questa organizzazione ad albero non è un dettaglio: è il modo in cui la pagina è strutturata, e tornerà utilissima più avanti, quando parleremo di come lo stile e il comportamento agiscono proprio seguendo questa struttura. Per ora, tieni l'immagine dell'albero: contenuti dentro contenuti, ordinati.
Torniamo sul perché il significato conta, perché non è una pignoleria da puristi: ha conseguenze molto pratiche. La prima riguarda l'accessibilità. Ci sono persone che navigano il Web senza vederlo, per esempio chi è cieco e usa programmi che leggono la pagina ad alta voce. Questi programmi si basano proprio sul significato delle etichette per capire e raccontare la pagina: se dici correttamente cosa è un titolo e cosa è un collegamento, la pagina diventa comprensibile anche a chi non la vede. Usare il linguaggio della struttura in modo corretto e significativo è, prima di tutto, un atto di rispetto verso tutti gli utenti.
La seconda conseguenza pratica riguarda i motori di ricerca. Anche loro leggono le tue pagine attraverso la struttura, per capire di cosa parlano e come sono organizzate. Una pagina ben strutturata, in cui il significato delle parti è chiaro, viene capita meglio, e questo ha effetti concreti su quanto è trovabile. Quindi dare il giusto significato al contenuto non serve solo agli umani con difficoltà, ma anche alle macchine che devono interpretare la tua pagina. Il significato è un linguaggio universale che tutti, umani e macchine, usano per capire.
Un errore tipico dei principianti, che voglio segnalarti perché lo eviti fin da subito: usare le etichette per l'aspetto invece che per il significato. Per esempio, scegliere di marcare qualcosa come titolo solo perché si vuole che appaia grande, anche se titolo non è. È una trappola in cui si cade facilmente, ed è esattamente il fraintendimento da cui siamo partiti. La regola d'oro è: scegli l'etichetta in base a cosa la cosa è, non a come vuoi che appaia. L'apparenza è compito di un altro linguaggio, che vedremo nella prossima puntata.
Per oggi ci fermiamo qui. Il linguaggio della struttura, l'HTML, è il primo mattone di ogni pagina, e il suo compito è dare significato al contenuto, non renderlo bello: dire cosa è titolo, cosa è paragrafo, cosa è elenco, avvolgendo il contenuto in etichette che ne dichiarano il ruolo, in una struttura ad albero. Farlo in modo corretto e significativo conta per l'accessibilità e per essere trovati. Ricorda la regola d'oro: l'etichetta segue il significato, non l'apparenza. Nella prossima puntata parliamo proprio dell'apparenza: il linguaggio dello stile. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.