Il grafico tratteggia le principali novità e tutte le caratteristiche del nuovo standard, mettendo anche a confronto i maggiori browser per verificare quali tra essi sia già pronti per affrontare la rivoluzione.

Articoli correlati:

1. HTML5: tag nuovi e anteprima delle novità
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!

La compatibilità con i browser sembra non essere più un grosso problema, da quando hanno iniziato a circolare risorse come Modernizr, ExplorerCanvas o IE7.js, per "modernizzare" i browser non compatibili con le nuove tecnologie, oppure per attivare i tag HTML5 su tutti i browser.

Dopo aver dato una occhiata alle maggiori novità di HTML5, e dopo aver dato uno sguardo alle tecniche per utilizzare già oggi i CSS3, ecco più di 10 template HTML5-CSS3 tutti da testare, con cui iniziare a progettare per il web di domani. Se li hai gà testati, dimmi cosa ne pensi nei commenti in fondo al post!

HTML5 Starter Pack

HTML5 Starter Kit è un template che non costringe a costruire un particolare tipo di sito web, ma si adatta a seconda delle esigenze.
Ecco le sue caratteristiche: gratuito, HTML5 cross-browser (compreso IE6), possibilità di utilizzare immediatamente Cufón @font-face, disponibilità di alcune classi strutturali riutilizzabili.
Infine, viene offerto il file .PSD per aggiornare il layout.

Gotta’ love HTML5 & CSS3

Template per le gallerie di immagini, sviluppato con HTML5-CSS3, che comprende:
transizioni animate (come l'hover animato per la descrizione delle immagini) e un’interfaccia a schede per diverse gallerie con CSS3 (che usa solo il selettore :target).

A Free HTML5 and CSS3 Theme

Il template permette di creare sotto-pagine funzionanti, tra cui un modulo di contatto con validazione lato server, e codice PHP per l’invio della posta elettronica.
Utilizza la griglia 960.gs, e ha un font personalizzato chiamato Chunkfive che fa uso di @font-face.

Coding A HTML 5 Layout From Scratch

Tutorial da Smashing Magazine: il template proposto è una vetrina per la maggior parte dei nuovi elementi di intestazione, piè di pagina, sezione, ecc.
Nelle strutture CSS3, c’è il popolare text-shadow e altri selettori come last-child o selection.

52framework

52framework è uno strumento completo per iniziare a progettare con HTML5 e CSS3 con l’uso dei nuovi tag, campi di input, angoli arrotondati, text-shadows, ecc…
Include un sistema di layout a griglia e un CSS-reset (modificato per HTML5).

iPhone App. Website With HTML5

Un tutorial molto dettagliato sulla creazione di una applicazione web per iPhone che utilizza HTML5 e CSS3.

Creare un sito elegante con HTML 5 e CSS3

Questo tutorial pemette di creare pagine web con HTML5 e CSS3, e di condividere il risultato sotto forma di download gratuito.
Molti nuovi elementi HTML5 vengono qui utilizzati e viene integrato Modernizr per la compatibilità di IE.

Free HTML5 Template

Template per layout HTML a 2 o 3 colonne, compreso il file .PSD per gli elementi di layout.

HTML5 & CSS3 Vertical One-Page Template

Un template per siti one-page a svluppo verticale, che utilizza jQuery per lo scorrimento del contenuto in verticale per la visualizzazione dei link.

OWMX 1 HTML5-CSS3 Template

Template per blog a 2 colonne che utilizza molte delle nuove caratteristiche CSS3 e dei tag HTML5.
Utilizza il microformato: hCalendar microformat.

FlipThru HTML5 and CSS3 Template

Il template è piuttosto semplice ma utilizza le maggiori funzionalità di HTML5-CSS3.
Tuttavia, è da notare la disponibilità di un accordion che fa solo uso di CSS3.

HTML5-CSS3 Starting Template

Questo template offre una struttura completa per siti web HTML5 costruiti con PHP.
Comprende inoltre gli stili CSS per il layout, per la tipografia, per la stampa e il CSS reset.
Sono già disponibili nel modello le funzioni include PHP per header, footer, ecc

Articoli correlati:

1. CSS3: compatibilità cross-browser…da oggi!
2. HTML5: tag nuovi e anteprima delle novità
3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Novità in HTML5

HTML5 introduce nuove caratteristiche per uno sviluppo più facile delle applicazioni web improntate alla multimedialità e una gestione più sofisticata dei form, assieme a una presentazione più semantica del codice: nuovi elementi tag, nuovi input type, nuovi attributi ed eventi, nuove API.
Ecco di seguito una lista di tutte le principali novità e le anteprime:

1. Nuovi elementi HTML5

Elementi strutturali più semantici

• article contrassegna gli articoli di una sezione
• aside delimita informazioni aggiuntive
• footer rappresenta la sezione conclusiva della pagina
• header contiene i contenuti principali eventualmente raggruppati con hgroup
• nav raggruppa gli elementi di navigazione principale
• section distingue le sezioni di un documento, come se fossero capitoli di un libro

e torna nell’HTML, dopo essere stato deprecato dalla versione 4.01, il tag

• menu usato per una specifica lista di comandi

Interattività

• canvas permette il rendering dinamico delle bitmap
• command definisce un command button
• details rappresenta informazioni aggiuntive

Maggiore semantica in pagina e lingue asiatiche

• figure raggruppa elementi multimediali e le loro didascalie
• mark mette in risalto una porzione di testo rilevante
• rp, rt e ruby sono usati per le parentesi e per le annotazioni di Ruby

Multimedialità nativa

• audio consente la riproduzione audio nativa nel browser
• embed inserisce una applicazione esterna
• source specifica più sorgenti di un video o di un audio
• video definisce un video

Form migliorati

• datalist fornisce una sorta di auto-complete
• keygen definisce una coppia di keygen generate
• output rappresenta il risultato di un calcolo

Tempo e unità di misura

• meter definisce le unità di misura
• progress indica lo stato di avanzamento di un compito
• time specifica il formato di una data

Alcuni tag già definiti nella versione 4.01, in HTML5 assumono nuove proprietà. Ecco i principali nel dettaglio:

• il tag a potrà contenere elementi a livello di blocco, è potrà essere privo dell’attributo href, per essere usato come "link placeholder"
• l’elemento address potrà essere applicato a una specifica sezione section o articolo article
• l’elemento b verrà utilizzato solo per rendere il testo più marcato, senza particolari valenze keyword-SEO
• blockquote diventa un elemento sectioning root
• l’elemento dl rappresenta un elenco di associazioni composto da zero o più coppie nome-valore
• i tag h1, h2… possono essere ripetuti all’interno di ogni sezione della pagina
• l’elemento html potrà avere un proprio id
• il tag i verrà usato per indicare il testo da pronunciare con un particolare tono di voce, o testo che appartiene a un linguaggio tecnico, o una frase che nel contesto da cui è presa viene rappresentata con testo "italic"

2. Nuovi input type

Ecco la lista dei campi input si potranno utilizzare con HTML5:

• color
• date
• datetime
• datetime-local
• email
• number
• range
• search
• tel
• time
• url
• week

Articoli correlati:

1. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
2. Cosa è HTML5? Ecco una infografica che lo spiega!
3. Cheat Sheets per il Web Design