Validazione HTML e CSS secondo gli standard W3C

La validazione HTML e CSS del codice è un argomento antico nella storia del Web, tecnico, poco appariscente e spesso trascurato. Non è un servizio che vi cambierà il fatturato, e chi ve lo racconta come una svolta vi sta raccontando male le cose.

È però il segno più immediato di come è stato costruito un sito. Per questo valido tutte le pagine dei siti che realizzo, e in fondo a ogni pagina di questo sito trovate i link ai validatori: potete cliccarli adesso e verificare voi stessi, su questa pagina o su qualunque altra.

Che cos’è il W3C

Il World Wide Web Consortium è un’organizzazione internazionale non governativa che sviluppa le linee guida e le specifiche tecniche del Web, con l’obiettivo di garantirne interoperabilità e accessibilità.

È stato fondato nell’ottobre 1994 da Tim Berners-Lee, l’inventore del Web, e in trent’anni ha definito e ufficializzato oltre cinquanta standard, fra cui quelli dell’HTML e dei CSS. Per approfondire: www.w3.org

Che cosa significa validare il codice

Validare significa confrontare il codice HTML o CSS di una pagina con le specifiche ufficiali e verificare se le rispetta. Nulla di più e nulla di meno: è un confronto meccanico, non un giudizio di qualità.

Da qui derivano due conseguenze che conviene tenere presenti. Un codice valido non è automaticamente un buon codice: si può scrivere una pagina perfettamente conforme e mal costruita. Al contrario, un codice non valido segnala quasi sempre qualcosa che merita di essere guardato. La validazione è una condizione necessaria, non sufficiente.

Va detto anche il resto. Il validatore non sa niente di design, di usabilità, di quanto sia comprensibile il vostro testo. Esistono infatti casi in cui la conformità viene compromessa consapevolmente, per esigenze specifiche o per l’uso di tecnologie particolari. Non è un dogma, è uno strumento.

Una precisazione, perché le due cose vengono spesso confuse. La validazione riguarda la correttezza del linguaggio con cui è scritta la pagina, e le regole le stabilisce il W3C. I dati strutturati riguardano invece il significato dei contenuti per i motori di ricerca, e il vocabolario è di schema.org. Un sito può essere validato alla perfezione senza avere un solo dato strutturato, e viceversa: di quelli parlo nell’analisi SEO.

Come si verifica, in pratica

Un sito non si valida come blocco unico: si valida pagina per pagina. Un sito può quindi avere tutte, alcune o nessuna pagina conforme. Con un CMS come WordPress il lavoro è più gestibile, perché le pagine condividono lo stesso template e di fatto si validano le diverse tipologie di pagina.

Gli strumenti sono gratuiti e pubblici: il validatore HTML e il validatore CSS. Si inserisce l’indirizzo della pagina e in pochi secondi si ottiene l’elenco puntuale di errori e avvisi, con il numero di riga.

Gli errori che trovo più spesso

Dopo aver validato qualche centinaio di pagine, le sorprese sono poche e si ripetono. Quasi mai si tratta di codice scritto male da chi ha realizzato il sito: quasi sempre arrivano da altrove.

• Identificatori duplicati, il caso più frequente. Nascono quando lo stesso elemento compare due volte nella pagina, per esempio un menu ripetuto per la versione mobile o un form inserito due volte.
• Tag chiusi nel posto sbagliato, prodotti dall’editor: WordPress aggiunge automaticamente paragrafi attorno al contenuto e quando dentro c’è del codice inserito a mano il risultato è un tag orfano.
• Attributi non previsti dallo standard, aggiunti da plugin che generano il proprio HTML senza troppa attenzione.
• Attributi obsoleti, ereditati da temi vecchi o da contenuti importati da un sito precedente.
• Caratteri non codificati negli indirizzi, tipicamente le & commerciali nei link con parametri.

Nessuno di questi rompe la pagina, ed è il motivo per cui restano lì per anni. Ma sono anche il segnale che nessuno ha guardato bene sotto il cofano. Le specifiche cambiano nel tempo, quindi un sito valido oggi può non esserlo fra tre anni. Per questo il controllo va ripetuto a ogni modifica sostanziale e inserito nella manutenzione ordinaria o affrontato in occasione di un restyling.

Perché conviene farlo

Per una visualizzazione corretta. I browser sono tolleranti: davanti a un errore cercano comunque di mostrare qualcosa, ognuno a modo suo. Da lì nascono le differenze di resa e i comportamenti inattesi da un browser all’altro. La validazione elimina la maggior parte di questi imprevisti, anche se con i browser più vecchi nessuno può garantire nulla.

Per la velocità. Un codice con errori è più lento da interpretare. Attenzione però a non attribuirle meriti che non ha: una pagina può essere perfettamente valida e pesare troppo per via delle immagini o di una struttura inefficiente. La velocità si misura a parte, con l’analisi delle Web performance.

Per il posizionamento, ma indirettamente. Qui serve chiarezza: la validazione W3C non è un fattore di posizionamento in sé, e Google lo ha detto esplicitamente. Chi vi promette il contrario sta vendendo fumo. Quello che è vero è l’effetto indiretto: un codice pulito rende più prevedibile e veloce tutto il resto, la struttura della pagina è interpretata senza ambiguità, e il lavoro sul posizionamento parte da basi solide invece che da un terreno accidentato.
In ogni caso, la presenza di errori nel codice rende complicata e lenta la lettura delle pagine da parte degli spider dei motori di ricerca, e gli spider sono pigri: se non riescono ad indicizzare le pagine nel tempo previsto, le saltano e passano oltre.

Per la manutenzione. Un codice conforme tiene separate due cose che spesso si mescolano: il contenuto, che sta nell’HTML, e l’aspetto, che sta nel foglio di stile. Quando restano distinte, intervenire su un sito richiede mezz’ora invece di un pomeriggio passato a capire dove mettere le mani. È la differenza fra un progetto ordinato e una zuppa di codice, e si paga tutta nella manutenzione degli anni successivi.

Per l’accessibilità. Un sito valido non è automaticamente accessibile, ma è il punto di partenza. Un documento conforme si adatta meglio a piattaforme diverse, a browser diversi, e soprattutto alle tecnologie assistive usate da chi ha una disabilità visiva, uditiva o motoria.

Il logo, e perché non lo uso

I siti conformi possono esporre il logo di validazione del W3C, ma non è obbligatorio. Personalmente lo evito, perché è un elemento grafico invasivo che non dice niente al visitatore. Preferisco mettere in fondo a ogni pagina i link diretti ai validatori: chi vuole verificare lo fa in un clic, e io stesso me ne accorgo subito se una modifica ha introdotto un errore.

Il numero di siti conformi sta crescendo. WordPress e buona parte dei plugin sono una base solida su cui lavorare, mentre i temi commerciali raramente superano la validazione, ed è uno dei motivi per cui non li uso. La maggioranza del Web resta comunque lontana dalla conformità, compresi molti siti di aziende molto più grandi della mia.

Quanto lavoro richiede portare a zero gli errori

Il validatore è gratuito e chiunque può usarlo: incollate l’indirizzo di una pagina e in pochi secondi avete l’elenco. Il costo non è lì. È nel capire quali di quegli errori contano davvero, quali dipendono dal tema, quali da un plugin, quali dal modo in cui è stato inserito il contenuto, e poi nel correggerli senza rompere il layout.
Su un sito già online è un lavoro di analisi, non di clic, e su un sito costruito male può voler dire rimettere mano al template. Su un sito nuovo, invece, non costa quasi niente: basta scrivere bene fin dall’inizio. Per capire cosa comporterebbe sul vostro sito serve guardarlo, e da lì nasce un preventivo.

Se siete arrivati qui perché state valutando chi vi costruirà il sito, questa è una delle cose da chiedere: come viene scritto il codice e chi lo scrive. Ne parlo nella pagina sullo sviluppo siti Web.