La convalida del W3C a volte non è molto clemente, ma ti permette di vedere gli errori generati dal tuo markup. Un sacco di errori e avvisi lanciati dal validatore sono un buon indicatore del fatto che il tuo XHTML non è in ottima forma e potrebbe non sembrare coerente tra i diversi browser. Qui ci sono 10 problemi di validazione che fanno fallire gli sviluppatori e come evitarli.
Prima di iniziare, ecco alcune buone pratiche da ricordare quando si utilizza il validatore W3C.
Con questi suggerimenti di base, diamo un'occhiata ad alcuni dei motivi per cui il tuo markup non è valido.
Uno dei motivi più comuni per cui i layout non vengono convalidati. Non smette mai di stupire quanto spesso questo sia il colpevole di un layout funky. I tag div non chiusi sono uno degli errori di layout più comuni e anche uno dei più difficili da diagnosticare. Il validatore non punta sempre all'appropriato tag div non chiuso, quindi non è sempre facile trovare l'ago nel pagliaio.
All'inizio degli anni '90, i browser come Microsoft e Netscape iniziarono a riconoscere dichiarazioni di font univoche mai standardizzate. Sfortunatamente ciò significa che il validatore W3C non riconosce ancora alcuni importanti tag HTML come "embed", anche se sono ampiamente utilizzati fino ad oggi. Se stai davvero cercando di ottenere quella convalida DOCTYPE severa, dovrai abbandonare l'embed.
Se vuoi davvero avere un markup valido e media integrati, prova a utilizzare il metodo Flash Satay.
Un errore frequente non è la dichiarazione di un DOCTYPE o la dichiarazione del DOCTYPE errato all'inizio del documento. Come regola generale, Strict DOCTYPE è la più alta convalida per cui sparare. Validazione rigorosa significa che le pagine web hanno la possibilità migliore di essere visualizzate correttamente su tutti i browser. Ecco come appare una dichiarazione rigorosa:
Se il tuo sito non convalida correttamente, allora c'è una buona probabilità che il motivo sia uno slash finale mancante da qualche parte nel tuo codice. È molto facile trascurare qualcosa come una barra finale, specialmente in elementi come i tag immagine. Per esempio:
Questo non sarà valido contro un DOCTYPE rigoroso. Aggiungi un '/' prima che il tag img termini in ogni caso per risolvere il problema.
Starai bene usando il tag "align" se il tuo DOCTYPE è impostato su Transitional, ma se hai preso la strada più alta e hai scelto una validazione Strict, vedrai degli errori. Align è un altro tag deprezzato che non dovrebbe essere più utilizzato nel markup. Invece di allineare, prova a usare galleggiante o text-align per spostare l'elemento.
Se hai dichiarato un DOCTYPE rigoroso, dovrai avvolgere i tag CDATA attorno al tuo codice JavaScript. Questo aspetto della convalida ha fatto inciampare molti sviluppatori, poiché i siti tendono a utilizzare JavaScript in linea per cose come gli annunci e gli script di tracciamento. Se devi includere JavaScript, aggiungi questi tag prima e dopo:
Se non lo hai notato, le immagini rappresentano un potenziale ostacolo per una buona convalida. Oltre alle barre finali, richiedono anche tag alt che descrivono le immagini, ad es. Alt = "Scary vampire picture".
I motori di ricerca si affidano anche a questo tag alt per aiutare a identificare le immagini sulla pagina, quindi è buona norma aggiungere comunque i tag alt.
Le entità sono un'altra piccola trappola che tende a ostacolare la convalida. Invece di usare cose come il simbolo "&", è una buona idea usare caratteri correttamente codificati. Ecco un intero elenco di entità di caratteri correttamente codificate da utilizzare nella marcatura XHTML.
L'annidamento è quando hai elementi all'interno di elementi, in questo modo:
Dolce!
È abbastanza facile confondersi e mescolare è l'ordine degli elementi nidificati. Ad esempio, avviando il tag forte prima del tag div, ma chiudendo prima il tag div. Questo non può alterare l'aspetto del layout, ma sicuramente manterrà il tuo markup dalla convalida.
Anche se può sembrare un problema ovvio, molti sviluppatori (incluso me stesso) continuano a lasciare un tag "titolo" nella sezione "testa" ogni tanto. Se vedi l'errore "manca un elemento secondario richiesto di HEAD", allora sai che ti manca un tag title.
Se hai trovato utile questo post, vota per favore su Digg.