Quali sono i cambiamenti da affrontare per il passaggio da HTML4 (o XHTML) alla versione HTML5 ?
Possiamo rispondere indicando una unica parola: SINTASSI !Usiamo alcuni esempi di uso comune per spiegare cosa sia la SINTASSI di un linguaggio di programmazione:
il linguaggio di markup creato da Tim Berners-Lee, e che ancora oggi popola i nostri browser, è stato studiato come applicazione del più generico SGML (Standard Generalized Markup Language); ne è la prova la dichiarazione di Document Definition Type che dovrebbe essere posta nella prima riga di una pagina Web ad indicare la grammatica, HTML per l’appunto, usata nel documento:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd">
In realtà la quasi totalità dei browser ignora la definizione e interpreta il documento secondo logiche più permissive, frutto di anni di eccezioni e di esperienza accumulata su pagine malformate. L’XHTML, invece, è una versione della sintassi HTML costretta all’interno delle regole XML, a sua volta grammatica SGML: questo approccio dovrebbe implicare un maggior rigore nella pagina e l’aderenza a regole quali l’obbligo di chiusura di tutti i tag. Il parser XML inoltre dovrebbe sospendere l’interpretazione della pagina al primo errore rilevato.
L’arrivo dell’HTML5 introduce una importante novità in questo scenario, per la prima volta l’obiettivo delle specifiche è quello di definire un linguaggio ubiquo, che possa poi essere implementato su entrambe le sintassi. L’occasione è buona anche per fare un po’ di pulizia e rompere definitivamente il legame tra HTML e SGML formalizzando e traducendo in standard le regole adottate da tempo nei browser. Per indicare un documento HTML5 è nata quindi la seguente semplice istruzione:
<!DOCTYPE html >
Che si affianca a quella da utilizzare in caso si intenda scrivere una pagina XHTML5:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Sintassi: TAG
Il Tag è l’elemento che indica una struttura di un documento HTM e un metodo per ordinare gerarchicamente i contenuti. Esistono tre distinte versioni di questa particella, ognuna di esse si applica selettivamente solo ad alcuni elementi:
Tag ‘classico’
<p> bla bla bla bla ... </p>
Tag ‘vuoto’
<img src="immagine.jpg" alt="Una immagine">
Tag ‘autochiudente’
<rect x="200" y="100" width="80" height="40" stroke="black"/>
Gli elementi HTML5 si possono dividere in tre categorie sulla base della tipologia di tag da usare per implementarli.
1. Elementi normali: sono quelli che possono racchiudere dei contenuti sotto forma di testo, commenti HTML, altri elementi HTML, etc. Sono elementi normali, dunque, i paragrafi (<p>), le liste (<ul>), i titoli (<h1>), etc.
Salvo specifici casi gli elementi normali vengono definiti attraverso un tag di apertura (<p>) e un tag di chiusura (</p>).
2. Elementi vuoti: gli elementi vuoti sono quelli che non possono avere alcun contenuto. Per questi elementi si utilizza un tag ‘vuoto’. Essi sono: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr. Per gli elementi vuoti, la chiusura del tag, obbligatoria in XHTML, è invece opzionale. Possiamo dunque definire un tag <img> secondo le regole XHTML:
<img src="immagine.png" alt="testo" />
O seguendo la vecchie regole di HTML 4:
<img src="immagine.png" alt="testo">
3. Elementi provenienti da altri namespace: per questi elementi sono richiesti i tag ‘autochiudenti’. Si tratta degli elementi adottati da specifiche esterne, come SVG e MathML.
Maiuscolo, minuscolo
Una delle differenze principali rispetto alle regole XHTML riguarda l’uso del maiuscolo e del minuscolo per definire un tag. In XHTML è obbligatorio usare il minuscolo. In HTML5 è consentito scrivere un tag usando anche il maiuscolo:
<IMG src="immagine.png" alt="testo">
Casi particolari
Esistono alcune casistiche per le quali un tag classico può mancare della sua particella di apertura o di chiusura; questo succede quando il browser è comunque in grado di determinare i limiti di operatività dell’elemento. Gli esempi più eclatanti riguardano i tag ‘contenitori’, come head, body e html, che possono essere omessi in toto a meno che non contengano un commento o del testo come istruzione successiva. È quindi sintatticamente corretto scrivere un documento come segue:
<meta charset="utf-8"> <title>Pagina HTML5 Valida</title> <p>Un paragrafo può non avere la particella di chiusura <ol> <li>e anche un elemento di lista </ol>
Notiamo che, come mostrato nell’esempio, anche i tag p e li possono essere scritti omettendo la particella di chiusura, a patto che l’elemento successivo sia all’interno di una cerchia di elementi definita dalle specifiche. A fronte di queste opzioni di semplificazione è però errato pensare che la pagina generata dal codice di cui sopra manchi, ad esempio, dell’elemento html; esso è infatti dichiarato implicitamente ed inserito a runtime dallo user-agent.
Per un quadro dettagliato rimandiamo a questa sezione delle specifiche.
Conclusioni
Dagli esempi spiegati in precedenza, la sintassi HTML5 si caratterizza per una spiccata flessibilità e semplicità di implementazione. Le osservazioni sono valide a patto di implementare la serializzazione HTML; ricordiamo infatti che le specifiche prevedono anche l’utilizzo di una sintassi XML attraverso l’uso delle istruzioni:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Infine, per una migliore leggibilità del codice sorgente, consigliamo di ricorrere il meno possibile all’utilizzo di elementi impliciti, scrivendo sempre tutti i tag necessari nella loro forma completa.
————- continua…. ———————-
