HTML 5: La nuova frontiera di Internet Da HTML 4 ad HTML5

Un po di storia Siete curiosi di sapere come tutto nato? Venerd 4 giugno 2004, in una notte buia e tempestosa, Ian Hickson annuncia la creazione del gruppo di ricerca WHAT, acronimo di Web Hypertext Application Technology in un sintetico ma ricco messaggio. Lobiettivo del gruppo quello di elaborare specifiche per aiutare lo sviluppo di un web pi orientato alle applicazioni che ai documenti; tra i sottoscrittori di questa iniziativa si annoverano aziende del calibro di Apple, Mozilla e Opera. Questa piccolo scisma dal W3C determinato dal disaccordo in merito alla rotta decisa dal consorzio durante un famoso convegno del 2004 dove, per un pugno di voti, prevalse la linea orientata ai documenti di XHTML2. XHTML 2.0 considered harmful il titolo di un messaggio inviato alla mailing list ufficiale del W3C datato 14 gennaio 2003 che ben riassume i sentimenti contrastanti che allepoca si respiravano in merito a queste specifiche. La principale causa di perplessit da ricercarsi nella decisione azzardata di non mantenere la retro-compatibilit con la versione 1.1 eliminando alcuni tag e imponendo agli sviluppatori web un controllo rigoroso nella creazione delle pagine, pena lo stop del processo di parsing e la visualizzazione a schermo degli errori di interpretazione. Nei due anni successivi i gruppi XHTML2 e WHAT proseguono i lavori sulle proprie specifiche in modo indipendente e parallelo, sollevando dubbi e confusione sia da parte dei produttori di browser che degli sviluppatori web. Emblematico in tal senso un articolo firmato da Edd Dumbill nel dicembre 2005 intitolato The future of HTML. Il 27 ottobre 2006 in un post sul proprio blog intitolato Reinventing HTML, Tim Berners-Lee annuncia la volont di creare un nuovo gruppo di ricerca che strizzi locchio al WHAT e ammette alcuni sbagli commessi seguendo la filosofia XHTML2: Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didnt work. The large HTML-generating public did not move, largely because the browsers didnt complain. Some large communities did shift and are enjoying the fruits of well-formed systems, but not all. It is important to maintain HTML incrementally,

as well as continuing a transition to well- formed world, and developing more power in that world. Tim Berners-Lee. Dovranno passare quasi altri due anni di competizione tra le due specifiche, questa volta entrambe interne al W3C, prima che nel luglio del 2009 lo stesso Tim sancisca di non voler riconfermare il gruppo XHTML2 per lanno successivo preferendo di fatto la direzione intrapresa dallHTML5. Frattanto il gruppo di ricerca, formato da una commistione di elementi del W3C e del WHAT, sotto la guida di Ian Hickson, giunto alla 4 versione delle specifiche. Nonostante il continuo e solerte lavoro e il grande intervallo di tempo speso nella stesura di questo documento, i passi residui necessari ad eleggere questa tecnologia al rango di W3C Reccomandation, relegandola cos tra gli standard riconosciuti, sono ancora molti, al punto che si prevede di raggiungere lagognato traguardo soltanto attorno al 2020. Ricordiamo per che il consorzio si riferisce sempre allintero universo inscritto nelle specifiche mentre alcune feature ritenute peculiari ed importanti, ad esempio il tag <video>, sono gi implementate da tempo dalla totalit (o quasi) dei browser in commercio.

Che cos lHTML5?

Domanda semplice solo allapparenza; siamo sicuramente di fronte alla quinta revisione delle specifiche HTML ma anche di un vastissimo elenco di funzionalit che si sviluppano attorno al tema del linguaggio di markup: cerchiamo quindi di fare un po di ordine. Per prima cosa importante ricordare che, anche in virt della storia della sua nascita, allinterno dellHTML5 convivono in armonia due anime: la prima, che raccoglie leredit semantica dellXHTML2, e la seconda che invece deriva dallo sforzo di aiutare lo sviluppo di applicazioni Web. Il risultato di questo mix di intenti pi articolato di quanto si immagini; in prima istanza si assiste ad una evoluzione del modello di markup, che non solo si amplia per accogliere nuovi elementi, ma modifica in modo sensibile anche le basi della propria sintassi e le regole per la disposizione dei contenuti sulla pagina. A questo segue un rinvigorimento delle API JavaScript che vengono estese per supportare tutte le funzionalit di cui una applicazione moderna potrebbe aver bisogno: salvare informazioni sul device dellutente; accedere allapplicazione anche in assenza di una connessione Web; comunicare in modo bidirezionale sia con il server sia con altre applicazioni; eseguire operazioni in background; pilotare flussi multimediali (video, audio); editare contenuti anche complessi, come documenti di testo; pilotare lo storico della navigazione; usare metafore di interazione tipiche di applicazioni desktop, come il drag and drop; generare grafica 2D in tempo reale; generare grafica 3D in tempo reale; accedere e manipolare informazioni generate in tempo reale dallutente attraverso sensori multimediali quali microfono e webcam. Anche laspetto semantico a contorno del markup non dimenticato; ecco quindi nascere le

