Html5 based

Introduzione
Una guida operativa
Affrontare un tema vasto come quello dell'HTML5 spaventa sempre un po', soprattutto quando
l'obiettivo è quello di abbracciare l'intera tecnologia sottostante le specifiche proponendo al contempo
un'opera che sia fruibile e divertente da leggere. Il primo passo che abbiamo deciso di compiere nella
stesura di questo progetto è stato individuare il target di lettori ai quali la guida vorrebbe rivolgersi.
Abbiamo allora identificato da un lato un gruppo di sviluppatori interessati alla consultazione di
specifiche referenze del linguaggio, dall'altro un insieme di lettori desiderosi di informarsi a tutto
tondo sulle novità offerte dall'HTML5. A questa commistione di interessi si aggiunge una naturale
segmentazione della guida secondo i due temi che maggiormente permeano le specifiche: il nuovo
approccio semantico nella creazione di pagine web e il ricco set di API reso disponibile.

Il percorso si snoda in modo organico tra le due macro-sezioni alternando lezioni di stampo
divulgativo, ottime per avere una visione di insieme della tematica trattata, a percorsi verticali
costruiti attorno a funzionalità specifiche. Non sono previsti articoli introduttivi alla sintassi del
linguaggio HTML e nemmeno approfondimenti su elementi o API già presenti nelle versioni precedenti,
a meno che questi non abbiano subito un cambio radicale; se fosse necessario recuperare
informazioni su tali aspetti rimandiamo alla lettura della guida HTML 4
(http://xhtml.html.it/guide/leggi/51/guida-html/) redatta da Wolfgang Cecchin.

I progetti guida
Per questa guida abbiamo deciso di combinare i tanti piccoli esempi dedicati ad ogni lezione in un
vero e proprio progetto che sappia anche mostrare come le singole funzionalità HTML5 lavorano
insieme.

In realtà i progetti sono due, come due gli aspetti principali di questa specifica: al termine delle
lezioni legate al nuovo supporto semantico dell'HTML5 la combinazione dei vari esempi mostrati darà
vita ad untemplate per blog studiato per trarre vantaggio da elementi come <section> e
<article>, dai nuovi content model e dalle novità in materia di form. La parte incentrata sulle API
dedicate allo sviluppo di applicazioni web invece includerà tutti gli elementi necessari alla stesura di
una lavagna virtuale sulla quale si potranno tracciare linee utilizzando il mouse e che darà la
possibilità di salvare in locale le opere create.

Chiaramente tale scelta è stata implementata in modo da non pregiudicare l'indipendenza delle
singole lezioni ma con l'idea di suggellare un ulteriore filo conduttore all'interno dell'opera.

Figura 1 - Anteprima del template per blog in HTML5 (click per ingrandire)

(http://www.html.it/guide/esempi/html5/imgs/lezione_1/blog_preview.png)

Alcuni prerequisiti
Nella prossima lezione ci interesseremo con maggior attenzione alla timeline ufficiale HTML5, per ora
basti sapere che la data di accettazione delle specifiche come standard W3C è ancora
sufficientemente lontana. Nonostante questo, buona parte di quanto verrà trattato in questa guida è
già disponibile sulla grande maggioranza dei browser e, come vedremo, alcuni aspetti del linguaggio
sono da tempo in produzione su portali di notevoli dimensioni, come youtube.com
(http://www.youtube.com/html5) o vimeo.com (http://vimeo.com/blog:268).

Esistono tuttavia ampie porzioni delle specifiche che, perché meno strategiche, di più difficile
implementazione o meno mature, sono ad oggi supportate in modo superficiale e disomogeneo; per
poter beneficiare al massimo delle demo e degli esempi anche per elementi o API che ricadono in
questa categoria si consiglia quindi di dotarsi di un browser che utilizzi WebKit come layout engine in
quanto dotato del più ampio supporto HTML5 ad oggi disponibile sia per le parti della specifica ormai
consolidate sia per quelle al momento più 'sperimentali'.

In particolare, tutto il codice di questa guida è stato sviluppato e testato usando la ‘Nightly Build' di
Chromium, cioè la versione speciale per fini di sviluppo che contiene ogni feature ad oggi
implementata, per quanto sperimentale esso sia. La pagina per il download, disponibile per i principali
sistemi operativi, è raggiungibile all'indirizzo http://build.chromium.org/f/chromium/snapshots/
(http://build.chromium.org/f/chromium/snapshots/) seguendo il link nominato come il proprio
sistema operativo e successivamente la cartella recante il numero più alto tra i presenti.

Tabella della compatibilità sui browser

Se Chromium, lo accennavamo, garantisce ad oggi il supporto più ampio alle funzionalità previste
nella specifica e in via di definizione presso il W3C e il WHATWG, la maggior parte dei browser
commerciali più diffusi, con ritmi e tempi diversi, si sta adeguando. Internet Explorer 9 e Firefox 5,
rilasciati nella primavera di quest’anno, condividono infatti un ottimo supporto a queste specifiche.

Lo stato dell'arte relativamente al supporto HTML5 lo abbiamo tracciato in questa tabella di
compatibilità (http://www.html.it/guide/esempi/html5/tabella_supporto/tabella.html) che sarà via via
aggiornata con l'estendersi del supporto alle feature che attualmente non sono supportate. Estratti
della tabella sono inseriti anche a corredo delle lezioni dedicate a ciascun elemento.

Mappa della guida
Nell'immagine seguenti è riassunta l'intera struttura dell'opera mettendo in evidenza la posizione delle
singole lezioni rispetto al contenuto globale con l'obiettivo di fornire una panoramica esauriente sui
temi che verranno trattati.

Ai nastri di partenza!
Figura 2 - Mappa della guida (click per ingrandire)

(http://www.html.it/guide/esempi/html5/imgs/lezione_1/2.jpg)
Bene, con questo può definirsi conclusa questa necessaria sezione introduttiva, la prossima lezione
affronterà la travagliata storia che ha caratterizzato la definizione di queste specifiche, con un piccolo
ma sentito cameo anche da parte dell'XHTML2.

Da HTML 4 ad HTML5
Un po' di storia
Siete curiosi di sapere come tutto è nato? Venerdì 4 giugno 2004, in una notte buia e tempestosa, Ian
Hickson annuncia la creazione del gruppo di ricerca WHAT (http://www.whatwg.org/), acronimo di
Web Hypertext Application Technology in un sintetico ma ricco messaggio
(http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2004-June/000005.html).

L'obiettivo del gruppo è quello di elaborare specifiche per aiutare lo sviluppo di un web più orientato
alle applicazioni che ai documenti; tra i sottoscrittori di questa iniziativa si annoverano aziende del

calibro di Apple, Mozilla e Opera. Questa piccolo scisma dal W3C è determinato dal disaccordo in
merito alla rotta decisa dal consorzio durante un famoso convegno del 2004 dove, per un pugno di
voti, prevalse la linea orientata ai documenti di XHTML2.

"XHTML 2.0 considered harmful (http://lists.w3.org/Archives/Public/www-html/2003Jan/0123.html)"
è il titolo di un messaggio inviato alla mailing list ufficiale del W3C datato 14 gennaio 2003 che ben
riassume i sentimenti contrastanti che all'epoca si respiravano in merito a queste specifiche. La
principale causa di perplessità è da ricercarsi nella decisione azzardata di non mantenere la retro-
compatibilità con la versione 1.1 eliminando alcuni tag e imponendo agli sviluppatori web un
controllo rigoroso nella creazione delle pagine, pena lo stop del processo di parsing e la
visualizzazione a schermo degli errori di interpretazione. Nei due anni successivi i gruppi XHTML2 e
WHAT proseguono i lavori sulle proprie specifiche in modo indipendente e parallelo, sollevando dubbi
e confusione sia da parte dei produttori di browser che degli sviluppatori web. Emblematico in tal
senso è un articolo firmato da Edd Dumbill nel dicembre 2005 intitolato The future of HTML
(http://www.ibm.com/developerworks/xml/library/x-futhtml1/). Il 27 ottobre 2006 in un post sul
proprio blog intitolato Reinventing HTML (http://dig.csail.mit.edu/breadcrumbs/archive/2006/10/27),
Tim Berners-Lee annuncia la volontà di creare un nuovo gruppo di ricerca che strizzi l'occhio al WHAT
e ammette alcuni sbagli commessi seguendo la filosofia XHTML2:

Some things are clearer with hindsight of several years. It is necessary to evolve HTML
incrementally. The attempt to get the world to switch to XML, including quotes around
attribute values and slashes in empty tags and namespaces all at once didn't work. The
large HTML-generating public did not move, largely because the browsers didn't
complain. Some large communities did shift and are enjoying the fruits of well-formed
systems, but not all. It is important to maintain HTML incrementally, as well as
continuing a transition to well- formed world, and developing more power in that world.
Tim Berners-Lee.

Dovranno passare quasi altri due anni di competizione tra le due specifiche, questa volta entrambe
interne al W3C, prima che nel luglio del 2009 lo stesso Tim sancisca di non voler riconfermare il
gruppo XHTML2 per l'anno successivo preferendo di fatto la direzione intrapresa dall'HTML5.
Frattanto il gruppo di ricerca, formato da una commistione di elementi del W3C e del WHAT, sotto la
guida di Ian Hickson, è giunto alla 4° versione delle specifiche (http://www.whatwg.org/specs/web-
apps/current-work/multipage/).

Nonostante il continuo e solerte lavoro e il grande intervallo di tempo speso nella stesura di questo
documento, i passi residui necessari ad eleggere questa tecnologia al rango di 'W3C Reccomandation',
relegandola così tra gli standard riconosciuti, sono ancora molti, al punto che si prevede di
raggiungere l'agognato traguardo soltanto attorno al 2020.

Ricordiamo però che il consorzio si riferisce sempre all'intero universo inscritto nelle specifiche mentre
alcune feature ritenute peculiari ed importanti, ad esempio il tag <video>, sono già implementate da
tempo dalla totalità (o quasi) dei browser in commercio.

Che cos'è l'HTML5?
Domanda semplice solo all'apparenza; siamo sicuramente di fronte alla quinta revisione delle
specifiche HTML ma anche di un vastissimo elenco di funzionalità che si sviluppano attorno al tema
del linguaggio di markup: cerchiamo quindi di fare un po' di ordine.

Per prima cosa è importante ricordare che, anche in virtù della storia della sua nascita, all'interno
dell'HTML5 convivono in armonia due anime: la prima, che raccoglie l'eredità semantica dell'XHTML2,
e la seconda che invece deriva dallo sforzo di aiutare lo sviluppo di applicazioni Web. Il risultato di
questo mix di intenti è più articolato di quanto si immagini; in prima istanza si assiste ad una

evoluzione del modello di markup, che non solo si amplia per accogliere nuovi elementi, ma
modifica in modo sensibile anche le basi della propria sintassi e le regole per la disposizione dei
contenuti sulla pagina. A questo segue un rinvigorimento delle API JavaScript che vengono
estese per supportare tutte le funzionalità di cui una applicazione moderna potrebbe aver bisogno:

salvare informazioni sul device dell'utente;
accedere all'applicazione anche in assenza di una connessione Web;
comunicare in modo bidirezionale sia con il server sia con altre applicazioni;
eseguire operazioni in background;
pilotare flussi multimediali (video, audio);
editare contenuti anche complessi, come documenti di testo;
pilotare lo storico della navigazione;
usare metafore di interazione tipiche di applicazioni desktop, come il drag and drop;
generare grafica 2D in tempo reale;
accedere e manipolare informazioni generate in tempo reale dall’utente attraverso sensori
multimediali quali microfono e webcam.

Anche l'aspetto semantico a contorno del markup non è dimenticato; ecco quindi nascere le specifiche
per la nuova generazione di microformati e per l'integrazione tra HTML5 e RDFa. Ma non è
tutto, attorno a quello che può essere definito il nucleo autentico delle specifiche gravitano tutta una
serie di altre iniziative, alcune delle quali in avanzato stato di definizione, studiate per:

accedere alle informazioni geografiche del device dell'utente (posizione, orientamento,...);
mantenere un database sul device dell'utente;

E non dimentichiamo che l'evoluzione dell'HTML viaggia di pari passo con quella dei CSS, che si
avvicinano alla terza versione, e di altri importanti standard come SVG e MathML, e che ognuno di
questi componenti è progettato nella sua versione più recente per recare e ricevere beneficio dagli
altri.

Perché dovremmo passare all'HTML5?
Il panorama di Internet è cambiato molto dall'assunzione a 'W3C Reccomandation' della versione
precedente delle specifiche, avvenuta verso la fine del 1999. In quel tempo il Web era
strettamente legato al concetto di ipertesto e l'azione più comune per l'utente era la fruizione di
contenuti, tipicamente in forma testuale. La mediamente bassa velocità di connessione e il limitato
investimento sul media contribuivano ad una scarsa presenza di applicazioni web, più care da
sviluppare ed esigenti in termini di banda.

Tutto questo era ben rappresentato da un linguaggio, HTML, principalmente orientato ad agevolare
la stesura di semplici documenti testuali collegati fra loro. Negli anni successivi l'interesse
intorno alla rete ha subito una brusca accelerazione e questo ha condizionato positivamente sia la
diffusione che la velocità di connessione della stessa, attirando di conseguenza maggiori investimenti
e ricerca. Al modello di fruizione dei contenuti si è aggiunta la possibilità per l'utente finale di divenire
esso stesso creatore attraverso applicazioni web sempre più elaborate ed interessanti.

Questo nuovo livello di complessità, in termini di sviluppo, ha però dovuto scontrarsi con un set di
specifiche poco inclini ad essere utilizzate per tali fini e che quindi si sono prestate al compito solo a
scapito di infiniti hack e workaround. Esempi di questi 'utilizzi non premeditati' dell'HTML si possono
trovare un po' ovunque, famoso il caso degli attributi rel e ref che hanno assunto nel tempo valori
non previsti, (eg:nofollow) anche esterni alla loro funzione naturale (eg: l'utilizzo di questi due
attributi in librerie come Lightbox).

Parallelamente il percorso di crescita del web ha fatto emergere alcune strutture di contenuto
ricorrenti, ben caratterizzate dal fenomeno dei blog: informazioni di testata, menu di navigazione,
elenchi di articoli, testo a pie' di pagina, ed altri. La parte dedicata al singolo articolo presenta
anch'essa solitamente lo stesso set di informazioni quali autore, data di pubblicazione, titolo e corpo
del messaggio. Anche in questo caso l'HTML4 non ha saputo fornire gli strumenti adatti a consentire
una corretta gestione e classificazione del contenuto obbligando gli sviluppatori web a ripiegare su
strutture anonime, quali <div> e<p>, arricchite di valore semantico con l'utilizzo di attributi quali
class e id.

L'HTML5 nasce per risolvere questi problemi offrendo agli sviluppatori web un linguaggio pronto ad
essere plasmato secondo le più recenti necessità, sia dal lato della strutturazione del
contenutoche da quello dello sviluppo di vere e proprie applicazioni.

Grandi cambiamenti nell'ombra
La differenza principale tra le versioni correnti di HTML e XHTML risiede nella sintassi. Il linguaggio di
markup creato da Tim Berners-Lee, e che ancora oggi popola i nostri browser, è stato studiato come
applicazione del più generico SGML, Standard Generalized Markup Language; ne è la prova la
dichiarazione di Document Definition Type che dovrebbe essere posta nella prima riga di una pagina
Web ad indicare la grammatica, HTML per l'appunto, usata nel documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.
dtd">

In realtà la quasi totalità dei browser ignora la definizione e interpreta il documento secondo logiche
più permissive, frutto di anni di eccezioni e di esperienza accumulata su pagine malformate. L'XHTML,
invece, è una versione della sintassi HTML costretta all'interno delle regole XML, a sua volta
grammatica SGML: questo approccio dovrebbe implicare un maggior rigore nella pagina e l'aderenza
a regole quali l'obbligo di chiusura di tutti i tag. Il parser XML inoltre dovrebbe sospendere
l'interpretazione della pagina al primo errore rilevato.

L'arrivo dell'HTML5 introduce una importante novità in questo scenario, per la prima volta l'obiettivo
delle specifiche è quello di definire un linguaggio ubiquo, che possa poi essere implementato
su entrambe le sintassi. L'occasione è buona anche per fare un po' di pulizia e rompere
definitivamente il legame tra HTML e SGML formalizzando e traducendo in standard le regole adottate
da tempo nei browser. Per indicare un documento HTML5 è nata quindi la seguente semplice
istruzione:

<!DOCTYPE html>

Che si affianca a quella da utilizzare in caso si intenda scrivere una pagina XHTML5:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

E adesso?
Questa lezione aveva l'obiettivo di fornire un contesto storico e operativo ai temi dei quali questa
guida tratterà in modo approfondito. Nelle prossime lezioni affronteremo in sequenza prima la parte

legata al markup ed alla gestione della disposizione del contenuto e successivamente le principali API
introdotte da queste specifiche. Il viaggio all'interno dell'universo dell'HTML5 è appena iniziato!

La sintassi di HTML5

Prima di scendere nei dettagli presentando i nuovi elementi e le nuove API definite nella specifica, è
necessario spendere qualche momento per parlare delle regole sintattiche introdotte dall’HTML5, per
larga misura ereditate e razionalizzate dalla precedente versione delle specifiche. In primo luogo
familiarizziamo con il concetto noto di tag. Esistono tre distinte versioni di questa particella, ognuna
di esse si applica selettivamente solo ad alcuni elementi:

Tag ‘classico’
<p> bla bla bla bla ... </p>

Tag ‘vuoto’
<img src="immagine_interessante.jpg" alt="Una immagine interessante">

Tag ‘autochiudente’
<rect x="150" y="40" width="60" height="30" fill="black" stroke="black"/>

Gli elementi HTML5 si possono dividere in tre categorie sulla base della tipologia di tag da usare per
implementarli.

1. Elementi normali: sono quelli che possono racchiudere dei contenuti sotto forma di testo,
commenti HTML, altri elementi HTML, etc. Sono elementi normali, dunque, i paragrafi (<p>), le liste
(<ul>), i titoli (<h1>), etc. Salvo specifici casi, cui accenneremo nel seguito della lezione, gli elementi
normali vengono definiti attraverso un tag di apertura (<p>) e un tag di chiusura (</p>).

2. Elementi vuoti: gli elementi vuoti sono quelli che non possono avere alcun contenuto. Per questi
elementi si utilizza un tag ‘vuoto’. Essi sono: area, base, br, col, command, embed, hr, img, input,
keygen,link, meta, param, source, track, wbr.

Per gli elementi vuoti, la chiusura del tag, obbligatoria in XHTML, è invece opzionale. Possiamo
dunque definire un tag <img> secondo le regole XHTML:

<img src="immagine.png" alt="testo" />

O seguendo la vecchie regole di HTML 4:

<img src="immagine.png" alt="testo">

3. Elementi provenienti da altri namespace: per questi elementi sono richiesti i tag
‘autochiudenti’. Si tratta degli elementi adottati da specifiche esterne, come SVG e MathML.

Maiuscolo, minuscolo
Una delle differenze principali rispetto alle regole XHTML riguarda l'uso del maiuscolo e del minuscolo
per definire un tag. In XHTML è obbligatorio usare il minuscolo. In HTML5 è consentito scrivere un tag
usando anche il maiuscolo:

<IMG src="immagine.png" alt="testo">

Casi particolari
Esistono alcune casistiche per le quali un tag classico può mancare della sua particella di apertura o di
chiusura; questo succede quando il browser è comunque in grado di determinare i limiti di operatività
dell’elemento. Gli esempi più eclatanti riguardano i tag ‘contenitori’, come head, body e html, che
possono essere omessi in toto a meno che non contengano un commento o del testo come istruzione
successiva. È quindi sintatticamente corretto scrivere un documento come segue:

<meta charset="utf-8">
<title>Pagina HTML5 Valida</title>
<p>Un paragrafo può non avere la particella di chiusura
<ol>
<li>e anche un elemento di lista
</ol>

Notiamo che, come mostrato nell’esempio, anche i tag p e li possono essere scritti omettendo la
particella di chiusura, a patto che l’elemento successivo sia all’interno di una cerchia di elementi
definita dalle specifiche. A fronte di queste opzioni di semplificazione è però errato pensare che la
pagina generata dal codice di cui sopra manchi, ad esempio, dell’elemento html; esso è infatti
dichiarato implicitamente ed inserito a runtime dallo user-agent.

Per un quadro dettagliato rimandiamo a questa sezione
(http://www.w3.org/TR/html5/syntax.html#optional-tags) delle specifiche.

Attributi
Anche rispetto alle definizione degli attributi HTML5 consente una libertà maggiore rispetto a XHTML,
segnando di fatto un ritorno alla filosofia di HTML 4. In sintesi: non è più obbligatorio racchiudere
i valori degli attributi tra virgolette.

I casi previsti nella specifica sono 4.

Attributi 'vuoti': non è necessario definire un valore per l'attributo, basta il nome, il valore si ricava
implicitamente dalla stringa vuota. Un caso da manuale:

Secondo le regole XHTML:
<input checked="checked" />

In HTML5:
<input checked>

Attributi senza virgolette: è perfettamente lecito in HTML5 definire un attributo senza racchiudere
il valore tra virgolette. Esempio:

<div class=testata>

Attributi con apostrofo: il valore di un attributo può essere racchiuso tra due apostrofi (termine più
corretto rispetto a 'virgoletta singola'). Esempio:

<div class='testata'>

Attributi con virgolette: per concludere, è possibile usare la sintassi che prevede l'uso delle
virgolette per racchiudere il valore di un attributo. Il codice:

<div class="testata">

Semplificazioni
In direzione della semplificazione vanno anche altre indicazioni. Ci soffermiamo su quelle riguardanti
due elementi fondamentali come style e script. La sintassi tipica di XHTML prevede la
specificazione di attributi accessori come type:

<style type="text/css"> regole CSS... </style>
<script type="text/javascript" src="script.js"> </script>

In HTML5 possiamo farne a meno, scrivendo dunque:

<style> regole CSS... </style>
<script src="script.js"> </script>

Conclusioni
Come abbiamo sperimentato, la sintassi HTML5 si caratterizza per una spiccata flessibilità e
semplicità di implementazione. Le osservazioni che abbiamo snocciolato in questa lezione sono
chiaramente valide a patto di implementare la serializzazione HTML; ricordiamo infatti che le
specifiche prevedono anche l’utilizzo di una sintassi XML attraverso l’uso delle istruzioni:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Infine, per una migliore leggibilità del codice sorgente, consigliamo di ricorrere il meno possibile
all’utilizzo di elementi impliciti, scrivendo sempre tutti i tag necessari nella loro forma completa.

Elementi disegnati per un web moderno

All’inizio erano tabelle; ricordiamo tutti bene il tedio provocato dal dover costruire strutture complesse

spezzandole all’interno di una griglia fatta da infiniti <tr> e <td>: un attività noiosa, resa ancora
peggiore dalla scarsa qualità e flessibilità del risultato. Poi arrivarono i <div> e fu una vera e propria
rivelazione; finalmente un modello di costruzione del documento pensato per separare in modo chiaro
i contenuti tipici di una pagina web. Grazie alla commistione tra questo elemento e i CSS nacquero
pagine con codici HTML eleganti e leggibili come:

<html>
<head>
</head>
<body>
<div id="header">
--- Titolo e Testata ---
</div>
<div id="body">
<div id="menu">
--- Voci di Menu ---
</div>
<div id="main_content">
<div class="post">
--- Un Post ---
</div>
<div class="post">
--- Un altro Post ---
</div>
</div>
</div>
</body>
</html>

All’interno di un costrutto come questo è tutto molto semplice da interpretare: basta seguire il flusso
dei rientri di pagina facendosi guidare dai valori semantici attribuiti a id e class.

Passarono anni e il modello cominciò a mostrare le sue prime debolezze; in primo luogo ci si accorse
che da un lato non vi era una regola collettiva e quello che per uno sviluppatore era ‘body’ per l’altro
poteva benissimo essere ‘corpo’; inoltre si realizzò che né il browser né tantomeno i motori di ricerca
avrebbero mai potuto beneficiare di questa divisione semantica, proprio per colpa di quell’arbitrarietà
che permetteva a milioni di siti web di essere organizzati in strutture simili ma sempre leggermente
diverse tra loro e per questo non raggruppabili secondo schemi automatici. Emerse in questo modo
uno dei più grandi problemi dell’HTML4: l’incapacità di descrivere il significato delle
informazioni di una pagina web in un formato interpretabile da altri software. In un mondo
sempre più caratterizzato dall’interconnessione e dall’aggregazione su base semantica dei contenuti ci
si adattò inventando e condividendo convenzioni studiate per rappresentare eventi di calendario,
persone e quant’altro; nacquero così diversi microformati, come ad esempio hRecipe
(http://microformats.org/wiki/hrecipe) per le ricette:

<span class="hrecipe">
<span class="fn">Tisana alla liquirizia</span>
<span class="ingredient">2 cucchiai di Zucchero</span>
<span class="ingredient">20g Radice di liquirizia</span>
<span class="yield">2</span>
<span class="instructions">

Scaldare un pentolino con 200cl d’acqua fino a 95°C;
versare la radice di liquirizia;
lasciar macerare per 7 minuti;
zuccherare e servire.
</span>
<span class="duration">
<span class="value-title" title="PT90M"></span> 90 min
</span>
</span>

L’HTML5 nasce per gestire ed incanalare tutte queste problematiche; nelle prossime lezioni
scopriremo come beneficiare di nuovi tag disegnati appositamente per le più comuni strutture di
contenuto e di attributi utilizzabili per definire ulteriore contenuto semantico alle pagine. Ma per
arrivare a questo prima serve fare un po’ di pulizia...

Elementi e attributi non più previsti nelle specifiche
Le specifiche HTML5 (http://dev.w3.org/html5/spec/Overview.html) sanciscono definitivamente la
fine di tutta una serie di elementi e attributi che mantengono validità formale solo per
preservare la retrocompatibilità di pagine datate ma sono espressamente vietati nella creazione di
nuovi documenti.

I primi a subire questo esilio sono tutti quei costrutti funzionali alla parte di presentazione e caduti
ampiamente in disuso con l’introduzione dei fogli di stile. Stiamo parlando di elementi come:
basefont, big,center, font, s, strike, tt e u.

Ad essi si aggiunge una moltitudine di attributi più o meno noti, tra i quali ricordiamo: align e
valign, background, bgcolor, cellpadding, border, cellspacing e molti altri. In realtà alcuni tra i
citati perdurano solamente su specifici elementi, per una lista completa ed esaustiva consigliamo di
visionare questa pagina del W3C (http://www.w3.org/TR/html5-diff/#absent-attributes) dedicata al
tema.

Interessante notare come si sia deciso invece di mantenere elementi come i e b; trasformandoli,
però, da modificatori tipografici a semplici indicatori di porzioni di testo particolari e
consentendone l’uso solo come ultima risorsa.

La falce della semplificazione si è successivamente abbattuta su un piccolo elenco di elementi
obsoleti: acronym (sostituibile dal più comune abbr), applet (rimpiazzato da object), isindex (già
arcaico in HTML4) e infine dir, sfavorito nel confronto con ul.

Cadono, infine, anche tutti i tag che gravitano intorno al concetto dei frame, ritenuti dannosi per
usabilità e accessibilità: frame, frameset e noframes.

E con questi ultimi si chiude la lista degli elementi soppressi; in loro onore terminiamo la lezione con
un piccolo snippet che li omaggi:

<center>
<font color="blue" size="2">
<big>Addio</big>,
<s>monti sorgenti dall'acque, ed elevati al cielo;
cime</s> elementi di markup inuguali,
noti a chi è cresciuto tra voi,

e impressi nella sua mente,
non meno che lo sia l'aspetto de' suoi più familiari.
</font>
Liberamente adattato da: <acronym title="I Promessi Sposi">IPS</acronym>

</center>

Attributi globali

Di attributi globali (quelli cioè che si possono applicare a tutti gli elementi HTML) ce ne sono
sempre stati: basti pensare al classico ‘id’, disponibile da sempre sulla totalità degli elementi.
HTML5 formalizza questa definizione e arricchisce lo sparuto gruppo con nuovi membri che, come
intuibile, possono essere applicati a un qualsiasi tag di queste specifiche. In questo capitolo
dedicheremo qualche paragrafo ad ognuno dei nuovi arrivati, alcuni dei quali, vedrete, sono
decisamente interessanti.

Modificare il contenuto di una pagina: contenteditable
TinyMCE, CKEditor e WYMeditor sono solo tre di una lunga lista di librerie studiate per offrire uno
strumento di editing testuale su web che superi le classiche textarea. I risultati sono già ad oggi
eccellenti, vicini a prodotti desktop come Microsoft Word, ma le soluzioni implementate fanno tutte
uso di escamotage più o meno furbi per ottenere questo livello di interazione in quanto l’HTML 4 non
prevede alcun modo esplicito di generare controlli del genere.

Durante la stesura delle specifiche HTML5 questo problema è stato affrontato e si è deciso di
sviluppare un approccio comune al rich-editing di un documento re-introducendo un set di specifiche
implementate in sordina da Microsoft (http://msdn.microsoft.com/en-
us/library/ms537837(VS.85).aspx) nella versione 5.5 di Internet Explorer. Questo lavoro ha portato
alla creazione di un nuovo attributo globale:contenteditable, che impostato a true su di un qualsiasi
elemento lo rende modificabile da browser; lo stesso destino subiscono tutti gli elementi in esso
contenuti a meno che non espongano un esplicitocontenteditable=false.

Ma... cosa significa esattamente modificabile da browser? Che tipo di feedback visivo ci si
dovrebbe aspettare? E come si comporterebbe il markup a fronte delle modifiche? Sfortunatamente
qui le specifiche non sono troppo chiare e sanciscono semplicemente che qualsiasi cosa venga
concessa all’utente il risultato deve comunque restare conforme all’HTML5: questa libertà operativa
ha prodotto comportamenti diversi da browser a browser; ad esempio c’è chi traduce il tasto invio
com un <br> e chi invece crea un nuovo paragrafo con <p>. Parallelamente è disponibile anche un set
di API utilissime (http://dev.w3.org/html5/spec/dnd.html%23execCommand) per insistere sulla zona
modificabile con comandi attivati dall’esterno, come ad esempio da una toolbar. Un pulsante che
volesse attivare/disattivare il grassetto sulla selezione corrente dovrebbe invocare la seguente
funzione:

document.execCommand('bold')

Prima di passare oltre sappiate che l’attributo contenteditable è stato applicato con valore true a
all’intera sezione precedente con l’esclusione di questo paragrafo, permettendovi così di editarla e
sperimentare l’interazione di questa nuova interessante caratteristica! (e se selezionate del testo e
cliccate qui (javascript:document.execCommand('bold');), potrete renderlo grassetto!).

Menu contestuali associati ad un elemento:
contextmenu
L’attributo globale contextmenu serve ad associare a un elemento un menu contestuale;
questa forma di interazione è poco comune sul web ma molto praticata sul desktop dove, ad esempio,
su di una cartella di sistema ci si aspetta di poter operare azioni quali ‘copia’, ‘elimina’ e ‘rinomina’.
Vediamo un esempio:

<img src="http://farm4.static.flickr.com/3623/3527155504_6a47fb4988_d.jpg"
contextmenu="image_menu">
<menu type="context" id="image_menu">
<command label="Modifica il contrasto" onclick="contrastDialog();">
<command label="Negativo" onclick="negativo();">
</menu>

Cliccando con il tasto destro del mouse sull’immagine il browser dovrebbe mostrare un menu
contenente le due azioni disponibili. Purtroppo ad oggi non esiste ancora nessuna implementazione
funzionante di questa feature, che resta al momento relegata a semplice specifica.

Lʼattributo data-*
L’HTML5 predispone la possibilità di associare ad ogni elemento che compone la pagina un numero
arbitrario di attributi il cui nome può essere definito dall’utente sulla base di esigenze personali, a
patto che venga mantenuto il suffisso ‘data-’; ad esempio:

<img id="ombra"
class="cane"
data-cane-razza="mastino corso”
data-cane-eta="5"
data-cane-colore="nero"
src="la_foto_del_mio_cane.jpg">

È inoltre interessante notare come queste informazioni, che arricchiscono e danno valore semantico
all’elemento, siano accessibili anche attraverso un comodo metodo Javascript:

alert("Ombra ha :" + document.getElementById("ombra").dataset.caneEta + " anni");

La fine del display:none in linea: hidden
L’attributo globale hidden è stato introdotto per offrire un’alternativa all’utilizzo del predicato
‘style="display:none"’ che ha subito una proliferazione incontrollata soprattutto a seguito della
diffusione di librerie Javascript come jQuery o Prototype. Un elemento marcato come hidden deve
essere considerato dallo user agent come non rilevante e quindi non visualizzato a schermo.

Spellcheck
La quasi totalità dei browser oggi in commercio contiene un motore di verifica della sintassi
grammaticale. Le specifiche HTML5 introducono un meccanismo per abilitare o disabilitare il
controllo della sintassi su porzioni della pagina modificabili dall’utente. L’attributo in questione si

chiama spellcheck e, quando impostato a true, ordina al browser di attivare il proprio correttore
sull’elemento corrente e su tutti i suoi figli.

Laddove invece non venga impostata nessuna preferenza, le specifiche prevedono che il browser
utilizzi un proprio comportamento di default.

Altri attributi globali
Ci sono un paio di altri attributi globali introdotti dalle specifiche e non trattati in questa sede,
draggable e aria-*; entrambi sottendono un discorso che si estende ben al di là della semplice
implementazione di markup e verranno trattati più avanti nella guida.

Ecco comunque la lista di tutti gli attributi globali previsti dalla specifica:

accesskey, class, contenteditable, contextmenu, dir, draggable
hidden, id, lang, spellcheck, style, tabindex, title

Tabella del supporto sui browser

Attributi globali

contenteditable 5.5+ 3.0+ 3.1+ 2.0+ 9.0+
contextmenu No No No No No
data-* No No 5.0+ 6.0+ No
draggable No 3.5+ 5.0+ 5.0+ No
hidden No 4.0+ Nightly build Nightly build Nightly build
spellcheck No 2.0+ No No No

Conclusioni
In questa lezione abbiamo appreso che la nuova configurazione di markup dell’HTML5 è stata studiata
per ovviare a tutti i problemi emersi in anni sviluppo di siti web e applicazioni con la precedente
versione delle specifiche. Nelle prossime lezione introdurremo il nuovo content model, pensato non
più nella forma binaria ‘block’ e ‘inline’ ma articolato in una serie di modelli di comportamento
complessi ed interessanti.

Un nuovo content model
Non più solo div
Ecco come si potrebbe codificare l’esempio della lezione precedente utilizzando i nuovi elementi messi
a disposizione dall’HTML5:

<!doctype html>
<html lang="it">
<head>
</head>
<body>

<header>
--- Titolo e Testata ---
</header>
<nav>
--- Voci di Menu ---
</nav>
<article>
--- Un Post ---
</article>
<article>
--- Un altro Post ---
</article>
</body>
</html>

Come si può notare, i tag introdotti hanno un nome in strettissima attinenza con il proprio
contenuto; questo approccio risolve in modo elegante sia il problema dell’utilizzo dell’attributo class
con valore semantico, sia la riconoscibilità delle singole aree del documento da parte di un browser.
Ma non è tutto; l’introduzione di article, nav, header e altri tag che vedremo, impone anche
sostanziose novità al modo in cui lo user-agent deve comportarsi nell’interpretare questi elementi.

Contenuti in una bolla di sapone
Partiamo dal seguente esempio HTML4:

<html>
<body>
<h1>I diari di viaggio:</h1>
<h2>A spasso per il mondo alla scoperta di nuove culture:</h2>
<h3>Giro turistico della Bretagna</h3>
<p>lorem ipsum..</p>
<h3>Alla scoperta del Kenya</h3>
<h3>Cracovia e la Polonia misteriosa</h3>
<p>tutti i viaggi sono completi di informazioni su alberghi e prezzi</p>
</body>
</html>

Se lo visualizziamo avremo un risultato assolutamente strutturato come questo:

Figura 3 (click per ingrandire) - Struttura del documento

(http://www.html.it/guide/esempi/html5/imgs/lezione_5/immagine_1.png)

Supponiamo ora di voler dividere i viaggi per continente. Con il modello attuale saremmo obbligati a
cambiare l’elemento h3 in h4 in modo da fare spazio alla nuova suddivisione:

<html>
<body>
<h3>Europa</h3>
<h3>Africa</h3>
</body>
</html>

Questo accade perché la gerarchia delle intestazioni è assoluta rispetto all’intero documento e ogni
tag <h*> è tenuto a rispettarla. Nella maggior parte dei casi però questo comportamento è fastidioso
in quanto è molto comune avere a che fare con contenuti che, come articoli o commenti, vorremmo
avessero una struttura indipendente dalla loro posizione nella pagina. In HTML5 questo è stato reso
possibile definendo una nuova tipologia di content model, chiamato ‘sectioning content’, al quale
appartengono elementi come article e section. All’interno di tag come quelli appena citati la vita
scorre come in una bolla di sapone, quindi l’utilizzo di un <h1> è considerato relativo alla sezione in
cui si trova.

Riprendiamo l’esempio precedente ed interpretiamolo in salsa HTML5:

<!doctype html>
<html>
<head>
<title>I diari di viaggio</title>
</head>
<body>
<header>
<hgroup>
</hgroup>
</header>
<section>
<h1>Europa</h1>
<article>
</article>
<article>
</article>
</section>
<section>
<h1>Africa</h1>
<article>
</article>
</section>
</body>
</html>

Molto meglio! Ora i singoli componenti di questo documento sono atomici e possono essere spostati
all’interno della pagina senza dover cambiare la loro struttura interna. Inoltre, grazie a queste
divisioni, il browser riesce a discernere perfettamente il fatto che l’ultimo paragrafo non appartenga al
testo del viaggio in Kenia.

Diamo prova dell’atomicità creando un blocco dedicato all’ultimo articolo inserito: ‘Un week-end a
Barcellona’:

<!doctype html>
<html>
<head>
<title>I diari di viaggio</title>
</head>
<body>

<header>
<hgroup>
</hgroup>
</header>
<article>
<h1>Un week-end a Barcellona</h1>
</article>



Anche grazie a questo content model l’HTML5 introduce un nuovo e preciso algoritmo per il calcolo
dell’outline del documento. La vista ad outline, tipica nei software di word processing e ancora non
presente nei browser, è utilissima nella navigazione dei contenuti di una pagina. Sperimentiamo
questa feature installando un’apposita estensione per Chromium
(https://chrome.google.com/extensions/detail/afoibpobokebhgfnknfndkgemglggomo):

Figura 4 (click per ingrandire) - Vista ad outline del documento


È interessante notare come l’algoritmo non solo identifichi correttamente i vari livelli di profondità, ma
per ognuno di essi sappia anche recuperare il titolo adeguato. Nell’HTML5 è vitale che il design della
pagina si rispecchi in una outline ordinata e coerente, questa infatti è la miglior cartina tornasole
possibile in merito al corretto utilizzo delle specifiche: ad esempio, in una prima revisione della
lezione, il codice HTML precedente mancava dell’elemento hgroup, utile a raggruppare elementi che
concorrono a formare un titolo. L’errore è stato individuato e corretto proprio grazie alla
visualizzazione di una outline errata:

Figura 5 (click per ingrandire) - Strutturazione corretta del documento

Concludiamo la trattazione di questo content model citando la presenza di alcuni elementi che, pur
seguendo le linee interpretative del 'sectioning content', devono essere ignorati dall'algoritmo di
outline. Tali tag sono definiti 'sectioning roots' ed il motivo della loro esclusione è legato al fatto che
essi non concorrono tanto alla struttura dei contenuti della pagina quanto all'arricchimento della
stessa. Fanno parte di questo elenco elementi come: blockquote, details, fieldset, figure e td.
Seppur esclusi dall'outline del documento, nulla vieta agli appartenenti di questo gruppo di avere una
propria outline interna.

Panoramica sui content model e presentazione del primo
progetto guida

Lo scopo di questa lezione è duplice: da un lato riallacciarsi al tema del sectioning content per offrire
una visione di ampio respiro in merito alle differenti tipologie di disposizione di contenuto offerte
dall'HTML5, dall'altro iniziare la stesura del primo progetto guida.

Una panoramica completa
Esistono altri content model oltre a quelli trattati nella lezione precedente, alcuni implicitamente
presenti anche nelle vecchie specifiche, altri nuovi di zecca, per una rappresentazione grafica rimando
all'ottima infografica (http://www.whatwg.org/specs/web-apps/current-work/multipage/content-
models.html#kinds-of-content) dello stesso W3C, fra l'altro realizzata usando la sintassi SVG (provate
a scorrere il mouse sopra le varie aree dell'insieme).

Metadata content

Fanno parte di questa categoria tutti gli elementi utili alla definizione del documento nel suo
insieme: a livello di presentazione o di funzionamento.

Tag: base, command, link, meta, noscript, script, style, title.

Sectioning content

Ne abbiamo appena parlato: il gruppo contiene tutti quegli elementi studiati per ospitare
contenuti atomici e semanticamente ordinati. È importante utilizzare almeno un appartenente
alla categoria heading content all’interno di ognuno di questi tag, questo anche per non avere un
outline popolato da voci senza titolo (vedi immagine).

Tag: article, aside, nav, section.

Figura 6 (click per ingrandire) - Visualizzazione della struttura del documento


Heading content

Tutti gli appartenenti a questo gruppo servono per definire titoli. Interessante notare come se la
presenza di uno di questi elementi non sia associata ad un sectioning content questo venga definito
implicitamente.

Tag: h1, h2, h3, h4, h5, h6, hgroup

Phrasing content

Incorpora il testo del documento così come tutti i modificatori tipografici e visuali dello stesso.

Tag: a (solo se contiene phrasing content a sua volta), abbr, area (se figlio di un elemento map),
audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (solo se contiene
phrasing content a sua volta), dfn, em, embed, i, iframe, img, input, ins (solo se contiene phrasing
content a sua volta), kbd, keygen, label, map (solo se contiene phrasing content a sua volta), mark,
math, meter,noscript, object, output, progress, q, ruby, s, samp, script, select, small, span,
strong, sub, sup, svg, textarea, time, var, video, wbr.

Embedded content

Ne fanno parte tutti quegli elementi che, come il nome del gruppo suggerisce, incorporano nella
pagina oggetti esterni.

Tag: audio, canvas, embed, iframe, img, math, object, svg, video.

Interactive content

Questa categoria comprende tutto ciò specificatamente studiato per interagire con l’utente.

Tag: a, audio (con l’attributo controls presente), button, details, embed, iframe, img (con
l’attributo usemap presente), input (con l’attributo type diverso da hidden), keygen, label, menu
(con l’attributotype="toolbar"), object (con l’attributo usemap presente), select, textarea, video
(i con l’attributo controls presente).

Come avrete notato ogni elemento può appartenere ad uno o più content models, anche a seconda
della sua configurazione degli attributi. Oltre ai gruppi citati, che sono i principali, va ricordato flow,
che raggruppa la quasi totalità degli elementi e alcuni gruppi creati specificatamente per i controlli dei
form, che vedremo più avanti.

Progetto guida - nel tag HEAD
Cogliamo l’occasione di questa panoramica alla struttura dell’HTML5 per gettare le prime fondamenta
del progetto guida: in questo capitolo vedremo come impostare e strutturare il contenitore della
pagina ed il tag head. Creiamo un file index.html ed iniziamo ad inserire i primi elementi:

<!doctype html>
<html lang="it">
<head>
<title>We5! Il blog della guida HTML5</title>
</head>
</html>

Fin qui, eccezion fatta per il doctype, nessuna differenza rispetto alla versione 4 delle specifiche;
andiamo avanti aggiungendo alcuni tag meta e link:

...
<head>
<title>We5! Il blog della guida HTML5</title>
<link rel="stylesheet" href="monitor.css" media="screen">
<link rel="stylesheet" href="printer.css" media="print">
<link rel="stylesheet" href="phone_landscape.css" media="screen and (max-device-widt
h: 480px) and (orientation: landscape)">
<link rel="stylesheet" href="phone_portrait.css"
media="screen and (max-device-width: 480px) and (orientation: portrait)">
</head>
...

Incuriositi dalla strana sintassi degli attributi media degli ultimi due <link>? State osservando una
tipica media query: il CSS viene interpretato solamente se le condizioni dell’espressione sono valutate
come vere dallo user agent. Le media query, profetizzate già nel 1999, consentono di identificare il
corretto CSS per un dato device con un incredibile livello di dettaglio, alcuni esempi:


<link rel="stylesheet" href="progressive.css" media="tv and (scan: progressive)">

<link rel="stylesheet" href="printer.css" media="print and (min-resolution: 1000dpi)">


<link rel="stylesheet" href="retina.css" media="screen and (-webkit-min-device-pixel-

ratio: 2)">

<link rel="stylesheet" href="mono.css" media="screen and (monochrome)">

Bene, completiamo questo capitolo aggiungendo icone e charset:

<head>

<link rel="icon" href="standard.gif" sizes="16x16" type="image/gif">
<link rel="icon" href="iphone.png" sizes="57x57" type="image/png">
<link rel="icon" href="vector.svg" sizes="any" type="image/svg+xml">
</head>

Come potete notare è ora possibile specificare un attributo sizes per ogni icona, in questo modo lo
user agent può liberamente scegliere quale icona abbia le dimensioni più adatte. Ci sono due motivi
che giustificano l’inserimento della direttiva ‘charset’ in questo progetto: in primo luogo la nuova
sintassi è molto più succinta della passata, seppur ancora valida:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

In seconda istanza è intenzione dell’autore sottolineare come sussistano reali rischi di sicurezza legati
all’assenza di questa direttiva.

Dalla prossima lezione analizzeremo nel dettaglio i singoli elementi che concorrono alla costituzione
della nuova impalcatura semantica del linguaggio.

Header
Funzioni e dati tecnici
Il tag header serve a rappresentare "un gruppo di ausili introduttivi o di navigazione". Tale
definizione, seppure apparentemente vaga, contiene in sé i concetti chiave per comprendere appieno
la funzione di questo tag:

1. L'elemento <header> è un contenitore per altri elementi.
2. L'elemento <header> non va confuso con quella che è la testata/intestazione principale di un
documento (quella che oggi si definisce in genere con il tag <h1>).
3. La natura e gli scopi dell'elemento <header> non dipendono dalla sua posizione nel documento,
ma dai suoi contenuti (ausili alla navigazione o elementi introduttivi).
4. Il suo uso non è obbligatorio e in alcuni casi può risultare superfluo se non utilizzato in maniera
appropriata.

<header>
<h1>Questo è un titolo</h1>
<h2>Questo è un sotto-titolo</h2>
[...]

</header>

Header: esempi concreti
Riprendendo il nostro progetto guida, dove nella lezione precedente
(http://xhtml.html.it/guide/lezione/4966/panoramica-sui-content-model-e-presentazione-del-primo-
progetto-guida/) abbiamo definito il contenuto dell'<head>:

<head>

<title> We5! Il blog della guida HTML5 </title>

<link rel="stylesheet" href="monitor.css" media="screen">
<link rel="stylesheet" href="printer.css" media="print">
<link rel="stylesheet" href="phone_landscape.css"
media="screen and (max-device-width: 480px) and (orientation: landscape)">
<link rel="stylesheet" href="phone_portrait.css"
media="screen and (max-device-width: 480px) and (orientation: portrait)">

<link rel="icon" href="standard.gif" sizes="16x16" type="image/gif">
<link rel="apple-touch-icon" href="iphone.png" sizes="57x57" type="image/png">
<link rel="icon" href="vector.svg" sizes="any" type="image/svg+xml">
</head>

A questo punto possiamo iniziare a comporre il <body> del nostro documento partendo proprio con il
tag <header>, che con l'elemento <hgroup> (http://xhtml.html.it/guide/lezione/4973/hgroup/)
definisce il titolo principale del documento (del sito) e la cosiddetta tagline:

<header>
<hgroup>
<h1>We5! Il blog della guida HTML5</h1>
<h2>Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5!</h2>
</hgroup>
</header>

Ma header non deve contenere necessariamente solo titoli <hn]]>! Se titolo e sottotitolo principali
sono certamente elementi introduttivi ai contenuti successivi, è naturalmente un ausilio di
navigazione una lista di link che andrà a formare la barra di navigazione principale del sito. Ecco come
possiamo completare la struttura del nostro primo <header>:

<header>
<hgroup>
</hgroup>
<nav>

<h1>Navigazione:</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">Gli autori</a></li>
<li><a href="/refactoring">Il progetto four2five</a></li>
<li><a href="/archives">Archivio</a></li>
</ul>
</nav>
</header>

Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresenta
nel nostro progetto:

Figura 8 - Struttura del documento: primo header

Abbiamo inserito una sezione di navigazione (http://xhtml.html.it/guide/lezione/4971/nav/) (<nav>
</nav>) introdotta da un elemento <h1> e strutturata con una lista non ordinata.

In realtà, il menu di navigazione non deve essere necessariamente inserito nell'<header>, nel nostro
esempio non poteva essere fatto altrimenti ma esistono numerosi tipi di layout in cui il menu di
navigazione può essere facilmente slegato dagli elementi introduttivi di intestazione del documento.

Il template del nostro progetto guida, lo accennavamo nelle precedenti lezioni, è relativo ad un blog.
Nel corpo del documento, ad un certo punto, trova posto una sezione che ospita i contenuti principali
della pagina, i post. Per definire semanticamente la sezione useremo il tag <section>
(http://xhtml.html.it/guide_preview/lezione/4969/section/); ciascun post sarà definito a livello
strutturale da un tag <article>(http://xhtml.html.it/guide_preview/lezione/4970/article/):

<section>
<h1>L'ultimo post</h1>
<article>
[...]
</article>
</section>

Si noti, innanzitutto, come il tag <h1> che fa da titolo principale alla sezione non sia racchiuso in un
elemento <header>. Ribadiamo: non è obbligatorio inserire i titoli <hn]]> all'interno di un
contenitore<header>.

A questo punto, dobbiamo definire due elementi fondamentali per la struttura di un post di blog: il
titolo e la data. Sono certamente ausili introduttivi, secondo la definizione da cui siamo partiti. é più
che legittimo e sensato, pertanto, racchiuderli in un tag <header>:

<section>
<article>
<header>
<time datetime="2010-11-22" pubdate>Lunedì 22 Novembre</time>
<h2>Nuove scoperte sul tag video!</h2>
</header>
<p>
[...]
</p>
</footer>
[...]
</footer>
</article>
</section>

Ecco quindi come il nostro articolo potrebbe essere rappresentato graficamente:

Figura 9 - Struttura del documento: header degli articoli

I due scenari mostrati rendono bene l'idea rispetto agli utilizzi tipici dell'elemento <header>. La
specifica suggerisce come altri contesti d'uso la tavola dei contenuti di una sezione, un form di ricerca
o i loghi più rilevanti presenti nel documento.

Nella prossima lezione capiremo come utilizzare l'elemento <footer> e quale è la sua rilevanza
semantica all'interno di un template.


Nuovi tag semantici e strutturali

<header> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Footer
L'elemento <footer> deve contenere in genere informazioni sulla sezione che lo contiene come:

i dati di chi ha scritto i contenuti;
collegamenti ai documenti correlati;
i dati di copyright;
e così via...

Riguardo il suo apporto semantico ad una pagina web sembra essere tutto chiaro, ma più complesso
è il suo utilizzo a livello pratico:

Non necessariamente deve essere inserito solo alla fine di un documento.
Quando contiene intere sezioni, esse rappresentano: appendici, indici, note, accordi di licenza e
altri contenuti del genere.
Non introduce una nuova sezione e quindi non è rilevante per l'outliner
(http://it.wikipedia.org/wiki/Outliner).
All'interno di una pagina web possono essere presenti diversi <footer> anche più di uno per lo
stesso elemento.

<footer>
<small>©2011 Autore contenuto. Design by Designer sito </small>
</footer>

Footer: esempi concreti
Riprendendo il nostro progetto guida, dopo aver definito definito il contenuto dell'<header>
(http://xhtml.html.it/guide/lezione/4967/header/), possiamo vedere come il <footer> chiuda il blog
distaccandosi dalle altre sezioni in modo molto naturale, racchiudendo al proprio interno una lista che
aggiunge informazioni riguardo l'autore della pagina e la data del suo ultimo aggiornamento; infine il
tag <small>ridefinito nella specifica dell'HTML 5 (http://www.whatwg.org/specs/web-apps/current-
work/multipage/text-level-semantics.html#the-small-element) racchiude il copyright della pagina:

<footer>
<dl>
<dt>Creato da</dt>
<dd><address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganotti</a></add
ress></dd>
<dt>Ultimo aggiornamento</dt>
<dd><time datetime="2010-11-23" pubdate>Martedì 23 Novembre</time></dd>
<dd>
</dl>
<small>Tutti i contenuti sono prottetti dalla licenza creative commons</small>
</footer>

nel nostro progetto (figura 1):

Figura 10 - Struttura del documento: il footer principale

schema template html5 [footer]

Così come l'intero documento, ogni articolo del nostro blog avrà un <footer> contenente il nome
dell'autore ed altre eventuali informazioni aggiuntive:

<section>
<article>
<header>
[...]
</header>
<p>
[...]
</p>
<footer>
<dl>
<dt>autore:</dt>
<dd><address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganotti</a>
</address></dd>
<dt>categoria: </dt>
<dd><a href="categoria/multimedia">multimedia</a>,</dd>
<dt>tags: </dt>
<dd><a href="tags/video">video</a>,</dd>
<dd><a href="tags/canvas">canvas</a>,</dd>
<dt>permalink: </dt>
<dd><a href="2010/22/11/nuove-scoperte-sul-tag-video">permalink</a>,</dd>
<dt>rank:</dt>
<dd><meter value="3.0" min="0.0" max="5.0" optimum="5.0">ranked 3/5</meter></
dd>
</dl>
</footer>

</article>
</section>

È da notare la scelta di inserire le informazioni riguardanti l'autore dell'articolo all'interno del tag
<dl>; infatti nella specifica HTML5 questo elemento viene ridefinito come contenitore di metadati e
quindi semanticamente corretto all'interno del nostro <footer>.

Ecco quindi come il nostro articolo potrebbe essere rappresentato graficamente, tutte le informazioni
contenute nel <footer> per comodità abbiamo deciso di chiamarle metadati:

Figura 11 - Struttura del documento: footer degli articoli

L'elemento <footer> potrebbe essere inserito anche all'inizio di un documento subito dopo il <body>
oppure all'apertura di un tag <article> (http://xhtml.html.it/guide_preview/lezione/4970/article/)
ma in questi casi non dovrebbe contenere elementi introduttivi riguardo il contenuto della sezione che
lo contiene; il suo uso in questa posizione potrebbe essere dovuto solamente a ragioni pratiche come
ad esempio la duplicazione del <footer> in fondo alla pagina quando i contenuti della stessa sono
molto lunghi:

<body>
<footer>
<a href="#indice">Torna all'indice</a>
</footer>
<section>
[Contenuti molto lunghi...]
<section>
<section>
<section>
<section>

<section>
<footer>
<a href="#indice">Torna all'indice</a>
</footer>
</body>

Nella prossima lezione parleremo del tag <section> e della sua importanza nel sezionare la pagina in
blocchi semanticamente distinti.



<footer> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Section
Il tag <section>, secondo la definizione presente nella specifica HTML5, rappresenta una sezione
generica di un documento o applicazione. L'elemento <section>, in questo contesto, individua
un raggruppamento tematico di contenuti,ed in genere contiene un titolo introduttivo.

Vediamo quindi quali sono i punti fondamentali da ricordare riguardo il suo utilizzo:

1. l'elemento <section> non deve essere utilizzato in sostituzione del <div> per impostare
graficamente la pagina; inoltre è fortemente consigliato utilizzare i <div> anche quando
risultano più convenienti per gli script;
2. l'elemento <section> non deve essere preferito all'elemento <article> quando i contenuti
possono essere ripubblicati anche su altri siti;
3. l'elemento <section> e l'elemento <article> non sono indipendenti ed esclusivi: possiamo
avere sia un <article> all interno di un <section> che viceversa.

<article>
<section>
<h1>Titolo 1</h1>
<p>Testo correlato al titolo 1.</p>
</section>
<section>
<h1>Titolo 2</h1>
<p>Testo correlato al titolo 2.</p>
</section>
</article>

L'elemento <section> può essere utilizzato in combinazione con l'attributo cite attraverso il quale è
possibile specificare l'url dalla quale si stanno riportando i contenuti.

Section: esempi concreti
Come abbiamo visto nei capitoli precedenti, il codice del nostro progetto inizia a prendere una forma
più chiara e definita: infatti, dopo aver compreso l'utilità semantica
dell'<header>(http://xhtml.html.it/guide_preview/lezione/4967/header/) e del <footer>
(http://xhtml.html.it/guide_preview/lezione/4968/footer/), capiamo come utilizzare l'elemento
<section> all'interno del nostro blog.

Per strutturare la pagina raggruppando i contenuti correlati, in ordine decrescente incontriamo le
prime due grandi macrosezioni del blog: "l'ultimo post" e "i post meno recenti" contenuti quindi in
due<section>:

<section>
<article>
[contenuto del post...]
<section>
[commenti...]
</section>
</article>
</section>
<section>
<h1>Post meno recenti</h1>
<article>
</article>
<article>
</article>
<article>
</article>
</section>


Figura 12 - Struttura del documento: sezioni principali

Nel nostro progetto le <section>, oltre a poter raggruppare i vari <article>
(http://xhtml.html.it/guide_preview/lezione/4970/article/), sono presenti anche all'interno del primo
<article> per suddividere i commenti dal contenuto del post. La sezione dei commenti a sua volta
contiene un'altra sezione contenente il form per l'inserimento di un nuovo commento:

<article>
<section>
<article>
[commento1...]
</article>
<article>
[commento2...]
</article>
<article>
[commento3...]
</article>
<section>
[Inserisci un nuovo commento...]
</section>
</section>
</section>
</article>

In questo modo il post è diviso in maniera molto netta rispetto ai propri contenuti solo con l'ausilio dei
tag HTML5, separando quindi i commenti che sono una sezione aggiuntiva eventualmente anche
eliminabile dall'argomento principale trattato all'interno dell'articolo.

Lo schema dell'articolo analizzato è quindi il seguente:

Figura 13 - Struttura del documento: suddivisione semantica del post

Il tag <section> rappresenta un elemento che viene considerato una sezione a sé stante dall'outliner
(http://it.wikipedia.org/wiki/Outliner) e quindi un blocco con dei contenuti univoci che necessitano di
un titolo (<hN>) che li riassuma. Come vedremo nelle prossime lezioni esistono anche altri elementi
nelle specifiche HTML5 che sono considerati "contenitori di sezionamento dei contenuti"
(http://xhtml.html.it/guide_preview/lezione/4965/un-nuovo-content-model/).



<section> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Article
Il tag <article> rappresenta una sezione autonoma in un documento, pagina, applicazione o
sito; infatti è potenzialmente ridistribuibile o riutilizzabile, e quindi ripubblicabile in parte o
interamente in diverse pagine.

Esso può identificare il post di un forum, un articolo di una rivista o di un giornale, l'articolo di un
blog, un commento, un widget interattivo, o qualsiasi cosa che abbia un contenuto indipendente.

Prima di vedere un esempio concreto bisogna chiarire alcuni concetti riguardo il suo utilizzo:

1. quando gli elementi <article> sono nidificati, gli <article> interni rappresentano gli articoli
che sono in linea di principio relativi al contenuto dell'<article> esterno. Ad esempio, un blog
che accetta commenti dagli utenti potrebbe rappresentarli come <article> figli annidati
all'interno dell'elemento padre <article>;
2. le informazioni relative all'autore dell'<article> non devono essere replicate all'interno degli
elementi nidificati all'interno dello stesso;
3. l'elemento <time> con l'attributo pubdate può essere utilizzato per definire la data di
pubblicazione dell'<article>;
4. l'elemento <section> e l'elemento <article> non sono indipendenti ed esclusivi: possiamo
avere sia un <article> all interno di un <section> che viceversa.

<article>
<header>
<h1>Titolo articolo</h1>
<time pubdate datetime="2011-10-09T14:28-08:00"></time></p>
</header>
<p>Contenuto dell'articolo</p>
<footer>
<p>Informazioni riguardo l'autore</p>
</footer>
</article>

In sostanza, anche se nelle specifiche non è espresso, l'elemento <article> rappresenta una forma
particolare di <section> (http://xhtml.html.it/guide_preview/lezione/4969/section/).

Article: esempi concreti
Nella lezione precedente abbiamo diviso i contenuti centrali del blog che stiamo costruendo in due
<section>. All'interno della prima <section> possiamo trovare diversi tag <article>: il primo che
incontriamo è l'articolo vero e proprio con tanto di <header>
(http://xhtml.html.it/guide_preview/lezione/4967/header/) contenente il titolo dell'articolo e la data
di pubblicazione e <footer> che all'interno di un <dl> raccoglie i metadati riguardanti l'autore.

All'interno dell'<article> padre sono annidati ulteriori <article> contenenti i commenti all'articolo
racchiusi in una <section> che li rende semanticamente separati dal contenuto principale. Così come
i commenti, anche il form che permette di inserire un'ulteriore commento è inserito all'interno di una
<section>. Possiamo quindi facilmente immaginare come il contenuto del nostro <article> possa
essere citato o ripubblicato in altri blog indipendentemente dai commenti che ha ricevuto.

Ecco quindi il codice dell'<article> sopra descritto:

<section>
<h1>L'ultimo post</h1><article>
<header>
<h2>Nuove scoperte sul tag video!</h2>
</header>

<p>
Attraverso un utilizzo sapiente del tag canvas è possibile leggere uno stream
di dati proveniente da un tag video e <mark>manipolarlo in tempo reale</mark>.
</p>
<footer>
<dl>
<dt>autore: </dt>
<dd><address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganott
i</a></address></dd>
<dt>categoria: </dt>
<dd><a href="categoria/multimedia">multimedia</a>,</dd>

<dt>tags: </dt>
<dd><a href="tags/video">video</a>,</dd>
<dd><a href="tags/canvas">canvas</a>,</dd>
<dt>permalink: </dt>
<dd><a href="2010/22/11/nuove-scoperte-sul-tag-video">permalink</a>,</dd
>
<dt>rank:</dt>
<dd><meter value="3.0" min="0.0" max="5.0" optimum="5.0">ranked 3/5</met
er></dd>
</dl>
</footer>
<section>
<h3>Commenti</h3>
<article>
<h4>
Angelo Imbelli ha scritto:
</h4>
<p>C'è un bell'esempio sulla rete: effetto ambi-light!</p>
<footer>
<address><a href="mailto:ambelli@mbell.it">Angelo Imbelli</a></addre
ss>
</footer>
</article>
<article>
<h4>
<time datetime="2010-11-23" pubdate>Martedì 23 Novembre</time>
Sandro Paganotti ha scritto:
</h4>
<p>Bellissimo! Grazie per la segnalazione!</p>
<footer>
<address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganott
i</a></address>
</footer>
</article>
<section>
<h4>Inserisci un nuovo commento:</h4>
<form>
[ campi form per inserire un nuovo commento]
</form>

</section>
</section>

</article>
</section>

Nel seguente schema abbiamo realizzato graficamente come si presenta il nostro articolo
morfologicamente:

Figura 14 - Struttura del documento: suddivisione semantica degli articoli

C'è da notare che anche se il tag <article> rappresenta un elemento che viene considerato una
sezione a sé stante dall'outliner (http://it.wikipedia.org/wiki/Outliner) e quindi un blocco con dei
contenuti unici e un titolo univoco (quindi per ogni blocco avremmo potuto utilizzare un titolo
racchiuso in un <h1>), abbiamo preferito rispettare comunque l'ordine decrescente per i titoli in modo
da rendere i contenuti accessibili anche agli screen reader che al momento non hanno ancora
implementato l'algoritmo outliner.

Nella prossima lezione parleremo del tag <nav> e della sua fondamentale importanza all'interno di
una pagina in HTML5.



<article> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Nav
Il tag <nav> è uno degli elementi introdotti nelle specifiche HTML5 di più facile comprensione.
Infatti, rappresenta una sezione di una pagina che contiene link (collegamenti) ad altre pagine o
a parti interne dello stesso documento; quindi, in breve, una sezione contenente link di
navigazione.

A questo punto potremmo potremmo porci una domanda: come mai un elemento così scontatamente
fondamentale è stato introdotto solamente adesso? La risposta potrebbe essere che, così come per i
tag visti nelle precedenti lezioni, finalmente si è cercato di incentivare l'uso di standard condivisi
proponendo elementi che possano aiutare gli sviluppatori proprio perché molto vicini ai modelli
mentali oramai assimilati dagli esperti e di semplice comprensione per i novizi del mestiere.

Per poter utilizzare correttamente l'elemento <nav> dobbiamo ricordare i seguenti punti:

1. solo sezioni che sono costituite da grandi blocchi di navigazione sono appropriati per
l'elemento <nav>;
2. i link a pie' di pagina e le breadcumb non devono essere inseriti in una sezione <nav>;
3. l'elemento <nav> non sostituisce i link inseriti in elementi come gli <ul> o gli <ol> ma deve
racchiuderli.

<nav>
<ul>
<li>Questo è un link</li>
[...]
</ul>
</nav>

Nav: esempi concreti
Prima di spiegare in che modo l'elemento <nav> può essere inserito nel progetto che abbiamo preso
come base, riassumiamo brevemente i tag spiegati nelle lezioni precedenti:

Con l'elemento <header> (http://xhtml.html.it/guide_preview/lezione/4967/header/) abbiamo
indicato il titolo introduttivo del blog più i titoli dei singoli articoli.
Con il <footer> (http://xhtml.html.it/guide_preview/lezione/4968/footer/) abbiamo racchiuso
le informazioni relative agli autori dei contenuti, i metadati e il copyright.
Con l'elemento <section> (http://xhtml.html.it/guide_preview/lezione/4969/section/) abbiamo
strutturato la parte centrale della pagina dividendola in due sezioni semanticamente distinte.
Infine abbiamo utilizzato <article> (http://xhtml.html.it/guide_preview/lezione/4970/article/)
per racchiudere i contenuti degli articoli.

A questo punto non possiamo che inserire i link presenti nell'<header> all'interno del tag <nav>:

<header>
<hgroup>
</hgroup>
<nav>
<h1>Navigazione:</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">Gli autori</a></li>
<li><a href="/refactoring">Il progetto four2five</a></li>
<li><a href="/archives">Archivio</a></li>
</ul>
</nav>
</header>

Da notare la presenza del titolo <h1> che serve a specificare più dettagliatamente la funzione del
nostro blocco di link e a conferirgli un titolo valido anche per l'outliner. Il tag <nav>, infatti,
rappresenta un elemento che viene considerato una sezione a sé stante dall'outliner
(http://it.wikipedia.org/wiki/Outliner) e quindi un blocco con dei contenuti univoci che necessitano di
un titolo che li riassuma.


Figira 15 - Struttura del documento: visualizzazione grafica del tag nav

In realtà (come già specificato nel paragrafo <header>) il menu di navigazione non deve essere
necessariamente inserito nel <header>, nel nostro esempio non poteva essere fatto altrimenti ma

esistono numerosi tipi di layout in cui il menu di navigazione può essere facilmente slegato dagli
elementi introduttivi di intestazione del documento.

Nel nostro esempio l'elemento <nav> è presente anche nella colonna laterale del blog (<aside>) e
racchiude un menu che ha come link le categorie nelle quali sono inseriti i vari articoli:

<aside>
<h1>Sidebar</h1>
<section>
<h2>Ricerca nel form:</h2>
<form>
[form di ricerca dei contenuti...]
</form>
</section>
<nav>
<h2>Categorie</h2>
<ul>
<li><a href="/categoria/multimedia">multimedia</a></li>
<li><a href="/categoria/text">marcatori testuali</a></li>
<li><a href="/categoria/form">forms</a></li>
</ul>
</nav>
</aside>

Per comprendere quale è la funzione dell'elemento <aside> che contiene il menu laterale non ci resta
quindi che leggere la prossima lezione.



<nav> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Aside
L'elemento <aside> rappresenta una sezione di una pagina costituita da informazioni che sono
marginalmente correlate al contenuto dell'elemento padre che la contiene, e che potrebbero
essere considerate distinte da quest'ultimo. Questo è ciò che viene indicato nelle specifiche HTML5,
ma è facile immaginare l'utilità del tag <aside> semplicemente pensandolo come un contenitore di
approfondimentoin cui possiamo inserire gruppi di link, pubblicità, bookmark e così via.

<aside>
<h1>Questi sono dei contenuti di approfondimento marginali rispetto al contenuto pri
ncipale</h1>
<nav>
<h2>Link a pagine correlate al contenuto</h2>
<ul>

<li>Informazione correlata al contenuto</li>
</ul>
</nav>
<section>
<h2>Pubblicità</h2>
[immagini pubblicitarie]
<section>
</aside>

Aside: esempi concreti
Ritornando al nostro progetto guida, dopo aver definito il contenuto dell'elemento <nav>, possiamo
analizzare la parte di codice in cui abbiamo utilizzato il tag <aside>:

<aside>
<h1>Sidebar</h1>
<section>
<h2>Ricerca nel form:</h2>
<form name="ricerca" method="post" action="/search">
<label> Parola chiave:
<input type="search" autocomplete="on" placeholder="article, section, ..." name
="keyword" required maxleng
th="50">
</label>
<input type="submit" value="ricerca">
</form>
</section>
<nav>
<h2>Categorie</h2>
<ul>
<li><a href="/categoria/multimedia">multimedia</a></li>
<li><a href="/categoria/text">marcatori testuali</a></li>
<li><a href="/categoria/form">forms</a></li>
</ul>
</nav>
</aside>


Figura 16 - Struttura del documento: visualizzazione grafica del tag aside

Come possiamo notare, il form per la ricerca di parole chiave e i link alle categorie presenti nel nostro
blog non sono informazioni particolarmente rilevanti per il contenuto centrale della nostra pagina,
pertanto possiamo facilmente separarli con l'elemento <aside> che li qualifica come contenuti
marginali.

Nel nostro caso abbiamo utilizzato un <aside> per contenere la colonna sinistra del blog, ma in
realtà, visto che in diversi siti va di moda la presenza di footer molto grossi con diversi link,
consigliamo di utilizzare l'elemento <aside> in combinazione con il tag <nav> che potrebbe essere la
soluzione migliore per questa tipologia di contenuti dato che, come abbiamo potuto constatare nella
lezione dedicata al footer, ciò non è possibile farlo all'interno del tag <footer>.

Così come gli elementi <article> (http://xhtml.html.it/guide_preview/lezione/4970/article/),
<section> (http://xhtml.html.it/guide_preview/lezione/4969/section/) e
<nav>(http://xhtml.html.it/guide_preview/lezione/4971/nav/) anche l'<aside> appartiene alla
categoria dei "contenitori di sezionamento dei contenuti"
(http://xhtml.html.it/guide_preview/lezione/4965/un-nuovo-content-model/) in quanto per l'outliner
necessita di un titolo che riassuma i propri contenuti.

Ricordiamo però che non è obbligatorio inserire un titolo per gli elementi che vengono considerati
delle sezioni a sé stanti dall'outliner, infatti in questo caso queste sezioni rimarrebbero senza titolo
ma non genererebbero nessun errore di validazione.

Vediamo quindi ora che abbiamo completato la struttura del blog come è l'outline del nostro
documento Outline (esempi/outline_progetto/outline.html).

Nella prossima lezione comprenderemo come usare l'elemento <hgroup> e la sua importanza per
l'outline di un documento in HTML5.



<aside> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Hgroup
L'elemento <hgroup> rappresenta l'intestazione di una sezione. L'elemento viene utilizzato per
raggruppare un insieme di elementi h1-h6, quando il titolo ha più livelli, come sottotitoli, titoli
alternativi o slogan.

<hgroup>
<h1>Questo è il titolo</h1>
<h2>Questo è un sottotitolo</h2>
</hgroup>

La vera importanza del tag <hgroup> è che maschera l'outline dell'elemento padre che lo contiene;
infatti, l'algoritmo dell'outliner riconosce come un titolo solamente l'heading con il valore più alto e
considera tutti gli altri elementi sottotitoli.

Esempio:

<article datetime="2010-11-22" pubdate >
<header>
<hgroup>
<h2>Le prospettive per il futuro del web</h2>
<h1>L'HTML 5 rivoluzionerà il mondo del web</h1>
</hgroup>
</header>
<p>Presto il web sarà pieno di siti e applicazioni che saranno in grado di mettere
in crisi le più grandi case di desktop application...</p>
<footer>
<p>Pinco pallino</p>
</footer>
</article>

Se facessimo l'outline della pagina HTML contenente questo <article>
(http://xhtml.html.it/guide_preview/lezione/4970/article/) ci restituirebbe come titolo della sezione
solamente l'<h1> contenuto nell'<hgroup> (non considerando l'<h2> anche se posto prima nel
codice) poiché è il tag con il valore più alto all'interno della sezione. Senza l'elemento <hgroup> i due
titoli verrebbero considerati entrambi sullo stesso livello d'importanza come titoli dell' <article>.

Nella prossima lezione parleremo del tag <mark> e della sua utilità nell'evidenziare parti
particolarmente importanti del testo.


<hgroup> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Mark
L'elemento <mark> rappresenta una parte di un testo segnato o evidenziato all'utente a causa
della sua rilevanza anche in un altri contesti. Esso, in un testo in prosa, indica un punto culminante
che non era originariamente presente, ma che è stato aggiunto per attirare l'attenzione del lettore su
una parte del testo che potrebbe non essere stata considerata rilevante dall'autore originale quando il
contenuto è stato scritto.

Questa definizione abbastanza complessa in realtà può essere semplificata di molto chiarendoci le
idee con un esempio: immaginiamo di cercare una determinata parola chiave in diverse pagine web e
che la parola che abbiamo cercato nel motore di ricerca, ci venga evidenziata all'interno della pagina
che andiamo a visualizzare; ciò che abbiamo appena descritto è la situazione ideale per l'utilizzo del
tag <mark>poiché con quest'ultimo dobbiamo racchiudere la parola ricercata segnalandola
graficamente all'utente.

<p>Senza <mark>plug in</mark> di terze parti il web potrebbe diventare
per noi sviluppatori più democratico; con le nuove API HTML5 non abbiamo più bisogno
di diversi <mark>plug in</mark> di terze parti che sino ad ora erano indispensabili
per i contenuti multimediali</p>

Allo stato attuale non esiste un tag HTML standard utilizzato per evidenziare le parole chiave agli
utenti che utilizzano i motori di ricerca per navigare: Google utilizza il tag <em>, Bing il tag <strong>,
Yahoo il tag <b> e così via. Si spera che con l'introduzione dell'elemento <mark> le cose possano
cambiare.

Nella prossima lezione parleremo del tag <time>, un'altra delle novità dell'HTML5.



<mark> 9.0+ 4.0+ 5.0+ 5.0+ 11.0+

Time e gli attributi pubdate e datetime
L'elemento <time> rappresenta il tempo su un orologio di 24 ore, o una data precisa nel
calendario Gregoriano accompagnata opzionalmente con un orario e una differenza di fuso orario.

Questo elemento è inteso come un modo moderno per codificare le date e gli orari in maniera
leggibile anche per i computer. Ad esempio, i browser saranno in grado di offrire la possibilità di

aggiungere promemoria per i compleanni o gli eventi in programma in una web application che
funziona da calendario.

<p>Oggi pomeriggio penso che sarò lì per le <time>15:00</time></p>

Prima di inserire l'elemento <time> nelle nostre pagine in HTML5 dobbiamo comprendere quali sono
i contesti in cui è sconsigliato utilizzarlo:

non bisogna inserire nel tag <time> le date che non possono essere determinate con
precisione; ad esempio: "un giorno nel lontano inverno del '68","da quando è nato il primo
uomo"...;
non bisogna inserire nel tag <time> le date prima dell'introduzione del calendario Gregoriano.

L'elemento <time> può possedere l'attributo pubdate che è di tipo booleano; la sua presenza indica
che la data presente nel tag <time> è anche la data nella quale è stato scritto
l'<article>(http://xhtml.html.it/guide_preview/lezione/4970/article/) padre più vicino, e nel caso
non esistesse un <article> padre allora essa è riferita alla creazione dei contenuti dell'intero
documento.

Ovviamente un elemento che possiede l'attributo pubdate necessita di una data. Per ciascun
<article> può esserci solo un singolo tag <time> con pubdate e la stessa cosa vale per l'intero
documento.

Possiamo specificare in maniera più dettagliata una data aggiungendo l'attributo datetime:

il valore dell'attributo deve essere una "stringa valida" (http://www.whatwg.org/specs/web-
apps/current-work/multipage/common-microsyntaxes.html#valid-global-date-and-time-string)
del tipo (ANNO-MESE-GIORNO-ORE:MINUTI:SECONDI.MILLISECONDI-FUSO ORARIO).
se l'attributo datetime non è presente allora il contenuto testuale del'tag <time> deve essere
una "stringa valida" (http://www.whatwg.org/specs/web-apps/current-
work/multipage/common-microsyntaxes.html#valid-global-date-and-time-string).

<time pubdate datetime="2011-01-20">20 Gennaio</time>

Dobbiamo specificare che l'attributo pubdate in quanto di tipo booleano può essere inserito anche nel
seguente modo:

<time pubdate="pubdate" datetime="2011-01-20">20 Gennaio</time>

Nella prossima lezione vedremo in quali occorrenze utilizzare il tag <meter>.



<time> No No No No No

Meter
L'elemento <meter> rappresenta una misura scalare all'interno di un intervallo noto, o un
valore frazionario.

Il tag <meter> è anche utilizzato come un indicatore di livello.

<meter value="6" max="8">6 blocchi utilizzati (su un totale di 8)</meter>

Vediamo alcuni contesti in cui non deve essere utilizzato:

quando indica lo stato di una barra di progresso;
quando i valori rappresentati sono di tipo arbitrario a scalare; ad esempio non deve segnalare
un peso o un'altezza a meno che non vi sia un valore massimo riconosciuto.

Esistono 6 attributi per determinare il valore semantico dell'elemento <meter>:

1. min: indica il valore limite minimo disponibile;
2. max: indica il valore limite massimo disponibile;
3. value: indica il valore dell'elemento;
4. low: indica un valore che viene considerato basso;
5. high: indica un valore che viene considerato alto;
6. optimum: indica un valore che viene considerato "ottimale"; se è più alto del valore specificato
nell'attributo high indica che il valore più alto è il migliore,viceversa è più basso del valore
specificato nell'attributo low indica che il valore più basso è il migliore.

Se non è specificato un valore minimo e un valore massimo questi sono di default rispettivamente 0 e
1.

Ad oggi l'unico browser che renderizza il tag <meter> è Google Chrome presentandolo graficamente
come una barra di progresso, quindi gli sviluppatori sono fortemente incoraggiati a specificare il suo
valore in formato testuale al suo interno.

Nella prossima lezione illustreremo come utilizzare l'elemento <progress> e la sua utilità nel caricare
i contenuti dei documenti web.



<meter> No No No 8.0+ 11.0+

Progress
L'elemento <progress> rappresenta lo stato di completamento di un compito e può essere di
due tipi:

indeterminato: indica che il compito (task) è in fase di completamento, ma che non è chiaro
quanto ancora resta da fare prima che l'operazione sia completata (ad esempio perché
l'operazione è in attesa della risposta di un host remoto);
determinato quando è possibile ricavare un numero quantificabile nel range da zero a un
massimo, in modo da ottenere la percentuale di lavoro completato rispetto al totale(ad
esempio un preloader di un'immagine).

Esistono due attributi che determinano lo stato di completamento dell'attivita del tag <progress>.

L'attributo value, che specifica la quantità di lavoro completata, e l'attributo max, che specifica la
quantità di lavoro richiesta in totale. Le unità sono arbitrarie e non specificate.

Tuttavia, i valori passati come attributi del tag <progress> non sono renderizzati e quindi
dovrebbero comunque essere inseriti in forma testuale nell'HTML in modo da poter fornire un
feedback più preciso agli utenti; inoltre questo elemento attualmente non viene renderizzato dalla
maggior parte dei browser ed è quindi ancora sconsigliato il suo utilizzo.

<section>
<p>Caricamento: <progress id="mioLoader" max="100" value="30"><span>30</span>%</prog
ress></p>
</section>

Vediamone adesso un esempio concreto in questa demo
(http://www.html.it/guide/esempi/html5/esempi/lezione_progress/progress.html) (funziona nelle più
recenti versioni di Opera e Google Chrome).

Gli attributi value e max, se presenti, devono essere valori validi (http://www.whatwg.org/specs/web-
apps/current-work/multipage/common-microsyntaxes.html#valid-floating-point-number).
L'attributovalue, se presente, deve avere un valore uguale o maggiore di zero e minore o uguale al
valore dell'attributo max, se presente, o 1.0, in caso contrario. L'attributo max, se presente, deve
avere un valore maggiore di zero.

Ovviamente, l'elemento <progress> deve essere utilizzato solamente per indicare lo stato in fase di
progressione di un compito; per indicare quantitativamente la misura di un'oggetto o di uno stato non
in progressione bisogna utilizzare l'elemento <meter>
(http://xhtml.html.it/guide_preview/lezione/4976/meter/).

Data la complessità dell'argomento e la costante variazione delle specifiche a riguardo consigliamo di
consultare il sito del WHATWG (http://www.whatwg.org/specs/web-apps/current-
work/multipage/the-button-element.html#the-progress-element) per un maggiore approfondimento.

Nella prossima lezione descriveremo brevemente gli altri tag semantici introdotti nella specifica
HTML5.



<progress> No No No 8.0+ 11.0+

Altri tag

Abbiamo scelto di riassumere brevemente in un'unica lezione diversi tag in quanto il costante
aggiornamento delle specifiche non ci consente di poterli descrivere dettagliatamente, almeno sino a
quando queste ultime non saranno rilasciate ufficialmente; inoltre, ne sconsigliamo l'utilizzo
almeno sino a quando i browser non inizieranno a supportarli in maniera standard.

Html5 based

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Html5 based

Similar to Html5 based (20)

More from Saverio Menin

More from Saverio Menin (10)

Html5 based