Guida HTML5: introduzione
In questo primo articolo della guida dedicata all’HTML5, delineeremo il contesto storico nel quale nasce il linguaggio, differenziando i vari standard, elencando le maggiori novità introdotte e analizzando i principi che regolano l’adozione delle nuove regole.
Questa guida è adatta sia a chi possiede una conoscenza, approssimativa o approfondita che sia, dell’HTML 4.01 o dell’XHTML, sia a chi è completamente a digiuno sull’argomento e vuole iniziare a sviluppare pagine che siano moderne, fluide e al passo con i tempi.
Alcuni termini potranno risultare ostici agli avventori ma, quando le lezioni saranno incentrate sulla pratica, anche la teoria acquisterà il suo naturale e fondamentale senso. Iniziamo!
Lo standard HTML5
L’avventura dell’HTML5 inizia nel 2004 quando un gruppo di sviluppatori appartenenti alle più note multinazionali (Apple, Opera Software, Mozilla Foundation e successivamente Google) si riunirono nel Web Hypertext Application Technology Working Group, o più semplicemente WHATWG.
L’intento di questo gruppo fu quello di contrapporsi al W3C che aveva, fino a quel momento, dettato gli standard del web e che aveva incoronato l’XHTML2 come vero ed unico successore dell’XHTML.
Le principali critiche mosse dalla comnità di sviluppartori nei confronti dell’XHTML2 riguardavano l’obbligo, da parte dei web developer, di far riferimento ad un nuovo rigido standard privo di nuove funzionalità e, parallelamente, non retrocompatibile.
Finalmente, dopo tre anni di scontri tra idee contrastanti, il W3C riconobbe valide le obiezioni del WHATWG e decise di accantonare definitivamente l’XHTML2 per lavorare, di comune accordo, allo sviluppo di uno standard HTML5.
Ma l’accordo, in questo caso, non era destinato a durare: nel 2012 le loro strade si divisero nuovamente, generando due grandi e distinti filoni dell’HTML5:
- la versione living language del WHATWG, ovvero quella in continua evoluzione. Nuove funzioni e nuovi elementi vengono continuamente aggiunte alle pagine HTML, che non necessitano di un numero di versione e che non rischieranno mai di divenire obsolete. Se volete conoscere l’attuale stato di avanzamento e le ultime novità di questa versione potete consultare il sito http://whatwg.org/html;
- la versione standardizzata del W3C, ovvero quella che rifinisce e lima la living language fino a comporre uno standard. Il World Wide Web Consortium ha annunciato che la prima, ufficiale, versione dello standard sarà pronta per fine 2014. Nel frattempo potete fare riferimento alla Candidate Recommendation pubblicata all’indirizzo http://www.w3.org/TR/html5/;
Le novità introdotte
Le novità introdotte dall’HTML5 possono essere divise in due significativi gruppi:
- le novità del markup – che comprendono tutti gli elementi aggiunti, a completezza del poco chiaro <div>, per definire tutti le parti del layout di un moderno sito web. Tra questi, elementi strutturali quali <header>, <footer>, <section>, <nav>, <article> ed elementi “multimediali” come <audio> e <video>. È stato anche introdotto l’outline, ovvero l’algoritmo che struttura gerarchicamente una pagina come se fosse l’indice di un libro diviso in capitoli. Per finire anche i più piccoli dei dati trovano spazio in significativi tag come <time> e <address>.
- le novità API – le interfacce con cui l’utente interagiva, finalmente, non vengono più ignorate anzi, oltre ad essere documentate, vengono arricchite da: canvas, drag-n-drop, applicazioni offline, geolocalizzazione.
I 3 principi chiave dell’HTML5
L’HTML5 è, ed è stato, sviluppato seguendo alcune chiare linee guida:
- don’t break the web – ovvero nessuna nuova regola deve interferire con il corretto funzionamento di una pagina sviluppata in precedenza. Questo principio si discosta completamente da quello dell’XTHML2 che, contrariamente, imponeva un immediato e drammatico cambiamento nello scrivere codice. La filosofia dell’HTML5 è differente: tutto ciò che era valido in HTML 4.01 è valido in HTML5;
- pave the cowpaths – ovvero è preferibile introdurre le sperimentazioni già adottate con successo dalla maggioranza degli utenti, piuttosto che proibire o inventare nuove funzionalità;
- be pratical – ovvero le modifiche devono avere un riscontro pratico: devono nascere da un’esigenza degli utenti/sviluppatori e devo produrre un miglioramento significativo;
Gli strumenti
Ora, prima di procedere, di che strumenti necessitiamo per poter scrivere e visualizzare codice HTML5? L’HTML5, proprio come i suoi predecessori, può essere sviluppato tramite due categorie di software dall’ampia gamma:
- text editor: dai semplici Notepad (Windows) e Textedit (Mac OS) integrati nel sistema operativo, ai più specifici SublimeText (Windows & Mac OS) e TextMate (Mac);
- design tools: come Adobe Dreamweaver (Windows & Mac OS) e Microsoft Expression Web (Windows);
Per visualizzare correttamente le pagine che andremo a creare possiamo utilizzare qualsiasi browser di ultima generazione. Tra essi vi sono: Microsoft Internet Explorer 9, Mozilla Firefox 3.5, Google Chrome 8, Safari 4, Opera 10.5. Ovviamente nel corso di questa guida ci occuperemo anche di rendere compatibili le nostre creazioni con browsers più datati, tramite collaudati escamotage.
Conclusione
Capire le dinamiche fino a qui descritte è, anche se può non sembrarlo, assolutamente necessario. Capire che l’HTML5 è un linguaggio vivo, in continuo movimento, ci permette di entrare nella giusta filosofia di sviluppo. Così facendo, eviteremo di restare impigliati in obsolete rigidità pur mantenendo un elevato grado di compatibilità con i supporti meno recenti.
Nel corso del prossimo articolo ci occuperemo di capire qual è l’attuale stato di compatibilità tra l’HTML5 e i differenti browser. In particolare, vedremo come aggirare alcune restirizioni imposte da Microsoft Internet Explorer che, solo dalla versione 9, è in grado di visualizzare correttamente pagine HTML5.
Inoltre creeremo la nostra prima pagina in HTML5, focalizzandoci su: definire il doctype, il linguaggio e il charset, collegare fogli di stile e javascript.
Indice della guida HTML5
GUIDA HTML5: GLI ARTICOLI
1) Guida HTML5:Introduzione
2) Guida HTML5: la prima pagina
3) Guida HTML5: la struttura
4) Guida HTML5: Immagini e outlines
5) Guida HTML5: nuovi elementi semantici
6) Guida HTML5: i form – Parte 1
7) Guida HTML5: i form – Parte 2
8) Guida HTML5: i form – Parte 3
9) Guida HTML5: i form – Parte 4
10) Guida HTML5:i tag audio e video – parte 1
11) Guida HTML5:i tag audio e video – parte 2
12) Guida HTML5: I player video
13) HTML5: Il Canvas – Parte 1
14) Guida HTML5: Il Canvas – Parte 2
15) HTML5: Il Canvas – Parte 3
16) HTML5: Il Canvas – Parte 4
17) HTML5: Web storage
18) Web worker
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
32 commenti
Trackback e pingback
-
Guida HTML5: la prima pagina | Your Inspiration Web
[…] Guida HTML5: introduzione […] -
Guida HTML5: il canvas – parte 1 | Your Inspiration Web
[…] Guida HTML5: introduzione […] -
Guida HTML5: nuovi elementi semantici | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) HTML5: Il canvas – Parte 1 3) Guida HTML5: la prima pagina… -
Guida HTML5 – immagini & outlines | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) HTML5: Il canvas – Parte 1 3) Guida HTML5: la prima pagina… -
Guida HTML5: la struttura | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) HTML5: Il canvas – Parte 1 3) Guida HTML5: la prima pagina… -
Guida HTML5: i form – parte 1 | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida… -
Guida HTML5: I form – parte 2 | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida… -
Guida HTML5: i form – parte 3 | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines… -
Guida HTML5: i form – parte 4 | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines… -
Guida HTML5: i tag audio e video – parte 2 | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines… -
Guida HTML5: i tag audio e video (parte1) | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines… -
Guida HTML5 : i player video | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines… -
Guida HTML5: il canvas – parte 2 | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines… -
Guida HTML5: il Canvas – Parte 3 | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines… -
Guida HTML5: il Canvas – Parte 4 | Your Inspiration Web
[…] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines…
Grazie mille, aspetto impaziente, la seconda puntata! :)
Grazie a te per averlo letto Mario.
La seconda arriverà molto presto!
Articolo interessante, aspetto anche io per la seconda puntata e quelle a seguire. Volevo far notare una cosa, che non c’entra molto con l’articolo, Sublime Text esiste anche per linux e si può installare da ppa così da avere sempre anche gli aggiornamenti:
sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer
Nel caso specifico si installa su Ubuntu, valida alternativa a Windows e Mac
Grazie per il contributo Alessandro.
Trovo che Sublime Text sia un ottimo strumento e mi fa piacere sapere che è disponibile anche per Linux!
Ottimo inizio, in attesa del seguito….
Grazie Vilson!
Straordinari come al solito!
Era un argomento che non poteva mancare all’appello per un blog come YIW.
Ottima introduzione, tutti impazienti di leggere i prossimi capitoli.
Grazie Gianfranco,
hai ragione l’HTML5 è un’arma che non può mancare nelle skills di un web designer!
Spero continuerai a seguire la guida.
Perfetto!! non manchero’ agli appuntamenti, e’ quello che cerco. Grazie Luca :)
Grazie a te, Carmen.
Oh, ma che bello :)
Non vedo l’ora degli altri articoli!
Grazie,
molto presto avrai modo di leggere il secondo!
Complimenti Luca per questa guida all’Html5, ho appena finito di leggere tutti i 14 articoli! Avrei intenzione di acquistare un libro per studiare da zero questo argomento (tieni conto che ho solo un’infarinatura di Html4 e Css3, no Php o Javascript). Ho trovato questo: “HTML5 e CSS3. Per il World Wide Web” cosa ne pensi? Qualunque suggerimento è ben accetto!
P.S. Perchè quando cerco di accedere al tuo sito vengo ridirezionato su un’altro che parla di Borse Louis Vuitton 2015?
Ciao Marco, grazie per i complimenti! :)
Purtroppo non conosco libri che mi sentirei di consigliare poiché ciò che ho appreso tempo fa sull’argomento deriva da una serie di documenti free sparsi per la rete. Il fatto che tu conosca sommariamente l’HTML4 è di sicuro un aiuto anche se, come avrai visto, per sfruttare appieno certe nuove funzionalità JavaScript è sicuramente utile!
P.S. il dominio lucapipolo.it non è più in mio possesso da un bel po’ di tempo ormai. Non so perché il nuovo proprietario abbia deciso proprio per le borse Vuitton! :)
Ciao. Grande guida, anche per chi è all’inizio come me.
Ho visto che oggi è partita anche la guida ai CSS 3. Questo significa che quella dell’HTML è conclusa?
Grazie
Grazie Mirkos! :)
Sì, la guida HTML5 è da considerarsi sostanzialmente terminata. Tuttavia possibili future implementazioni non sono del tutto escluse. Possibile che, durante la stesura dei futuri articoli riguardanti il CSS3, mi vengano in mente altri temi interessanti da trattare in capitoli separati.
Really very nice. I read it all. Thanks for such beautiful article