Hai caricato un progetto, lo hai aperto nel browser e il layout è andato in pezzi. Hai controllato su un tablet e il menu era storto. Il cliente scrive: «nel mio Safari è tutto grigio». Ti suona familiare?

La causa del problema è il codice non valido. Un tag non chiuso, un punto e virgola mancante nei CSS o un errore di sintassi in JavaScript, e il browser «tira a indovinare» per te. Ogni browser lo fa in modo diverso. Il risultato è il caos.

Per fortuna, verificare la validità del codice nel 2026 è più facile che mai. Servizi online, estensioni per browser e i DevTools integrati trovano gli errori in pochi secondi, non in una serata di debug. Ecco gli strumenti che usiamo nella pratica quotidiana.

💡 Panoramica rapida:

• Apri validator.w3.org e controlla l'HTML della tua pagina: ci vogliono 10 secondi
• Per i CSS, usa jigsaw.w3.org/css-validator: mostra avvisi sull'incompatibilità con browser specifici
• Verifica JavaScript con ESLint o tramite la console del browser: gli errori di sintassi vengono evidenziati subito
• Installa l'estensione Web Developer per Chrome: dà accesso con un clic ai validatori W3C
• Per il controllo in batch di decine di pagine, usa Total Validator: verifica HTML, CSS, link e ortografia in un'unica passata

Tabella comparativa

1. Validatori online W3C

Validator.w3.org

Il W3C Markup Validation Service è il validatore ufficiale del consorzio che sviluppa gli standard web. Dal 2025 gira sul motore Nu Html Checker, più moderno e preciso del vecchio parser SGML.

Puoi controllare una pagina in tre modi: tramite URL, caricando un file HTML o incollando il codice direttamente. Il report mostra gli errori con i numeri di riga e raccomandazioni specifiche per la correzione. Tieni presente che il validatore verifica la conformità allo standard, non «se il sito funziona». Un bollino verde W3C non garantisce che la pagina appaia uguale su tutti i browser.

Nella pratica, eseguiamo un controllo con validator.w3.org a ogni riprogettazione. Individua tag non chiusi e attributi non standard che sfuggono all'ispezione visiva.

Jigsaw.w3.org

Il W3C CSS Validation Service controlla i fogli di stile per verificarne la conformità alle specifiche. Puoi specificare il profilo CSS (2.1, 3, SVG), scegliere il mezzo di visualizzazione e impostare il livello di dettaglio del report. A differenza del validatore HTML, qui gli avvisi sono importanti quanto gli errori perché spesso segnalano proprietà che non funzionano in tutti i browser.

Una funzione utile è che il validatore mostra quali prefissi vendor (-webkit-, -moz-) non sono più necessari. Nel 2026, la maggior parte delle proprietà CSS3 è supportata senza prefissi e jigsaw aiuta a ripulire il codice obsoleto.

2. Strumenti online specializzati

Validome.org

Validome è un validatore meno noto ma solido, con supporto per diversi standard: HTML (inclusi XHTML e HTML5), CSS, feed RSS/Atom e persino microdati. È veloce e l'interfaccia è minimalista. È comodo quando serve un controllo incrociato: passi una pagina al W3C, poi a Validome e confronti i risultati. Parser diversi a volte individuano problemi diversi.

Varvy.com

Varvy mostra un riepilogo della pagina: quanti script e fogli di stile sono collegati, le loro dimensioni e l'ordine di caricamento. Non è tanto un validatore quanto uno strumento diagnostico per l'audit delle performance. È utile quando una pagina è lenta: Varvy mostra subito quale risorsa sta bloccando il rendering.

3. Estensioni per browser per Firefox

HTML Validator

Questa estensione basata su Tidy e OpenSP mostra un'icona semplice nella barra degli strumenti: verde significa che la pagina è valida, rosso che ci sono errori. Cliccandoci si apre un report dettagliato con le righe problematiche evidenziate e suggerimenti per la correzione. È l'ideale per chi vuole vedere lo stato di validità di ogni pagina visitata senza sforzo aggiuntivo.

Total Validator

Total Validator è la mietitrebbia dei validatori. In un solo passaggio controlla: HTML rispetto a più versioni dello standard, CSS, link non funzionanti, accessibilità e ortografia. Dispone di una funzione di screenshot per catturare le pagine in browser diversi, comoda per un rapido confronto visivo.

