3 febbraio 2012 
Simone Cardini 
Questo articolo è stato visualizzato 411 volte!
L’HTML5 è un linguaggio di markup per la progettazione delle pagine web attualmente in fase di definizione presso il World Wide Web Consortium, la cui definizione delle specifiche iniziali è stata effettuata da un gruppo di lavoro esterno al W3C: il WHATWG.
E la quinta revisione dello standard HTML (creato nel 1990 e standardizzato come HTML4 come del 1997) e ad oggi, sebbene in molti abbiamo già iniziato ad usarlo, è ancora in fase di completamento. Il rilascio effettivo è previsto per il 2014. L’HTML 5, inoltre sostituirà tutti i suoi predecessori, compresi HTML 4 e XHTML 1 e 2.
L’intento iniziale che ha guidato il gruppo di lavoro è stato quello di proporre nuovi comandi e funzionalità fino ad allora ottenute in maniera non-standard, mediante il ricorso a plug-in o a estensioni proprietarie dei vari browser.
E’ quindi il primo vero tentativo di definire un unico linguaggio di markup e comprende modelli di elaborazione dettagliati per favorire le implementazioni più interoperabili; si estende, migliora e razionalizza il markup disponibile per i documenti, e introduce markup e Application Programming Interface (API) per le applicazioni web complesse Per le stesse ragioni, HTML5 è il miglior candidato per applicazioni cross-platform mobile.
Un’applicazione, un servizio o semplicemente un sito, sviluppati in HTML5 verranno, quindi, visualizzati senza problemi da tutti i browser, compresi quelli più obsoleti, ma soprattutto da quelli presenti sui dispositivi mobili.
Novità
Proprio per venire incontro al mondo dei dispositivi mobile, molte caratteristiche di HTML5 sono state costruite per essere in grado di girare su dispositivi a bassa potenza, quali smartphone e tablet.
L’HTML5, inoltre, prevede il supporto per la memorizzazione locale di grosse quantità di dati scaricati dal browser, per consentire l’utilizzo di applicazioni basate su web anche in assenza di collegamento a Internet.
Altre interessanti novità, sono la rimozione di tag obsoleti o mai effettivamente utilizzati e l’introduzione di nuovi tag per la gestione di elementi audio e video, nonchè delle immagini vettoriali (SVG).
Ma vediamole più 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 all’accessibilità, 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>.
Struttura
In HTML4 siamo stati abituati a scrivere una pagina web utilizzando la seguente sintassi di codice:
In HTML5, invece, sono stati introdotti nuovi elementi, che hanno l’obiettivo di rendere più semantico e significativo la struttura della pagina web.
Il primo colpo d’occhio vi porterà a pensare che i famosi <div> siano stati sostituiti con questi nuovi tag, invece capirete mettendo le mani sul codice di riuscire ad ottimizzare la struttura in modo semplice e molto più chiaro.
Come vediamo dalla struttura qui in alto sono stati sostituiti i tag di HTML4 in altri più semantici e validi.
E’ stato sostituito da HTML4 a HTML5:
<div id=”header”>in<header><div id=”sidebar”>in<aside><div id=”main_content”>in<section><div id=”footer”>in<footer>
I Principali Elementi HTML5
Elemento <!doctype html>
Rappresenta la dichiarazione della pagina molto semplificata rispetto all’HTML4 che precede qualsiasi elemento del documento.
Elemento <header>
Rappresenta una sezione della pagina in cui inserire la testata del sito web, qui possiamo inserire un logo o un motto.
Elemento <nav>
Rappresenta una parte della pagina che contiene i link di navigazione del sito, quindi qui inseriremo i menu di navigazione.
Elemento <section>
Rappresenta un’area in cui inserire del contenuto generico.
Elemento <article>
Rappresenta una sezione della pagine indipendente, quindi riferita ad articoli
Elemento <aside>
Rappresenta una sezione della pagina collegata al sito e non obbligatoriamente al contenuto. In questa sezione possiamo riconoscere le famose sidebar di un blog.
Elemento <footer>
Rappresenta la sezione conclusiva del sito in cui inserire alcune informazioni del sito.
Ovviamente occorre ricordarsi che anche i tag HTML 5 si chiudo in </> quindi ad esempio <header> …. </header> oppure <aside> …. </aside>
Vi riportiamo, ora, un breve esempio che potete salvare in un file HTML e far eseguire dal vostro browser per verificarne il funzionamento:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
<header>
<h1>USIAMO HTML5</h1>
</header>
<nav>
<ul>
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
<li><a href="#">NAV3</a></li>
<li><a href="#">NAV4</a></li>
</ul>
</nav>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Vi lasciamo, infine, con uno screenshot del test di compatibilità con l’HTML 5 effettuato sul sito http://html5test.com/. Il sito controlla la compatibilità del browser con tutte le nuove funzionalità introdotte e alla finse restituisce un punteggio. Il test è stato effettuato con Internet Explorer e Mozilla Firefox.
Inserito in 
Tags: 