Prima o poi ci si imbatte in una pagina web di cui si vuole comprendere il funzionamento: un menu a discesa, un modulo ben allineato, un layout che si vorrebbe riprodurre. Il codice HTML di questo sito è accessibile con pochi clic, direttamente dal browser. Bisogna però sapere dove guardare e cosa cercare per non perdersi in centinaia di righe di tag.
Ispezionare un elemento specifico con gli DevTools del browser
Il metodo più diretto per leggere l’HTML di un sito è il clic destro e poi “Ispeziona” (o “Inspect” a seconda della lingua del browser). Si ottiene il pannello DevTools, che mostra il codice sorgente della pagina in un albero di tag espandibili.
Il vero trucco è il passaggio con il selettore di elementi. In alto a sinistra del pannello DevTools, una piccola icona a forma di cursore consente di passare sopra qualsiasi blocco della pagina. Ogni area viene evidenziata in blu e il codice corrispondente appare istantaneamente nel pannello Elements. In questo modo si collega il visivo al markup senza dover cercare manualmente.
Quando si vuole comprendere il codice html di un sito web senza formazione tecnica, questa ispezione visiva sostituisce vantaggiosamente la lettura lineare del codice sorgente grezzo. Si punta a un titolo, un’immagine o un pulsante, e si vede direttamente il tag che lo genera.
Scorciatoie da tastiera da ricordare
- Ctrl + Maiusc + I (Windows) o Cmd + Opzione + I (Mac) apre gli DevTools in Chrome, Edge e Firefox.
- Ctrl + Maiusc + C attiva direttamente la modalità selettore, pronta a passare sopra la pagina.
- F12 funziona sulla maggior parte dei browser desktop come alternativa rapida.
Queste scorciatoie evitano di passare dai menu contestuali, risparmiando tempo quando si ispezionano più elementi consecutivamente.
Codice sorgente completo o pannello Elements: due letture diverse dell’HTML
Spesso si confondono “Visualizza sorgente” (Ctrl + U) e il pannello Elements degli DevTools. Entrambi mostrano HTML, ma non lo stesso.
“Visualizza sorgente” fornisce il file HTML grezzo così come il server lo ha inviato. È un documento statico, bloccato al momento del caricamento. Qui si trova la struttura di base: tag head, body, collegamenti ai file CSS e JavaScript.
Il pannello Elements, invece, mostra il DOM (Document Object Model), la versione “viva” dell’HTML dopo l’esecuzione del JavaScript. Se uno script aggiunge un menu a discesa o modifica un testo al clic, queste modifiche appaiono nel pannello Elements ma non nel codice sorgente grezzo.
Quando usare l’uno o l’altro
Per individuare i tag meta, i collegamenti ai fogli di stile o la struttura generale di una pagina, il codice sorgente grezzo è sufficiente. Per capire come funziona un componente interattivo (un carosello, un modulo dinamico, una scheda), il pannello Elements è l’ingresso giusto.
Un errore comune: si cerca un tag nel codice sorgente, non lo si trova e si conclude che non esiste. È semplicemente stato generato da JavaScript dopo il caricamento. I risultati variano su questo punto a seconda dei browser, ma la regola rimane la stessa: se il contenuto è dinamico, si passa per gli DevTools.
Individuare i tag HTML utili senza leggere tutto
Una pagina web contiene spesso diverse centinaia di righe di codice. Leggere tutto sarebbe controproducente. Si punta piuttosto ai tag che strutturano il contenuto visibile.
I titoli (h1 a h6) formano la spina dorsale della pagina. Individuare l’h1 fornisce il titolo principale, gli h2 delimitano le grandi sezioni. Espandendo l’albero del DOM negli DevTools, si visualizza questa gerarchia senza leggere il resto.
I tag semantici HTML5 aiutano anche a orientarsi rapidamente:
- nav racchiude il menu di navigazione principale.
- main contiene il contenuto centrale della pagina, escluse intestazione e piè di pagina.
- footer raggruppa le informazioni di piè di pagina (note legali, collegamenti secondari).
- article isola un blocco di contenuto autonomo, come un post di blog o una scheda prodotto.
Quando questi tag semantici sono utilizzati (non è sempre il caso), permettono di navigare nel codice come in un sommario. Si espande nav per vedere la struttura del menu, si espande main per accedere al contenuto.
Modificare l’HTML in tempo reale per testare e imparare
Il pannello Elements degli DevTools consente di modificare l’HTML visualizzato sullo schermo. Doppio clic su un testo, lo si cambia. Clic destro su un tag, si può eliminare, duplicare o aggiungerne uno nuovo. Queste modifiche sono temporanee e scompaiono al ricaricamento della pagina.
Questa funzionalità è un terreno di sperimentazione senza rischi. Si può ad esempio cambiare il colore di un pulsante nel pannello Stili (a destra dell’HTML) per vedere l’effetto, o sostituire un h2 con un h3 per osservare la differenza di resa. Si impara il legame tra tag e resa visiva attraverso la prova diretta.
Un caso concreto di utilizzo
Si individua un blocco di testo ben formattato su un sito. Lo si ispeziona: è un paragrafo in un tag p, con una classe CSS che gli applica una dimensione del carattere, un colore e un margine. Modificando la classe o aggiungendo una proprietà CSS nel pannello Stili, si comprende quale stile produce quale effetto. Questo ciclo visivo, modificare e poi osservare, è più efficace di una lezione teorica per ancorare le basi.
Il pannello Console, proprio accanto, consente anche di testare comandi JavaScript semplici come document.querySelectorAll(‘h2’), che elenca tutti i titoli h2 della pagina. Si ottiene in una riga la struttura delle sezioni senza dover espandere manualmente l’albero DOM.
Il codice HTML di una pagina web non è un documento riservato agli sviluppatori. Con il selettore di elementi, la distinzione tra codice sorgente e DOM, e la possibilità di modificare la resa in tempo reale, si dispone di tutto il necessario per analizzare qualsiasi sito dal proprio browser. La prossima volta che un layout vi incuriosisce, il clic destro è a portata di mano.