specifiche per la nuova generazione di microformati e per lintegrazione tra HTML5 e RDFa. Ma non tutto, attorno a quello che pu essere definito il nucleo autentico delle specifiche gravitano tutta una serie di altre iniziative, alcune delle quali in avanzato stato di definizione, studiate per: accedere alle informazioni geografiche del device dellutente (posizione, orientamento,); mantenere un database sul device dellutente; generare grafica 3D in tempo reale; E non dimentichiamo che levoluzione dellHTML viaggia di pari passo con quella dei CSS, che si avvicinano alla terza versione, e di altri importanti standard come SVG e MathML, e che ognuno di questi componenti progettato nella sua versione pi recente per recare e ricevere beneficio dagli altri.

Perch dovremmo passare allHTML5?

Il panorama di Internet cambiato molto dallassunzione a W3C Reccomandation della versione precedente delle specifiche, avvenuta verso la fine del 1999. In quel tempo il Web era strettamente legato al concetto di ipertesto e lazione pi comune per lutente era la fruizione di contenuti, tipicamente in forma testuale. La mediamente bassa velocit di connessione e il limitato investimento sul media contribuivano ad una scarsa presenza di applicazioni web, pi care da sviluppare ed esigenti in termini di banda. Tutto questo era ben rappresentato da un linguaggio, HTML, principalmente orientato ad agevolare la stesura di semplici documenti testuali collegati fra loro. Negli anni successivi linteresse intorno alla rete ha subito una brusca accelerazione e questo ha condizionato positivamente sia la diffusione che la velocit di connessione della stessa, attirando di conseguenza maggiori investimenti e ricerca. Al modello di fruizione dei contenuti si aggiunta la possibilit per lutente finale di divenire esso stesso creatore attraverso applicazioni web sempre pi elaborate ed interessanti. Questo nuovo livello di complessit, in termini di sviluppo, ha per dovuto scontrarsi con un set di specifiche poco inclini ad essere utilizzate per tali fini e che quindi si sono prestate al compito solo a scapito di infiniti hack e workaround. Esempi di questi utilizzi non premeditati dellHTML si possono trovare un po ovunque, famoso il caso degli attributi rel e ref che hanno assunto nel tempo valori non previsti, (eg: nofollow) anche esterni alla loro funzione naturale (eg: lutilizzo di questi due attributi in librerie come Lightbox). Parallelamente il percorso di crescita del web ha fatto emergere alcune strutture di contenuto ricorrenti, ben caratterizzate dal fenomeno dei blog: informazioni di testata, menu di navigazione, elenchi di articoli, testo a pie di pagina, ed altri. La parte dedicata al singolo articolo presenta anchessa solitamente lo stesso set di informazioni quali autore, data di pubblicazione, titolo e corpo del messaggio. Anche in questo caso lHTML4 non ha saputo fornire gli strumenti adatti a consentire una corretta gestione e classificazione del contenuto obbligando gli sviluppatori web a ripiegare su strutture anonime, quali <div> e <p>, arricchite di valore semantico con lutilizzo di attributi quali class e id. LHTML5 nasce per risolvere questi problemi offrendo agli sviluppatori web un linguaggio pronto ad essere plasmato secondo le pi recenti necessit, sia dal lato della strutturazione del contenuto che da quello dello sviluppo di vere e proprie applicazioni.

Grandi cambiamenti nellombra

La differenza principale tra le versioni correnti di HTML e XHTML risiede nella sintassi. 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 lappunto, usata nel documento: 1 <!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. LXHTML, invece, una versione della sintassi HTML costretta allinterno delle regole XML, a sua volta grammatica SGML: questo approccio dovrebbe implicare un maggior rigore nella pagina e laderenza a regole quali lobbligo di chiusura di tutti i tag. Il parser XML inoltre dovrebbe sospendere linterpretazione della pagina al primo errore rilevato. Larrivo dellHTML5 introduce una importante novit in questo scenario, per la prima volta lobiettivo delle specifiche quello di definire un linguaggio ubiquo, che possa poi essere implementato su entrambe le sintassi. Loccasione 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: 1 <!DOCTYPE html> Che si affianca a quella da utilizzare in caso si intenda scrivere una pagina XHTML5: 1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> E adesso? Questa lezione aveva lobiettivo di fornire un contesto storico e operativo ai temi dei quali questa guida tratter in modo approfondito. Nelle prossime lezioni affronteremo in sequenza prima la parte legata al markup ed alla gestione della disposizione del contenuto e successivamente le principali API introdotte da queste specifiche. Il viaggio allinterno delluniverso dellHTML5 appena iniziato!

