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

06_12_01

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 https://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 https://www.w3.org/TR/html5/;

Le novità introdotte

06_12_02

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

06_12_03

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

06_12_04

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

Tag: ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

  • HTML5 si può usare per i siti accessibili?

    Premessa: questo articolo è rivolto unicamente a chi avrà a che fare con la Pubblica Amministrazione nei prossimi mesi, speriamo non anni, in cui...

  • Guida CSS3: introduzione e selettori

    Benvenuto! Quest’oggi inauguriamo un nuovo filone di articoli che andrà, progressivamente, a formare un’esaustiva guida ai CSS3. Poiché in...

  • Guida HTML5: Web storage

    Durante lo scorso articolo abbiamo definitivamente chiuso la sezione dedicata al Canvas. Oggi passiamo, quindi, a occuparci di un’altra fondamentale...

32 commenti

Trackback e pingback

  1. Guida HTML5: la prima pagina | Your Inspiration Web
    […] Guida HTML5: introduzione […]
  2. Guida HTML5: il canvas – parte 1 | Your Inspiration Web
    […] Guida HTML5: introduzione […]
  3. 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…
  4. 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…
  5. 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…
  6. 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…
  7. 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…
  8. 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…
  9. 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…
  10. 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…
  11. 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…
  12. 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…
  13. 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…
  14. 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…
  15. 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…