Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

HTML5, la validazione del codice

Gli strumenti per verificare l'aderenza agli standard di pagine e applicazioni Web realizzate con HTML5
Gli strumenti per verificare l'aderenza agli standard di pagine e applicazioni Web realizzate con HTML5
Link copiato negli appunti

Una delle cose a cui dobbiamo abituarci, quando effettuiamo il passaggio da HTML4/XHTML a HTML5, è il modo in cui opera la convalida di HTML5, perché è radicalmente diversa da quella abituale.

In primo luogo, va sottolineato che i motori di convalida HTML5 sono "sperimentali", quindi è in "work in progress", di conseguenza è molto probabile che vedremo molti cambiamenti nel corso dei prossimi mesi. Inoltre, non si deve più far riferimento ad esso come ad un "validator": ora è più precisamente un "controllo di conformità" (anche se per semplicità utilizziamo il termine "validazione").

Così, quando si convalida una pagina con il validator del W3C, otteniamo il seguente avviso:

Il validatore ha controllato il tuo documento con una funzione sperimentale: HTML5 Conformance Checker. Questa caratteristica è stata resa disponibile per la tua convenienza, ma sii consapevole che potrebbe essere inaffidabile, o non perfettamente aggiornato con le ultime tecnologie di sviluppo.

Detto questo, confrontiamo i risultati di convalida utilizzando lo stesso codice sia per HTML5 e XHTML. Ecco il codice sottoposto alle verifiche:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Validazione</title>
<link rel="stylesheet" href="style.css">
<script></script>
</head>
<embed>
HTML.it #1<br>
<p>
<p>HTML.it #2</P>
<FOrM>
<input></form>
<textarea></textarea>
<a href=index.html target="_blank">
<div>& HTML.it #3</div></a>

Lo scopo dell'esempio non è tanto quello di fare confronti tra HTML5 e XHTML quanto quello di aiutarci a capire come convalidare i nostri documenti HTML5.

Naturalmente quando effettuiamo la validazione XHTML, modifichiamo il doctype inserendo quello corretto, nel nostro caso abbiamo usato il doctype strict XHTML.

HTML5: 0 errori; XHTML: 23 errori.

Il codice mostrato sopra è (che ci crediamo o no) 100% HTML5 valido. Le sole avvertenze date dal validatore HTML5 sono quelle che vengono date al momento di convalidare qualsiasi script (l'avvertimento citato sopra e un altro allarme collegato all'ingresso). Ma W3C Markup Validator non ci ha segnalato errori.

D'altra parte, se prendiamo lo stesso codice e lo convalidiamo utilizzando XHTML (cambiando il doctype), il validatore W3C stamperà 23 errori.

Figura 1. Il risultato della validazione
Risultato della validazione

Per completezza, di seguito vediamo il codice da utilizzare per la validazione XHTML. È identico al precedente, eccetto che per il doctype.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Validazione</title>
<link rel="stylesheet" href="style.css">
<script></script>
</head>
<embed>
HTML.it #1<br>
<p>
<p>HTML.it #2</P>
<FOrM>
<input></form>
<textarea></textarea>
<a href=index.html target="_blank">
<div>& HTML.it #3</div></a>

Osservando attentamente il codice, notiamo una gran quantità di errori apparentemente atroci. Ecco una lista dei problemi che il codice ha dal punto di vista della validazione XHTML:

  • Nessun elemento <html>
  • Assenza dell'attributo xmlns nell'elemento <html>
  • L'elemento <meta> non è chiuso
  • L'elemento <link> non è chiuso
  • L'elemento <script> non ha l'attributo type specificato
  • Nessun tag <body>
  • Elemento embed non definito
  • L'elemento <br> non è chiuso
  • Il tipo di documento non permette l'elemento p
  • L'elemento P non è stato aperto
  • Elemento FOrM indefinito
  • L'elemento form non è stato aperto
  • La chiusura di un tag è stato omessa o non specificata
  • Per l'elemento <textarea> manca l'attributo cols specificato
  • L'elemento a non ha l'attributo href specificato
  • Non c'è alcun attributo target
  • La chiusura per FOrM non è stata specificata
  • Una e commerciale non è codificata come un carattere speciale
  • Nessuna chiusura <body> e <html> tag

Come si vede, il validatore XHTML segnala tutti i problemi del nostro documento come errori, mentre il validatore HTML5 non ha alcun problema e restituisce la schermata verde che tutti conosciamo e amiamo. Sarebbe interessante discutere degli "errori" che, per ora, sono accettabili per il validatore HTML5, ma l'argomento merita una trattazione a parte.

Come spiegare queste differenze?

La ragione, di una così grande differenza, è semplice: ora la convalida HTML è separata dalla "analisi statica del codice". Un validatore non deve generare errori per incoerenze stilistiche del codice, ma solo per gli errori di programmazione, errori logici. Quindi, gli sviluppatori chiedono servizi di verifica che garantiscano un aiuto per la creazione di codice manutenibile e coerente.

Oltre al classico validator del W3C, almeno uno di questi strumenti è ora disponibile (HTML Lint), anche se dalla qualità non ancora troppo garantita.

Inoltre, HTML5 è progettato per essere retro-compatibile, in modo che sia conforme sia all'HTML4 che a codifiche XHTML.

Che cosa significa?

Il fatto che i validatori non restituiscano tutti gli errori non significa che il codice sia valido. Perciò dobbiamo cercare sempre di adottare metodi di codifica coerenti per mantenere il codice pulito e organizzato.

Quindi, non sto cercando di scoraggiare i programmatori a sviluppare in base al loro stile di programmazione, scrivendo per esempio tutti gli attributi del tag <html>, piuttosto a controllare costantemente che il codice sviluppato risponda alle specifiche, perchè il validatore attualmente controlla solo errori di marcatura reale.

Ti consigliamo anche