Tutte le indicazioni per utilizzare HTML5: semantica, CSS reset, tag video e compatibilità cross-browser.
Le sperimentazioni con HTML5 sono già iniziate da tempo, e nonostante serviranno ancora degli anni prima che la specifica diventi uno standard del W3C, si possono già trovare in rete molti esempi del suo utilizzo.
Dopo avere introdotto l’argomento su questo blog, ho approfittato di un piccolo progetto basato su Sweetcron per prepararmi e testare con mano lo stato attuale di HTML5. E’ così che è nata la nuova versione di 1la.it, lavoro che mi ha aiutato a mettere in ordine le idee per scrivere questa guida.
Doctype
La doctype di HTML5 è semplicissima:
<!DOCTYPE html>I nuovi elementi presenti in questa specifica sono comunque numerosi, e l’argomento va esaminato con più attenzione.
Semantica e nuovi elementi
La cosa più importante da notare è che oltre ai classici div, è possibile utilizzare una serie di elementi con uno specifico significato, molto più utili per capire la struttura di una pagina:
- header
- footer
- section
- article
- aside
- nav
Header e footer non hanno bisogno di presentazioni, ma la cosa interessante è che possono essere utilizzati più di una volta all’interno di una pagina. L’header infatti può identificare sia la testata del sito ma anche la parte introduttiva di un articolo; stesso discorso vale per il footer, che può contenere delle note sia relative al sito che ad una specifica sezione della pagina.
Non è raro infatti trovare pagine di esempio strutturate in questa maniera:
<header>...</header>
<nav>...</nav>
<section>
<article>
<header>...</header>
<section>...<section>
<footer>...</footer>
</article>
<article>
<header>...</header>
<section>...<section>
<footer>...</footer>
</article>
<aside>...</aside>
</section>
<footer>...</footer>Per quanto riguarda gli altri elementi dell’esempio, section fa da contenitore per qualsiasi sezione all’interno di un documento. Non è comunque un contenitore generico, quando c’è bisogno di aggiungere un elemento per soli scopi decorativi è sempre meglio usare il classico div.
Il tag nav deve essere utilizzato per identificare la parte della pagina contenente la navigazione: il classico menu, ma anche altri elementi che a seconda del contesto possono servire a spostarsi all’interno del sito.
Article invece è da utilizzare al posto del tag section per delle parti che possono essere astratte dal contesto e lette indipendentemente, come i post di un blog, degli articoli o un widget.
L’elemento aside invece potrebbe spesso essere utilizzato per identificare una sidebar, ma non solo. Dalle specifiche del W3C:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
Una cosa da tenere presente è che non esiste una struttura univoca per i siti in HTML5. Questi nuovi elementi vanno usati con criterio a seconda del contesto, e la struttura di un blog sarà molto probabilmente differente da quella di un classico sito o di un portfolio. Il vantaggio è che la grande varietà di tag consente di creare pagine significative dal punto di vista semantico che potranno essere consultate più facilmente anche dai visitatori: basti pensare agli utenti di screen reader per cui è essenziale la buona organizzazione del codice.
L’elemento time
Un elemento presente in HTML5 che vi troverete sicuramente ad utilizzare all’interno di temi per blog e siti di news è time. Come fa intuire il nome, può essere usato per indicare la data di un elemento article (ad esempio un post), o dell’intero documento.
La data può essere specificata in maniera esplicita o implicita:
Pubblicato il <time pubdate>2011-01-10</time>
Pubblicato il <time datetime="2011-01-10" pubdate>10 Gennaio 2011</time>
Pubblicato <time datetime="2011-01-10" pubdate>oggi</time>Come potrete intuire, il problema di questo elemento è che la data va comunque espressa in modo che sia leggibile da software esterni, nel formato aaaa-mm-ggThh:mm:ss+hh:mm (potete vedere come ho strutturato le date su 1la.it).
Compatibilità cross-browser
Il motivo per cui HTML5 deve ancora iniziare ad essere utilizzato è soprattutto la sua scarsa compatibilità con i browser esistenti, soprattutto Internet Explorer (tutte le versioni precedenti alla 9). Esiste però una soluzione basata su JavaScript che consente tutt’oggi di utilizzare questa specifica senza grandi problemi: html5.js.
Questo script in pochi kb consente ad IE di riconoscere i nuovi tag senza problemi: inserendolo nella sezione head del documento con un commento condizionale risolverete tutti i problemi.
CSS Reset
Lavorando con HTML5 è fondamentale riconoscere la necessità di un CSS Reset su misura. Alcuni vecchi elementi sono deprecati (acronym, center, big…) e ce ne sono di nuovi che hanno bisogno di uno stile di base. I vari section, article, aside, sono riconosciuti dai browser più moderni ma non vengono trattati nemmeno come elementi di tipo block.
Per risolvere il problema io ho utilizzato il CSS Reset di HTML5 Doctor, derivato dal CSS Reset di Eric Meyer. Includetelo nel vostro foglio di stile e non avrete problemi.
Tag Video
Una delle novità più interessanti di HTML5 è la possibilità di usare il tag video nelle proprie pagine. Se però il browser non supporta il nuovo tag, i filmati non saranno visibili.
Video.js è la soluzione ideale per essere sicuri che tutto funzioni alla perfezione su qualsiasi browser, con un fallback in flash nel caso l’utente non sia in grado di visualizzare gli altri contenuti. Io l’ho usato per mostrare dei video provenienti da YouTube.
Possibilità di utilizzo di HTML5
Questa guida vuole essere un’introduzione al mondo di HTML5, non pretendo che sia completa. Gli argomenti da trattare sono molti, e se volete approfondire potete fare riferimento a queste risorse:
Sono tutte risorse che mi sono servite a capire meglio questo linguaggio imparandone le basi.
Anche se HTML5 è appena agli inizi e la specifica potrebbe subire dei cambiamenti nel tempo, niente vi impedirà di utilizzarlo già adesso. Se lavorate sul web vi invito a farlo prima possibile, almeno a titolo sperimentale.
Ci sono già ottimi esempi online come Nike Better World o il sito di Urustar: iniziate a guardarvi intorno alla ricerca di HTML5, i tempi sono maturi per documentarsi.
…proprio ieri stavo guardando le specifiche webgl per giocarci un pochino…
tra quel che so di opengl 2.0 e questo bignami dei tag, dovrei avere tutti gli ingredienti…
mo basta solo un po’ di pazienza con l’odioso javascript!
@gG direi proprio che hai tutto il necessario per divertirti :)
Dritto dritto nei preferiti. Post utilissimo, grazie per aver condiviso!
Interessantissimo il post, anche io credo che i tempi siano già maturi. Salvato su delicuious!
Mi è venuta voglia di metterci le mani! Grazie Tom.
@Bruno, @Antonio e @Salvatore: grazie per i complimenti, sono contento di scoprire che la guida possa tornarvi utile. Per dubbi e chiarimenti sono a disposizione, in futuro potrei scrivere altri post più specifici su HTML5.
Da alcuni mesi sto studiando l’html, posso sapere dove posso trovare un manuale pratico con degli esempi dell’html5
Grazie
@Salvatore se conosci l’inglese per me è stato molto utile HTML5 for Web Designers, in italiano invece non c’è ancora molto. Per il futuro potrebbero esserci delle sorprese anche su questo sito :)
Prezioso, come sempre.
Tom, leggerti è sempre molto utile oltre che piacevole.
Questo argomento, in particolare, mi interessa molto, spero proprio che tu decida di parlarne ancora.
Grazie.
@Anna grazie per le belle parole, mi fanno molto piacere. Scriverò sicuramente altri post sull’argomento, e come dicevo poco sopra in futuro potrei presentare anche altre novità sul tema HTML5.