Nella pratica, Total Validator è prezioso in fase di collaudo di un sito: si lancia una verifica sull'intero dominio e si ottiene un unico report con tutte le pagine problematiche.

• Pro: tutto in un unico strumento, screenshot, verifica dei link, aggiornato con regolarità
• Contro: l'interfaccia ha un aspetto datato, la verifica di un sito grande richiede minuti
• Prezzo: gratuito

Validaty

Un'estensione leggera che aggiunge un pulsante alla barra degli strumenti di Firefox. Un clic e si vede un'indicazione cromatica della validità della pagina corrente. Approccio minimalista: niente report dettagliati, solo «superato / non superato». Per controlli rapidi durante il flusso di lavoro è perfetta.

4. Estensioni per Chrome

Web Developer

L'estensione Web Developer è il coltellino svizzero per sviluppatori web. Oltre alla validazione (HTML tramite URL e incolla diretto del codice, CSS, feed, accessibilità), permette di: disabilitare JavaScript, gestire i cookie, modificare CSS al volo, mostrare i testi alternativi delle immagini e verificare la presenza di link non funzionanti.

Qui la validazione non è la funzione principale ma parte del toolkit complessivo. Il vantaggio è avere tutti gli strumenti raccolti in un unico pannello, così non si deve saltare da una scheda all'altra.

• Pro: ricco set di strumenti, integrazione con i validatori W3C, community attiva
• Contro: utilizza un validatore esterno (nessun motore integrato), non è possibile personalizzarlo con la propria istanza
• Prezzo: gratuito

Validity

L'estensione Validity restituisce i risultati del controllo HTML direttamente nella console JavaScript, così non occorre aprire una nuova scheda. È possibile configurarla per usare la propria istanza di validatore e attivare la verifica automatica su host specifici.

• Pro: personalizzazione, verifica automatica su siti selezionati
• Contro: l'output si mescola con i log JS, rendendone scomoda la lettura; mostra solo la riga dell'errore senza uno snippet di codice
• Prezzo: gratuito

Bookmarklet per la validazione HTML

Acid.JS Validator è un bookmarklet che utilizza l'API SGML del W3C per verificare il markup. Non richiede l'installazione di estensioni: basta trascinare il link nella barra dei preferiti e avviarlo su qualsiasi pagina con un clic. Funziona in qualsiasi browser. Una buona opzione di riserva quando le estensioni sono bloccate dalle policy aziendali.

5. Strumenti di sviluppo integrati

Firebug è passato alla storia nel 2017, ma la sua eredità sopravvive in ogni browser moderno. Firefox, Chrome ed Edge dispongono tutti di DevTools integrati (F12) che derivano direttamente da Firebug.

Cosa possono fare i DevTools per la validazione:

• La scheda Console mostra gli errori JavaScript con numeri di riga e stack trace. Gli errori di sintassi sono evidenziati in rosso immediatamente al caricamento della pagina.
• La scheda Elementi mostra visivamente l'HTML non valido: i tag che il browser ha «corretto» automaticamente sono visualizzati in modo diverso rispetto al sorgente.
• La scheda Problemi (Chrome) / il pannello Console (Firefox) mostra avvisi su API deprecate, contenuti misti (HTTP/HTTPS) e problemi di CSP.

Il vantaggio principale dei DevTools è l'immediatezza. Sei già nel browser, stai già guardando la pagina, basta premere F12. Nessuna installazione necessaria.

6. Validatori JavaScript

Per un lavoro serio con JavaScript, un validatore online non basta. Nella pratica usiamo due livelli di controllo:

Primo, ESLint. Un analizzatore statico che trova non solo errori di sintassi ma anche potenziali problemi: variabili non usate, costrutti insicuri e scostamenti dallo stile del codice. Si integra con VS Code, WebStorm e le pipeline CI/CD. La configurazione eslint:recommended copre la maggior parte delle esigenze di un progetto tipico.

Secondo, TypeScript. La tipizzazione forte cattura intere classi di errori già in fase di scrittura del codice. Se il progetto è in JS puro, almeno aggiungi le annotazioni JSDoc: TypeScript controlla i file .js con le annotazioni senza passare a .ts.

I validatori online (javascript-validator.com e simili) sono adatti per un controllo rapido di un piccolo frammento, ma non per un lavoro sistematico sul codice.

