Forse non tutti sanno che esistono servizi di verifica del proprio codice html e CSS.

Avete appena finito di scrivere la vostra pagina web ed ora volete verificare che il codice sia stato scritto in maniera corretta.

Ecco che entrano in gioco i validatori di codice html, come ad esempio W3C Validation :

https://validator.w3.org/

Vediamo più in dettaglio come funziona.

schermata-w3c

Come potete vedere dall’immagine ci sono tre possibili soluzioni per verificare il codice:

  1. Inserendo l’URL del sito;
  2. Caricando il file html;
  3. Copiando e incollando il codice direttamente nel validatore.

Nel mio caso vi mostrerò la terza opzione.

schermata-w3c-2

Una volta copiato e incollato il codice cliccate sul pulsante CHECK!

chermata-w3c-3

No errors 🙂 perfetto! Il codice è corretto!!

Ora vediamo il caso in cui il codice presenta degli errori.

w3c-4

Come potete osservare dall’immagine, nel codice mi sono dimenticata di chiudere un <div> e W3C mi segnala che nella sezione <body> c’è un elemento (div) non chiuso, evidenziando anche il suo posizionamento nel codice.

Verificare il codice è importante dato che spesso e volentieri il nostro browser non si accorge di essi, come mostrerò nell’esempio seguente.


1

 

Anche nel caso in cui dovessi commettere errori nel codice il browser mostrerebbe la pagina in modo corretto. In realtà il codice non sarebbe valido dato che manca la chiusura dell’elemento <div>. Inoltre, pur essendoci due volte l’attributo ID “subtitle” la pagina non mostra nessuna anomalia.

Proviamo a copiare e incollare il codice in W3C!

w3c-5

Il validatore ti segnala infatti che l’ID è stato duplicato e che l’elemento <div> non è stato chiuso! 😉

Tutto questo vale anche per i CSS? In realtà se doveste commettere errori nel codice CSS questo validatore non ve lo segnala dato che ne esiste un altro solo per i CSS:

https://jigsaw.w3.org/css-validator/

css-validatore

Anche per i CSS possiamo ricorrere alle stesse modalità di verifica utilizzate per il codice html.

css-validatore-errori

Nel codice CSS ci sono due errori:

  • color: grey: (i due punti al posto del punto e virgola)
  • background-cloro: red; (invece di background-color) 😛

Vediamo ora cosa mi dice il validatore…

css-validatore-errori-2

Ha trovato errori nel #main-title alla riga 9 (i due punti invece del punto e virgola) e alla riga 10 (proprietà inesistente).




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.