Introduzione a HTML 5: i nuovi concetti del web design

Qualunque web designer che si tenga un minimo aggiornato sulle nuove tecnologie avrà sentito parlare di HTML 5.

La nuova versione dello standard HTML mira a cambiare in maniera radicale i metodi di sviluppo sul web.

Iniziamo quindi oggi una nuova serie di articoli che introduce tutti questi cambiamenti.

Un libro di riferimento

Come ci è capitato spesso su questo blog, useremo un libro come scaletta per affrontare i vari argomenti collegati a questa tecnologia.

Il libro in questione è HTML 5 for Masterminds di J.D.Gauchat, disponibile su questo sito.

Ovviamente non ci limiteremo a quanto esposto nel libro, ma aggiungeremo argomenti personalizzati provenienti da altre fonti o dalla nostra esperienza diretta.

Non solo HTML

Per comodità si parla semplicemente di “HTML 5” ma le innovazioni sono più ampie.

Questa versione dello standard HTML è infatti strettamente correlata all’utilizzo dei fogli di stile (CSS) e al JavaScript.

Possiamo dire che è la prima versione in cui viene data per scontata la presenza di queste tecnologie complementari.

Quindi da ora in poi ricordiamoci che la vera rivoluzione è prodotta dalla combinazione HTML 5 + CSS 3 + JavaScript.

HTML vs. XHTML

Lo standard HTML 5 è per certi versi un ritorno al passato.

Dopo HTML 4, infatti, ci si era spostati verso un nuovo standard denominato XHTML 1.

XHTML, rispetto al suo predecessore, dava massima rilevanza alla correttezza formale del codice e alla sua generalizzazione, riavvicinandolo allo standard XML da cui proviene.

Sia chiaro: questo ha portato a un evidente miglioramento della qualità del codice delle pagine web e in tal senso la sua esistenza è stata una benedizione.

Tuttavia, qualcuno segnalava la mancanza di “personalità semantica”: ovvero, gli elementi disponibili non erano abbastanza esplicativi rispetto al proprio contenuto.

In altre parole, si usavano DIV per qualsiasi cosa, lasciando agli ID e alle CLASSI il compito di identificarne il senso nella pagina.

Personalmente, non ci sembrava una soluzione particolarmente negativa, ma qualcuno l’ha pensata diversamente… per cui XHTML 2 non è mai comparso e al suo posto ecco HTML 5.

Una nuova semantica per le pagine

Lo scopo principale di un documento HTML è semantico, ovvero di identificare chiaramente il significato di ciascun elemento, ovvero il ruolo di ciascun elemento nella pagina.

H1 è il titolo principale del documento. P è un paragrafo. LI è un elemento di una lista.

HTML 5 riprende ed espande questo concetto inserendo nuovi tag per gli elementi che sono presenti in maniera ormai abituali in qualsiasi pagina web.

Alcuni esempi veloci:

  • le colonne destra o sinistra non saranno più elementi DIV con classe “sidebar”, “left” o “right”, ma saranno invece degli elementi ASIDE
  • il menù principale non sarà più in una DIV con classe “menu” o “navigation”, ma sarà invece in un elemento NAV
  • l’articolo principale non sarà più una DIV con classe “article”, ma sarà invece un elemento ARTICLE

Capito il concetto?

Browser

Prima di addentrarci ulteriormente nei dettagli di come scrivere una pagina in HTML 5, parliamo di browser.

Infatti, è perfettamente inutile usare gli standard più aggiornati se poi la maggior parte dei browser non li supportano.

La buona notizia è che le ultime versioni di tutti i browser supportano HTML 5 e CSS 3.

In altre parole, non esiste nessun browser (perlomeno tra quelli più noti) che debba ancora aggiornarsi al nuovo standard.

Ovviamente, non tutti gli utenti usano le ultime versioni. Per cui vediamo esattamente le versioni da cui i browser sono compatibili:

  • Internet Explorer 9+
  • Firefox 7+
  • Safari 5+
  • Chrome 14+
  • Opera 11+
  • Mobile Safari 3.2+
  • Opera Mobile 5+
  • Android 2.1+

(lista reperita dall’articolo Getting to Grips with HTML5 Browser Compatibility)

Una nota importante su questa tabelle.

Le novità introdotte dal nuovo standard sono molte. La lista riportata sopra indica una compatibilità completa, ma alcune delle innovazioni sono già disponibili anche nei browser più vecchi. 

In particolare il browser Chrome di Google è stato quello che si è portato più avanti con il supporto completo.

Vedi anche il sito html5readiness.com.

La prossima volta portate un editor

Dopo questa doverosa panoramica, dal prossimo articolo proveremo a scrivere del codice HTML 5 per assaporare direttamente le novità.

css, html, mobile, programmatore, webdesigner