7. Test di responsività

QuirkTools mostra come un sito appare a diverse risoluzioni dello schermo, dallo smartphone al monitor wide. È utile per verifiche rapide del layout responsive senza passare fisicamente da un dispositivo all'altro.

Nel 2026, i DevTools integrati rappresentano un'alternativa: Chrome e Firefox hanno la modalità di emulazione dispositivo (Device Toolbar), che riproduce in modo più accurato le risoluzioni mobile. Ma QuirkTools è comodo per le dimostrazioni ai clienti: un solo screenshot con tutti i breakpoint mostra chiaramente il risultato.

Video: come verificare la validità HTML in 5 minuti

Se non hai mai usato un validatore W3C, inizia da questo breve tutorial. L'autore mostra tutti e tre i modi per verificare: tramite URL, caricamento file e incolla diretto del codice.

⁉️🤔 Domande frequenti

Perché preoccuparsi di verificare la validità HTML nel 2026 quando i browser correggono tutto da soli?

I browser correggono gli errori in modo diverso. Chrome potrebbe chiudere un tag non chiuso in un modo, Safari in un altro. Il risultato: la pagina appare diversa. Inoltre, un HTML non valido danneggia la SEO perché i bot di ricerca sono meno tolleranti dei browser verso gli errori di markup. La validazione W3C è un'assicurazione contro i bug cross-browser e i problemi di indicizzazione.

Cosa è più importante verificare: HTML o CSS?

L'HTML è più importante. Un errore HTML rompe la struttura del documento, facendo sì che screen reader e motori di ricerca perdano contenuto. Un errore CSS di solito influisce solo sull'aspetto visivo di un elemento specifico. Nella pratica: prima valida l'HTML (validator.w3.org), poi i CSS (jigsaw.w3.org), poi il JS (ESLint o console).

La validazione può essere automatizzata nel processo di sviluppo?

Sì, ed è l'approccio migliore. ESLint per JS, Stylelint per CSS e html-validate per HTML si integrano nei pre-commit hook (Husky + lint-staged). Al push sul repository, il codice viene controllato automaticamente e gli errori non arrivano in produzione. Per progetti WordPress, aggiungi il controllo nella CI tramite GitHub Actions: fai passare tutti i template del tema attraverso il validatore a ogni PR.

Validator.w3.org mostra decine di errori su un sito funzionante. È un disastro?

Non sempre. Alcuni "errori" del validatore W3C sono attributi non standard aggiunti da plugin o framework. Per esempio, gli attributi di Alpine.js (x-data, x-show) o gli attributi data di analytics. Guarda gli errori in modo selettivo: tag non chiusi, annidamenti errati e ID duplicati sono bug reali. Gli attributi data non standard sono rumore accettabile.

Quale validatore scegliere per un sito WordPress?

Inizia con validator.w3.org per controlli una tantum delle pagine chiave. Installa Total Validator come estensione Firefox per audit periodici. Aggiungi ESLint e Stylelint al processo di sviluppo del tema. Per i link non funzionanti, usa l'audit integrato in Total Validator o lo specializzato Dr. Link Check.

Riepilogo: cosa eseguire e quando

La validazione del codice non è un'azione una tantum prima della consegna del progetto, ma un'abitudine. Ecco la nostra checklist operativa:

• Quando costruisci un nuovo blocco: passa l'HTML in validator.w3.org (incolla diretto del codice), i CSS in jigsaw.w3.org.
• Quando installi un nuovo plugin su WordPress: apri la pagina con il plugin nel browser, premi F12 → Console, verifica la presenza di errori JS in rosso.
• Trimestralmente: esegui Total Validator sull'intero sito, controlla i link non funzionanti e il quadro generale.
• Prima del rilascio: DevTools → Device Toolbar → scorri tutti i breakpoint cercando bug visivi.

Non serve controllare ogni pagina ogni giorno. Basta integrare la validazione nei punti critici del flusso di lavoro e il numero di bug "inaspettati" in produzione diminuirà drasticamente.

Se sei agli inizi, installa l'estensione HTML Validator per Firefox o Web Developer per Chrome. L'icona nella barra degli strumenti ti ricorderà di verificare ogni volta che apri il sito. Questo è il modo più semplice per trasformare la validazione in un'abitudine.