Lo standard HTM5 si sta affermando con una grande velocità rispetto ai nuovi rilasci del passato, questo non solo perchè il nuovo standard aggiunge dei componenti che possono essere utilizzati sui dispositivi mobili ed altro ma anche perchè i grandi colossi come Google, Apple ect stanno spingendo in maniera decisa su questa direzione. Ma cosa cambia nel concreto ? Le differenze sono molte per essere elencate in un solo articolo, quindi cercherò di focalizzare l’attenzione solo su alcuni aspetti che ritengo più importanti e significativi.

Se programmate in HTML saprete benissimo che ogni <code> usato rappresenta un porzione di layout del nostro sito che può avere caratteristiche di block, inline essere float, fisso, relativo e tutta una serie di considerazione che sono legate al tipo di layout che vogliamo utilizzare. Questo aspetto è utilissimo per il programmatore web ma in realtà non identifica le sezioni del nostro sito esattamente per la funzione che queste svolgono, ad esempio utilizziamo lo stesso codice <div> sia per identicare la parte header dove ad esempio metteremo il nostro logo che la parte footer dove potremmo specificare i contatti e alcuni link, ovviamente per dare un senso semantico al nostro codice usiamo gli attributi “id” e “class” dando dei nomi significativi per noi, ad esempio potremmo identicare il primo come <div id=”header”> e il secondo come <div id=”footer”>, ma in realtà questo essendo di libero arbitrio può essere utile per noi stessi, ma un elemento terzo come un motore di ricerca non potrebbe capire da questi nomi la funzione specifica di quella parte specifica di layout. Proprio su questo aspetto HTML5 è differente, infatti in questo standard troveremo dei <codici> che identificano la porzione di layout in modo semantico e quindi potremmo ad esempio usare <header> e <footer> invece che i <div> utilizzati prima, vi riporto qui di seguito un’esempio per capire meglio questo concetto:

Video: Un’altra grande novità introdotta da HTML5 è il tag <video> che porterà (sempre battaglie di browser e poteri vari permettendo), ad un’integrazione più semplice senza bisogno di componenti aggiuntivi come flash. Questo a vantaggio di maggiori performance, compatibilità tra vari browsers e sistemi operativi, si otterrà un’integrazione semplificata per quanto riguarda il layout grafico che potrà essere conforme con la struttura grafica del nostro sito web. L’unico problema presente ad oggi sperando che sia risolto in futuro è che non tutti i browsers leggono gli stessi formati video quindi bisogna prevedere per un video che dobbiamo pubblicare la conversione in differenti formati che il browser automaticamente selezionerà in base alla sua compatibilità. Se volete vedere lo standard video compatibile con uno specifico browser guardate  la pagina wikipedia HTLM5 Video. Qui di seguito un esempio di codice HTML5:

<video autoplay="autoplay" controls="controls">
  <source src="video.mp4">
  <source src="video.ogg">
</video>

Se volete vedere un’elenco di alcuni framework javascipt che facilitano l’integrazione di player nella vostra pagina HTML5 vedete: Video HTML5 elenco di alcuni pacchetti javascript.

Form per inserimento dati: I campi dei form definiti con il valore generico <input> hanno sempre dato molti problemi ai programmatori che dovevano scrivere degli script personalizzati per controllare l’immisione di solo numeri invece che caratteri, controllare campi particolari come indirizzo email e numero telefonico ed altro ancora. HTML5 cerca di risolvere in parte questo problema inserendo valori come email, number, range, search, placeholder, autofocus, require, min, max, etc. Vedete la tabella dei codici form e la compatibilità dei browser.

Canvas HTML5: Anche questa caratteristica risulta molto interessante, infatti possiamo definire un’area ben precisa della nostra pagina web dove potremmo effettuare dei disegni tramite javascript, troverete in internet molte librerie già pronte per disegnare grafici, forme geometrice e tanto altro. Tramite canvas è possibile disegnare in 2D o 3D e creare animazioni molto complesse, sicuramente questa tecnica sostituirà nel futuro molte applicazioni flash. Vi consiglio di dare un’occhiata a questo Canvas Tutorial HTML5 in inglese ma di facile comprensione. Se cliccate sull’immagine seguente potete vedere alcuni esempi di grafici: