Benvenuti su questa guida dedicata a HTML 5. Come sempre nessuna pretesa, vuole semplicemente essere una guida di aiuto con basi introduttive, qualcosa che illustri questo metalinguaggio che si è evoluto fino a raggiungere la versione 5 che di fatto sta rivoluzionando il web.
Come si potrà notare non è un argomento semplice neppure per chi già conosce html nelle sue precedenti versioni e questo perchè l’uso di HTML5, a differenza delle versioni precedenti, esige il rispetto di regole che sono decisamente più rigide di quelle usate in precedenza, oltre a browsers (i programmi che servono per navigare in rete) moderni che lo supportino completamente.
Al momento HTML5 non è ancora uno standard ufficialmente approvato dal W3C ma a quanto pare si tratta solo di tempo perchè sembra essere imminente questa ufficialità da parte dell’organo competente.
HTML5 introduce molte nuove istruzioni che con la loro semantica rendono un documento web correttamente leggibile, e quindi perfettamente interpretabile, da altri sistemi. Non era per niente facile creare qualcosa di innovativo tenuto conto che html viene letto e fatto funzionare dai soli browser, e tutti conosciamo le differenza fra un browser e l’altro. IE per esempio, di allinearsi proprio non ne vuol sapere e personalmente non capisco le ragioni. Fortuna però che esistono browser altrettanto gratuiti e decisamente più efficienti come FireFox, Chrome, Opera e molti altri.
A questo proposito ne approfitto per ricordare che bisognerebbe sempre usare l’ultimissima versione del proprio browser preferito, è gratuito ed oltre ad interpretare correttamente le più recenti tecniche di programmazione vi garantisce maggior sicurezza per quanto riguarda la difesa del vostro sistema operativo, qualunque esso sia, motivo più che valido per abbandonare browser obsoleti usati solo per la pigrizia di doverli aggiornare.
Vediamo se il browser che adoperate è in grado di supportare le maggiori novità introdotte da HTML5:
Si il tuo browser supporta canvas e si possono disegnare forme.
Si sul tuo browser si possono vedere i filmati video.
Si sul tuo browser si possono memorizzare dati.
Si dal tuo browser si può capire dove si trova.
Si il tuo browser supporta la navigazione off line.
Questo test è stato possibile grazie ad una libreria javascript che si chiama modernizr.js e che è possibile scaricare dal sito modernizr.com grazie alle funzioni di questa libreria è possibile ottenere ottimi risultati usando HTML5 anche su browser che non lo supporterebbero nativamente. La libreria infatti crea nuovi oggetti col nome dei nuovi tags per renderli gestibili via script anche da browser che non riconoscono i nuovi tag di html5. Per esempio IE8, che non è poi nemmeno tanto vecchio, non supporta gran parte dei comandi HTML5.
Mi rendo conto che questo argomento sia piuttosto complesso, mi limito a dire che conviene scaricare questa libreria e richiamarla da ogni pagina, aumenterà la possibilità che il codice usato con html5 possa essere interpretato al meglio sul maggior numero di browser possibile, persino su quelli targati IE. Come dicevo sopra, considerate questa guida come un’introduzione all’argomento, se siete interessati ad approfondire, la cosa migliore resta quella di recarsi in libreria ed affidarsi alla letteratura specializzata.
Volendo contribuire è possibile scaricare la guida anche in formato PDF e/o E-Book per poterla stampare su carta o consultare a video comodamente off-line, cioè scollegati dalla rete, per farlo è sufficiente cliccare su questo link: Scarica Guida HTML5 
Attenzione! eventuali ultime modifiche potrebbero non essere state ancora inserite in questa versione, (priorità alle versioni off-line), questa viene infatti aggiornata ad intervalli prestabiliti o quando ci siano modifiche di una certa importanza. Sono gradite segnalazioni, commenti e qualsiasi altra cosa ritenuta utile al fine di migliorare il lavoro che sarà sempre e solo a beneficio di tutti quanti voi.
HTML5 (Hyper Text Markup Language) è formato da definizioni, elementi (tags), questi impartiscono al browser (il programma usato per la navigazione) delle direttive ben precise al fine di ottenere il risultato a video, una sorta di interpretazione che varia a volte a seconda del tipo di browser adoperato. Si tratta dunque di conoscere il significato dei vari elementi e come questi possono essere combinati fra loro per avere la padronanza del linguaggio.
Per la stesura di questo metalinguaggio si fa uso di un normale editor per testi, meglio se un editor specifico per HTML, cominciamo proprio da qui, cliccando su questo link sarà possibile scaricarne uno gratuitamente dalla rete.
Cosa è un editor e cosa è il codice html?
No, non fatemi ripetere sempre le stesse cose, praticamente ho già detto e ripetuto tutto nelle altre guide, se siete a digiuno di html vi consiglio di iniziare da Primi Passi in html con Style per poi tornare su questa guida soltanto dopo che avrete le idee chiare su questo argomento.
Su questa guida mi limiterò a delle riflessioni, illustrando alcune delle novità introdotte da HTML5 dando per scontato che chi legge sia in grado di gestire, almeno a livello intermedio, sia il codice HTML che i fogli di style CSS per i quali esiste una guida consultabile su questo link: Guida CSS
Ogni volta che ci saranno esempi di codice li troverete all’interno di box colorati come questi sotto, per facilitarne la comprensione useremo box a sfondo giallo per quello che riguarda il codice HTML, box a sfondo verde per quello che riguarda il codice CSS, box a sfondo marrone chiaro per javascript e box a sfondo grigio per i risultati di esempi prodotti dal codice html, css e javascript.
codice HTML
codice CSS
codice JavaScript
risultato degli esempi
Immagini di esempio catturate dal browser
Non mi resta che augurarvi buona lettura. e passare alla Struttura Base
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.