HTML5
LHTML5 un linguaggio di markup per la progettazione delle pagine web attualmente in fase di definizione (bozza) presso il World Wide Web Consortium. La definizione delle specifiche iniziali del linguaggio stata effettuata da un gruppo di lavoro esterno al W3C: il WHATWG. Attualmente i lavori sono seguiti sia dal WHATWG che dal W3C HTML working group. Lintento iniziale che ha guidato il gruppo di lavoro stato quello di proporre nuovi comandi e funzionalit fino ad allora ottenute in maniera non-standard, ossia mediante il ricorso a plug-in o a estensioni proprietarie dei vari browser. Altro obiettivo garantire una buona compatibilit con i browser esistenti, compresi quelli obsoleti o presenti su piattaforme mobili. LHTML5 si propone come evoluzione dellattuale HTML 4.01 ed stato concepito in alternativa allormai fallito XHTML 2. Il World Wide Web Consortium ha annunciato che sar pronto per il luglio 2014. Novit Le novit introdotte dallHTML5 rispetto allHTML 4 sono finalizzate soprattutto a migliorare il disaccoppiamento tra struttura, definita dal markup, caratteristiche di resa (tipo di carattere, colori, eccetera), definite dalle direttive di stile, e contenuti di una pagina web, definiti dal testo vero e proprio. Inoltre lHTML5 prevede il supporto per la memorizzazione locale di grosse quantit di dati scaricati dal browser, per consentire lutilizzo di applicazioni basate su web (come per esempio le caselle di posta di Google o altri servizi analoghi) anche in assenza di collegamento a Internet. In particolare: vengono rese pi stringenti le regole per la strutturazione del testo in capitoli, paragrafi e sezioni; vengono introdotti elementi di controllo per i menu di navigazione; vengono migliorati ed estesi gli elementi di controllo per i moduli elettronici; vengono introdotti elementi specifici per il controllo di contenuti multimediali (tag <video> e <audio>); vengono deprecati o eliminati alcuni elementi che hanno dimostrato scarso o nessun utilizzo effettivo; vengono estesi a tutti i tag una serie di attributi, specialmente quelli finalizzati allaccessibilit, finora previsti solo per alcuni tag; viene supportato Canvas che permette di utilizzare JavaScript per creare animazioni e grafica bitmap; introduzione della geolocalizzazione, dovuta ad una forte espansione di sistemi operativi mobili (quali Android e iOS, tra i pi diffusi); sistema alternativo ai normali cookie, chiamato Web Storage, pi efficiente, il quale consente un notevole risparmio di banda; standardizzazione di programmi JavaScript, chiamati Web Workers e possibilit di utilizzare alcuni siti offline; sostituzione del lungo e complesso doctype, con un semplice <!DOCTYPE html>.

La sintassi di HTML5
Prima di scendere nei dettagli presentando i nuovi elementi e le nuove API definite nella specifica, necessario spendere qualche momento per parlare delle regole sintattiche introdotte dallHTML5, per larga misura ereditate e razionalizzate dalla precedente versione delle specifiche. In primo luogo familiarizziamo con il concetto noto di tag. Esistono tre distinte versioni di questa particella, ognuna di esse si applica selettivamente solo ad alcuni elementi: 1 2 3 4 5 6 7 8 Tag classico <p> bla bla bla bla ... </p> Tag vuoto <img src="immagine_interessante.jpg" alt="Una immagine interessante"> Tag autochiudente <rect x="150" y="40" width="60" height="30" fill="black" 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, cui accenneremo nel seguito della lezione, 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: 1 <img src="immagine.png" alt="testo" /> O seguendo la vecchie regole di HTML 4: 1 <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 luso 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: 1 <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 dellelemento. 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: 1 2 3 4 5 6 <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 nellesempio, anche i tag p e li possono essere scritti omettendo la particella di chiusura, a patto che lelemento successivo sia allinterno 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, dellelemento html; esso infatti dichiarato implicitamente ed inserito a runtime dallo user-agent. Per un quadro dettagliato rimandiamo a questa sezione delle specifiche.

Attributi
Anche rispetto alle definizione degli attributi HTML5 consente una libert maggiore rispetto a XHTML, segnando di fatto un ritorno alla filosofia di HTML 4. In sintesi: non pi obbligatorio racchiudere i valori degli attributi tra virgolette. I casi previsti nella specifica sono 4. Attributi vuoti: non necessario definire un valore per lattributo, basta il nome, il valore si ricava implicitamente dalla stringa vuota. Un caso da manuale: 1 2 3 4 5 Secondo le regole XHTML: <input checked="checked" /> In HTML5: <input checked> Attributi senza virgolette: perfettamente lecito in HTML5 definire un attributo senza racchiudere il valore tra virgolette. Esempio: 1 <div class=testata> Attributi con apostrofo: il valore di un attributo pu essere racchiuso tra due apostrofi (termine pi corretto rispetto a virgoletta singola). Esempio: 1 <div class='testata'> Attributi con virgolette: per concludere, possibile usare la sintassi che prevede luso delle virgolette per racchiudere il valore di un attributo. Il codice: 1 <div class="testata"> Semplificazioni In direzione della semplificazione vanno anche altre indicazioni. Ci soffermiamo su quelle riguardanti due elementi fondamentali come style e script. La sintassi tipica di XHTML prevede la specificazione di attributi accessori come type: 1 2 3 <style type="text/css"> regole CSS... </style> <script type="text/javascript" src="script.js"> </script> In HTML5 possiamo farne a meno, scrivendo dunque: 1 2 <style> regole CSS... </style> <script src="script.js"> </script> Conclusioni Come abbiamo sperimentato, la sintassi HTML5 si caratterizza per una spiccata flessibilit e semplicit di implementazione. Le osservazioni che abbiamo snocciolato in questa lezione sono chiaramente valide a patto di implementare la serializzazione HTML; ricordiamo infatti che le specifiche prevedono anche lutilizzo di una sintassi XML attraverso luso delle istruzioni: 1 2 <!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 allutilizzo di elementi impliciti, scrivendo sempre tutti i tag necessari nella loro forma completa.

Nuovi elementi di HTML5 Internet cambiato molto da quando HTML 4.01 diventato uno standard nel 1999. Oggi, alcuni elementi HTML 4.01 sono obsoleti, non ha mai usato o non usato il modo in cui sono stati destinati a. Questi elementi vengono rimossi o ri-scritto in HTML5. Per gestire meglio lutilizzo di Internet oggi, HTML5 include nuovi elementi per una migliore struttura, il trattamento migliore forma, disegno e per i contenuti multimediali. Nuovi elementi semantici / Strutturale HTML5 offre nuovi elementi per una migliore struttura: Etichetta Descrizione <article> Definisce un articolo <aside> Definisce i contenuti a parte il contenuto della pagina <bdi> Isola una parte di testo che potrebbe essere formattato in una direzione diversa dal resto del testo fuori <comando> Definisce un pulsante di comando che un utente pu invocare <dettagli> Definisce i dettagli aggiuntivi che lutente pu visualizzare o nascondere <summary> Definisce un titolo visibile per un elemento <dettagli> <figure> Specifica self-contained contenuto, come illustrazioni, diagrammi, fotografie, elenchi di codici, ecc <figcaption> Definisce una didascalia per un elemento <figure> <footer> Definisce un pi di pagina per un documento o una sezione <header> Definisce un header per un documento o una sezione <hgroup> Raggruppa un insieme di <h1> agli elementi <h6> quando un titolo ha pi livelli <mark> Definisce testo contrassegnato / evidenziato <meter> Definisce una misura scalare allinterno di un intervallo noto (un indicatore) <nav> Definisce collegamenti di spostamento <progress> Rappresenta il progresso di un compito <ruby> Definisce una annotazione rubino (per la tipografia dellAsia orientale) <rt> Definisce una spiegazione / pronuncia dei caratteri (per la tipografia dellAsia orientale) <rp> Definisce cosa mostrare nel browser che non supportano annotazioni rubino <section> Definisce una sezione in un documento <time> Definisce una data / ora <wbr> Definisce una possibile linea-break Elementi rimossi I seguenti elementi HTML 4.01 vengono rimossi dal HTML5: <acronym> <APPLET> <basefont> <big> <center> <dir> <font> <frame> <frameset> <NOFRAMES> <strike> <tt>

Progettare e pubblicare un sito web professionale e bella HTML gratis! Godetevi il controllo totale di design, funzionalit e-commerce e superiori i risultati dei motori di ricerca, risparmiando un sacco di soldi.