HTML5, vuoi dare uno sguardo alle novità che porterà con sè?
Ormai si sente parlare sempre più spesso della nuova versione di HTML. In redazione abbiamo considerato che, sebbene sia ancora presto per poterne sfruttare le potenzialità, è giusto cominciare a prendere confidenza con le nuove convenzioni di HTML5.
Vuoi dare uno sguardo alle novità che porterà con sè?
Una brevissima storia
I lavori su HTML5 sono cominciati nel 2004, ad opera del Web Hypertext Application Technology Working Group (WHATWG), un gruppo di web designer indipendenti. Nel 2007 le specifiche sviluppate dal WHATWG furono adottate dal World Wide Web Consortium (W3C) come punto di partenza per il nuovo Working Group su HTML5.
I nuovi elementi strutturali.
Tutte le informazioni che seguono sono ricavate dalla specifica HTML5 dal sito del W3C, e si riferiscono alla bozza del 29/05/2009, data in cui scriviamo l’articolo.
Tieni conto che queste specifiche sono dei “lavori in corso” dunque quasi sicuramente subiranno delle modifiche prima di essere ufficializzate.
In HTML5 vengono introdotti diversi nuovi elementi, che hanno l’obiettivo di rendere più significative le strutture delle pagine web. I più rilevanti sono i seguenti:
Elemento header
L’elemento header rappresenta una sezione della pagina contenente un’introduzione e/o una serie di aiuti alla navigazione. Un elemento header solitamente contiene le intestazioni per la sezione, ma può anche contenere altri elementi, come un sommario, un campo di ricerca oppure il “branding” del sito. È da notare che l’elemento header è posto all’interno di una sezione e non come sua introduzione.
Elemento nav
L’elemento nav rappresenta una parte della pagina che contiene link ad altre pagine, o ad elementi presenti nella stessa pagina; dunque una sezione con dei link di navigazione. Non tutti i gruppi di link devono essere posti in un elemento nav: solo i link principali sono appropriati. Ad esempio, è pratica comune aggiungere al footer gruppi di link a varie sezioni del sito, ma in questi casi l’elemento più appropriato è footer.
Elemento section
L’elemento section rappresenta una generica sezione di un documento o di un’applicazione. Una sezione in questo contesto, è un insieme di contenuti collegati tra loro, tipicamente con un header e a volte con un footer.
Elemento article
L’elemento article rappresenta una sezione della pagine che consiste in una entità indipendente. Potrebbe essere un post di un forum, un articolo di giornale, un post di un blog, un commento da parte di un utente, o un altro contenuto indipendente ovvero che possa avere significato da solo anche estratto dal contesto.
È possibile avere più livelli di elementi article: in questo caso gli elementi più interni sono comunque legati a quello esterno, pur essendo indipendenti. Ad esempio, i commenti ad un post di un blog, possono essere resi come article all’interno dell’elemento article che rappresenta il post.
Elemento aside
L’elemento aside rappresenta una sezione della pagina che che è solo in parte collegato con il contenuto principale e che quindi deve essere separata dal contenuto. Solitamente viene resa come una colonna posta a lato del contenuto principale, ma nulla vieta che possa trovarsi all’interno (come ad esempio, una citazione).
Elemento footer
L’elemento footer rappresenta l’elemento conclusivo della sezione a cui si riferisce: dunque un footer solitamente contiene informazioni riguardo la sezione in cui è contenuto; ad esempio informazioni sull’autore, link a documenti collegati, informazioni su copyright ecc. Gli elementi footer non devono essere posti obbligatoriamente in fondo al documento, sebbene sia una pratica comune.
Un documento di base
È arrivato il momento di sporcarsi le mani con un po’ di codice: oggi proveremo a creare un documento utilizzando le specifiche del nuovo HTML5. Quindi apri il tuo editor preferito e andiamo avanti.
Un documento di base in HTML 4 potrebbe essere:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Struttura documento HTML4</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <p>..qui il nostro contenuto...</p> </body> </html>
Mentre il corrispettivo in HTML5 sarà:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Prove HTML5</title> </head> <body> <p>..qui il nostro contenuto...</p> </body> </html>
Le uniche differenze, come puoi vedere, sono:
- il doctype: la dichiarazione che precede qualsiasi elemento del documento. Il doctype di HTML 5 è stato notevolmente semplificato, rispetto ai suoi predecessori.
- l’encoding del documento: in HTML 5 è stato introdotto l’attributo charset per il tag meta, che permette di stabilire quale tabella di caratteri è stata utilizzata per il documento. Per avere ulteriori informazioni puoi consultare il blog del Working Group di HTML 5.
Un layout con i nuovi elementi
Il documento che andremo a realizzare sarà molto semplice: si tratta di un documento con un header, un footer, una colonna con il contenuto principale e una barra laterale.
Se avessimo dovuto realizzarlo in HTML 4.01 avremmo avuto qualcosa del genere:
Che tradotto in codice sarebbe stato:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Your Inspiration Web 4.0</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <div id="header"> <h1>Your Inspiration Web 4.0!!</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Autori</a></li> </ul> </div> <div id="main_content"> <h2>Titolo per il mio contenuto principale</h2> <p>Qui andrebbe il contenuto principale del mio sito.</p> </div> <div id="sidebar"> <p>Qui tutto ciò che potrebbe essere legato al mio contenuto.</p> </div> <div id="footer"> <p>Qui varie informazioni!</p> </div> </body> </html>
Sfruttando i nuovi elementi, si può trasformare questo layout in un documento molto più valido dal punto di vista semantico:
Che tradotto in codice diventerebbe:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Prove HTML5</title> </head> <body> <header> <h1>Your Inspiration Web 4.0!!</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Autori</a></li> </ul> </nav> <section> <h1>Titolo per il mio contenuto principale</h1> <p>Qui andrebbe il contenuto principale del mio sito.</p> </section> <aside> <p>Qui tutto ciò che potrebbe essere legato al mio contenuto.</p> </aside> <footer> <p>Qui varie informazioni!</p> </footer> </body> </html>
Dunque abbiamo sostituito:
<div id=”header”>con<header><div id=”sidebar”>con<aside><div id=”main_content”>con<section><div id=”footer”>con<footer>
La questione va aldilà delle semplici sostituzioni. Infatti gli elementi introdotti in HTML5 non sono dei semplici “sostituti semantici” dei div.
La ragione pratica è associata alla struttura dei titoli della pagina: se hai osservato il codice con attenzione avrai potuto notare che, mentre nel primo esempio il titolo del contenuto principale è stato reso con un <h2>, nel secondo ho utilizzato un <h1>.
Questo perché in HTML5 è stato introdotto un nuovo algoritmo per la gestione dei titoli che, in pratica, permette di utilizzare all’interno di ogni elemento <section> tutti i titoli (da h1 ad h6). I vantaggi rispetto alla “normale” gestione di HTML4 sono dovuti al fatto che così si possono gestire layout più complicati rispetto ad un sito web lineare (pensa ad un aggregatore di notizie che ingloba articoli presi da altri siti), garantendo una struttura sempre significativa.
Le ragioni per utilizzare markup semantico possono sembrare molto deboli dal punto di vista umano, ma devi pensare che per le macchine (motori di ricerca, screen reader, ecc) è impossibile distinguere un paragrafo dall’immagine di un carciofo (e poi le chiamano intelligenti).
Un blog con HTML 5
Facciamo un secondo esempio un po’ più complesso e cerchiamo di capire come si potrebbe strutturare un blog, utilizzando i nuovi elementi.
Utilizzeremo una struttura molto simile quella precedentemente realizzata: l’unica differenza sarà l’aggiunta dei post al posto dell’elemento section.
I post di un blog sono entità indipendenti dal contenuto del sito, quindi possiamo utilizzare a buon diritto l’elemento <article>. Un post è formato dai seguenti elementi:
- Titolo e data di pubblicazione: possiamo inserire queste informazioni in un elemento header poiché introducono il contenuto.
- Contenuto del post: utilizzeremo tutti gli elementi già noti di HTML4.
- Metadati del post: quindi categorie, tag, nome autore, link a commenti. Si potrebbe pensare di utilizzare l’elemento
<aside>però queste informazioni sono relative al contenuto, dunque sfrutteremo l’elemento<footer>. - Altri elementi: link ad articoli correlati, icone di bookmark, link per feed rss, possono essere racchiusi da un
<aside>. - Commenti: le specifiche dicono esplicitamente che un commento di un post rappresenta un’entità a sé stante, anche se collegata al post. Dunque potremmo inserirli in elementi
<article>.
Devi stare attento a non pensare che l’elemento <footer> debba trovarsi in fondo alla pagina, l’elemento <aside> a lato e così via: bisogna pensare al significato del contenuto e non alla sua posizione all’interno della pagina.
La struttura dovrebbe essere simile alla seguente:
Questo è il risultato, ripreso da un articolo di YIW, con qualche stile applicato.
Per il momento è possibile visualizzarlo correttamente con Firefox 3+, Opera 9+, e Safari3+. Se vuoi confermarmi il funzionamento su altri browser puoi segnalarlo nei commenti, così potremo fare una sorta di statistica insieme.
Conclusioni
Naturalmente i tempi non sono ancora maturi ed il supporto da parte dei vari browser è ancora molto limitato per consigliare l’uso in fase di produzione di HTML5. Però abbiamo a nostra disposizione tutti gli strumenti per poter cominciare a sperimentare.
Anzi, credo che sia nostro dovere, in quanto professionisti che un domani utilizzeranno questo strumento, aiutare attraverso feedback, commenti e consigli le persone che stanno lavorando a questo progetto, che ritengo possa essere una delle basi del futuro Internet.
Quindi fai esperimenti e invia commenti e critiche al forum o alle mailing list del WHATWG. D’altra parte, non ti piacerebbe poter dire un domani: “Anche io ho contribuito allo sviluppo di HTML5”?
Scarica i file d’esempio dell’articolo.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
20 commenti
Trackback e pingback
-
Conosci questi modi di utilizzo del selettori css? | Your Inspiration Web
[...] avrai notato se hai avuto modo di leggere i miei precedenti articoli, preferisco gli esempi pratici alla teoria, li… -
» Oggi Google si presenta con un ennesimo Doodle: ecco il motivo
[...] e creatività, sia dovuta al fatto che il colosso di Mountain View voglia celebrare l’HTML 5 (evoluzione dell’attuale standard…
Ciao just, la scorsa settimana ho letto con molto interesse il dibattito che ne è scaturito tra te e Giancarlo a proposito di html e xhtml, tante cose non le conoscevo nemmeno e vi ringrazio entrambi, leggendovi mi avete dato la possibilità di guardare una pagina web da un punto di vista molto più tecnico :)
Trovo questo articolo molto interessante, non avevo ancora avuto il coraggio di sperimentare una bozza in html5, ho sempre rimandato aspettando tempi più maturi, ma oggi, vista la semplicità degli esempi che hai proposto, mi sono finalmente deciso ed eccomi in modalità [experiment_on] :)
Una curiosità, ho visto che in alcuni punti del css hai utilizzato questa dicitura:
article > p{cosa si intende con il simbolo “
>”?Sarebbe la stessa cosa scrivere
article p {senza utilizzare il simbolo>?Piu che Html 5, il vero futuro risiede nei css3.
Html5 sarebbe una bellissima novità ( la semantica è un pò il mio punto debole, dato che sono solito chiamare i div header o delle colonne o del contenuto coi nomi piu disparati tipo div#testatanucleare o div#colonnaerculea ) ma io sicuramente lo sfrutterei pochino.
I css3 invece saranno una rivoluzione quando browser concepiti dall’Uomo di Neanderthal ( ogni riferimento a IE6, 7 o X è puramente casuale ) li sopporteranno.
Marco, ma i css porteranno innovazione più dal punto di vista estetico che strutturale. E comunque non saranno da sottovalutare anche queste novità, il tempo che si risparmierà sarà notevole secondo me, per esempio basterà definire una semplice regola css per avere gli angoli arrotondati di un box piuttosto che disegnarlo, esportarlo, ecc
Ma quanto tempo ci farà attendere ancora internet explorer?
Il definire il border radius è Css 3 ;)
Comunque si, sono molto interessanti come novità ma io le percepisco di meno, proprio perchè ho una buona manualità di codice e so a memoria il numero di div che mi ci vogliono per avere una data struttura.
Senza contare che gli do dei nomi specifici io agli ID e alle classi che mi permettono sempre di identificarli.
Diciamo che chi codifica a livello buono-alto-eccellente non percepisce molto la novità della semantica ma è piu incentrato sulla velocità di realizzazione.
La cosa mi interessa molto, ma molto meno rispetto ai css3.
Si Marco, lo so che definire il border radius è css3, sono un niubbo ma non fino a questo punto :)
Quello che intendevo dire è che comunque anche le innovazioni che porteranno i css3 non saranno da sottovalutare a quelle strutturali che porterà con se html5. Pensiero che avete confermato anche tu e Just nei commenti successivi. ;)
@daniele sono contento che l’articolo abbia dato una spinta ai tuoi esperimenti! Naturalmente tienici al corrente di tutte le tue scoperte ;)
Per quanto riguarda il selettore ‘>’ sta ad indicare i figli diretti di un dato elemento. Stiamo preparando un articolo proprio sui selettori CSS, e sulle novità portate da CSS3 quindi restate sintonizzati! ;)
Per quanto il discorso Html VS CSS non bisogna dimenticare che internet non è solo una galleria d’arte: la vera spina dorsale sono le informazioni e non solo il modo di presentarle. Come in tutte le cose, però, la verità sta nel mezzo, quindi entrambe le tecnologie sono degne di merito e non ce n’è una migliore: sono complementari e dunque importanti allo stesso modo (al pari di javascript)
Logico che la spina dorsale è l’HTML
infatti il mio era un discorso di preferenze, di quale novità sfrutterò di più.
Tutto qui
;)
L’HTML 5 sembra senza dubbio interessante, ma a quanto pare è lontano dall’affermarsi. Proprio ieri leggevo su SitePoint un articolo sull’HTML 5 in cui alcuni nomi di grande importanza come Johnathan Snook e Andy Clarke dicono tutti che deve passare qualche altro anno prima di poterne parlare seriamente (e qualcuno di loro si augura pure che non se ne parlerà mai).
@grazz Ciao, e benvenuto su YIW.
Ho letto anche io l’articolo qualche giorno fa e condivido il pensiero di Dave Shea quando dice che userebbe html 5 per il proprio sito personale, ma non si azzarderebbe a usarlo per un cliente.
Le parole degli esperti mi sembrano però come quelle di persone che si sono scottate e hanno paura di rifarlo. Siamo d’accordo che non deve essere utilizzato, siamo d’accordo che i presunti web-designer debbano imparare dalle basi, però credo ci voglia anche collaborazione e voglia di provare.
Mi riferisco a Tommy Olsson che dice “[..]penso sia un abominio[..]”: che senso ha criticare e puntare il dito? La specifica è ancora in fase di lavorazione e il WG mi sembra disponibilissimo ad accettare critiche e consigli da parte di chiunque (a maggior ragione da parte di un esperto).
In ogni caso, tentare non costa nulla :)
Mi sembra una cosa ovvia quella di non utilizzare html5 per realizzare il sito di un cliente.
grazz, lasciando stare quello che dice Andy Clarke, secondo te tra qualche anno quale sarà il successore di html 4 e xhtml 1?
Scoperto oggi.
Molto interessante, a quanto pare è già abbastanza diffuso
:D
http://html5gallery.com/
Una gallery di siti sviluppati in html5?
Ma per il momento non era altamente sconsigliato produrre siti in html5?
@weps Grazie per la segnalazione :)
@Lucky Si, infatti se noti nella gallery la maggior parte dei siti sono progetti personali, blog e siti di eventi dedicati allo sviluppo web e non siti commerciali.
Giusto un appunto personale. C’è una cosa che non mi è piaciuta molto in alcuni di quei siti: perchè sbandierare il fatto che sono sviluppati in HTML5? L’utente di un sito non è interessato al linguaggio scelto per lo sviluppo, così come la maggior parte delle persone che acquistano un’auto non sono interessate a come è costruita l’autovettura: basta che funzioni!
Spero proprio che non si sviluppi la moda del “Fatto con HTML5” :(
Voi che ne pensate?
Io penso che ti sia già risposto nel tuo commento
:D
la maggior parte dei siti sono progetti personali, blog e siti di eventi dedicati allo sviluppo web e non siti commerciali.
A nessuno interessa come è fatta una macchina vero,
ma a tutti interessa dire che il vino buono è fatto in casa
:D
Articolo molto interessante…
Non mi è chiaro il discorso del footer… sono talmente abituato a vederlo prima della chiusura del che sembra fuori luogo. Così come sembrano fuori luogo le informazioni all’interno di esso.
Il classico foooter del “sitarello” (ma che poi è presente ovunque)
indirizzi della ditta, PI, Tel
altro….
Come verrebbe gestito?
Oooops mi sono spariti tutti i tag degli esempi
Ciao ricmanx e benvenuto su YIW!
La questione del footer è molto semplice: in pratica non bisogna considerare il suo nome presentazionale (tutti noi pensando footer abbiamo davanti l’immagine di una “striscia” in fondo al sito) ma quello che, secondo le specifiche, rappresenta.
Così come il tag a denota un’ancora nel testo, h1 un titolo di primo livello, il tag footer rappresenta un contenitore per le informazioni riguardanti la sezione in cui è incluso. Avrebbero potuto chiamarlo info, e sarebbe stata la stessa cosa :)
Quindi il classico footer sarebbe un perfetto candidato per questo tag!
Molto utile complimenti