HTML 5 - Tecniche Nuove

La guida di riferimento
dell’HTML5
HTML (HyperText Markup Language) è il linguaggio di
markup utilizzato per trasformare documenti testuali in pagine web e applicazioni. Lo scopo fondamentale di HTML
come linguaggio di markup è di fornire una descrizione semantica (ossia conforme al significato) dei contenuti e impostare la struttura (ossia una gerarchia di elementi) del documento.
Questa guida di riferimento tascabile fornisce un elenco completo e sintetico degli elementi e attributi secondo la Candidate Recommendation HTML5 gestita dal World Wide
Web Consortium (W3C) pubblicata il 17 Dicembre 2012,
l’HTML 5.1 Editor’s Draft pubblicato il 30 Maggio 2013 e la
specifica “living” HTML gestita dal Web Hypertext Application Technology Working Group (WHATWG) pubblicata
anch’essa il 30 Maggio 2013.
Gli elementi e gli attributi della specifica HTML 4.01 che
sono diventati obsoleti in HTML5 sono stati omessi da questa edizione. Gli elementi e gli attributi contenuti in questo
libro possono essere utilizzati nei documenti HTML 4.01,
XHTML 1.0 o XHTML 1.1, a meno che non sia indicato
esplicitamente “Incompatibili con HTML 4.01” nel qual caso
creerebbero documenti non validi.
1
I documenti HTML5 possono essere scritti con la sintassi
XHTML (formalmente nota come “Serializzazione XML dell’HTML5”), pertanto, ogni volta che saranno applicabili, si
evidenzieranno le considerazioni specifiche per l’XHTML.
Vedere l’Capitolo 3 alla fine di questa guida di riferimento
per i dettagli sui requisiti sintattici.
Questo libro è organizzato nelle seguenti sezioni:
•
Una panoramica dell’HTML5
•
Gli attributi globali dell’HTML5
•
L’elenco alfabetico degli elementi
•
Gli elementi organizzati per funzione
•
Appendice A: Le entità carattere
•
Appendice B: Una panoramica della sintassi XHTML
Una panoramica dell’HTML5
HTML5 mette a disposizione nuove funzionalità (elementi,
attributi, gestori di eventi e API) per facilitare lo sviluppo di
applicazioni web e per una più gestione più sofisticata dei moduli.
La specifica HTML5 è basata sull’HTML 4.01 rigoroso,
ma, a differenza della precedente raccomandazione HTML,
l’HTML5 non utilizza alcun DTD (Document Type Definition). Utilizza invece come base il Document Object Model
(DOM, “l’albero” formato dalla struttura di un documento)
piuttosto che un particolare insieme di regole sintattiche.
Inoltre, si differenzia dalle precedenti raccomandazioni per
il fatto che include istruzioni dettagliate su come i browser
devono gestire il markup malfatto.
2
La guida di riferimento dell’HTML5
W3C e WHATWG
Ci sono due organizzazione che gestiscono specifiche leggermente differenti della specifica HTML al momento della
scrittura di questo libro.
L’HTML5 è stato originariamente scritto dal Web Hypertext
Application Technology Working Group (WHATWG). Nel
2003 alcuni membri di Apple, Mozilla e Opera formarono
il WHATWG per favorire lo sviluppo dell’HTML in una
modo che fosse coerente con le pratiche reali di authoring
e con il comportamento dei browser. I loro documenti iniziali, Web Applications 1.0 e Web Forms 1.0, furono riuniti
nell’HTML5, che è ancora in fase di sviluppo sotto la guida
dell’editor del WHATWG, Ian Hickson. Hanno abbandonato l’aggiornamento del numero di versione ma continuano ad
aggiornare la specifica HTML nel sito whatwg.org.
In 2006, il World Wide Web Consortium (W3C) ha formato il proprio HTML5 Working Group basato sul lavoro del
WHATWG. Nel 2009, ha interrotto il lavoro sull’XHTML
2.0 per concentrarsi sullo sviluppo dell’HTML5. Il W3C
gestiste una versione “snapshot” (numerata) dell’HTML5
(www.w3.org/TR/html5/), che si prevede raggiunga lo stato d
raccomandazione nel 2014. HTML5.1 è anche in fase di sviluppo ed è previsto come raccomandazione nel 2016. I rilasci
periodi dell’HTML5.1 Editor’s Draft sono disponibili all’indirizzo www.w3.org/html/wg/drafts/html/master/.
Le differenze tra la Candidate Recommendation HTML5 e la
versione WHATWG sono minime. Le specifiche WHATWG
e HTML5.1 cambiano frequentemente ma le differenze, al
momento della scrittura di questo libro, comprendono:
Solo WHATWG
L’elemento data
Gli attributi globali itemid, itemprop, itemref, itemscope e
itemtype
Una panoramica dell’HTML5
3
L’attributo download e gli elementi a e area
L’attributo ping e gli elementi a e area
L’attributo srcset dell’elemento img
Solo WHATWG e HTML5.1 W3C
L’elemento menuitem
L’elemento dialog
L’elemento main
L’attributo globale inert
I gestori di eventi globali onclose e onsort
I gestori di eventi onfullscreenchange e onfullscreenerror
dell’elemento body
Solo HTML5 W3C
L’elemento command (sostituito da menuitem)
L’attributo media dell’elemento a
L’attributo pubdate dell’elemento time
I nuovi elementi semantici nell’HTML5
HTML5 include nuovi elementi semantici per contrassegnare il contenuto delle pagine. I dettagli per ciascuno di questi
elementi sono forniti più avanti nella sezione “L’elenco alfabetico degli elementi”:
article
aside
audio
bdi
canvas
command *
data **
datalist
4
figcaption
figure
footer
header
hgroup *
keygen
main ***
mark
output
progress
rp
rt
ruby
section
source
time
La guida di riferimento dell’HTML5
details
dialog ***
embed
menuitem ***
meter
nav
track
video
wbr
* rimosso da HTML5.1
** solo WHATWG
*** solo WHATWG e HTML5.1
I nuovi tipi di input
HTML5 introduce i seguenti nuovi tipi di controllo dell’input
(indicati come valori per l’attributo type dell’elemento input):
color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.
Gli elementi HTML 4.01 obsoleti
I seguenti elementi HTML 4.01 sono obsoleti nell’HTML5
poiché erano di presentazione, creavano confusione o erano
poco supportati: basefont, big, center, font, strike, tt, frame,
frameset, noframes, acronym, applet, isindex, dir.
Le API dell’HTML5
A causa della crescente domanda di contenuti interattivi per
le pagine web, HTML5 introduce diverse API (Application
Programming Interfaces) per la creazione di applicazioni web.
I compiti standardizzati delle API tradizionalmente richiedono plug-in proprietari o una programmazione personalizzata.
Alcuni dispongono di componenti di markup come audio, video e canvas; altri utilizzando JavaScript e/o componenti lato
server.
Le seguenti API fanno parte della specifica HTML5 del W3C:
•
Media API per la riproduzione di file audio e video con sincronizzazione multimediale e sottotitoli,
Una panoramica dell’HTML5
5
utilizzata con i nuovi elementi video e audio (http://
bit.ly/17EC8HT e http://bit.ly/13xEOBr)
•
TextTrack per l’aggiunta di sottotitoli sincronizzati
e didascalie per gli elementi video e audio (http://bit.
ly/16ZQm6S)
•
L’API Session History espone la cronologia del
browser (http://bit.ly/12iDo0Q)
•
L’API Offline Web Applications che permette di utilizzare offline le risorse web (http://bit.
ly/108K1mp)
•
L’API Editing include un nuovo attributo globale
contenteditable (http://bit.ly/11Tw0Tv)
•
L’API Drag and Drop include il nuovo attributo
draggable (http://bit.ly/18sdPhs)
Altre API collegate all’HTML5 che hanno specifiche separate, comprendono:
6
•
L’API Canvas per il disegno bidimensionale unitamente al nuovo elemento canvas (http://bit.ly/17ftf5F)
•
L’API Web Storage consente la memorizzazione di
dati nella cache del browser in modo che le applicazioni possono utilizzarli successivamente (http://bit.
ly/168vZjW)
•
L’API Geolocation permette agli utenti di condividere le informazioni di longitudine e latitudine in
modo che possano essere accessibili tramite script
nelle applicazioni web (http://bit.ly/168w5rQ)
•
L’API Web Workers permette che gli script siano
eseguiti in background per migliorare le prestazioni
(http://bit.ly/17ECwWI)
•
L’API Web Sockets mantiene una connessione aperta tra il client e il server in modo che i dati possano
essere trasferiti in tempo reale. Questo risulta molto
La guida di riferimento dell’HTML5
utile per i giochi multiplayer, la chat e gli stream live
di dati (http://bit.ly/13UfWUK).
•
L’API File consente il caricamento di file tramite un
modulo di input. Abilita l’anteprima del file caricato e permette il caricamento tramite drag-and-drop
(http://bit.ly/11sTkro).
Questa è solo una parte delle decine di API in sviluppo. Le
seguenti risorse forniscono elenchi approfonditi delle API disponibili e delle altre tecnologie web di facile utilizzo:
•
The Web Platform: Browser Technologies, gestita da
Mike Smith del W3C (platform.html5.org)
•
HTML5 Landscape Overview, di Erik Wilde (dret.
typepad.com/dretblog/html5-api-overview.html)
•
Web Platform Docs (docs.webplatform.org/wiki/apis)
La struttura di un documento HTML5
HTML5 dispone di una sola versione e non fa riferimento
a un DTD, ma i documenti HTML5 richiedono ancora una
dichiarazione semplificata DOCTYPE per attivare la modalità standard di rendering nei browser. Quella che segue è la
struttura minima di base raccomandata per un documento
HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
</head>
<body>
Contenuto del documento . . .
</body>
</html>
I documenti HTML5 scritti nella sintassi XML non richiedono un DOCTYPE ma possono includere una dichiarazione XML. Essi dovrebbero essere serviti come tipo MIME
Una panoramica dell’HTML5
7
application/xhtml+xml o application/xml. Quello che segue è
un semplice documento HTML5 scritto nella sintassi XML:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titolo del documento</title>
</head>
<body>
Contenuto del documento . . .
</body>
</html>
Il supporto dei browser per HTML5
La maggior parte dei nuovi elementi e attributi semantici di
HTML5 sono supportati dai moderni browser desktop e mobile ( Chrome, Safari, Opera, Firefox e Internet Explorer 9 +).
Per i browser che non supportano i nuovi elementi e le API ,
di solito è disponibile un JavaScript polyfill ( patch) che simula il supporto. Per un elenco completo dei polyfill esistenti,
vedere l’elenco di Modernizr all’indirizzo http://github.com/
Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills.
Un esempio di un semplice polyfill è lo script “HTML5
Shiv” creato da Remy Sharp. Per fare in modo che un vecchio
browser come Internet Explorer 8 o precedente riconosca i
nuovi elementi HTML5 (e quindi renderli accessibili agli stili
e agli script), si può scrivere JavaScript per creare ciascun elemento nel DOM uno alla volta. Per esempio, questo comando
crea un elemento section:
document.createElement("section");
Lo script HTML5 Shiv, scritto da Remy Sharp, crea tutti i
nuovi elementi in una volta sola. Per utilizzarlo, puntare allo
script ospitato da Google nel seguente modo:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/
html5-els.js"></script>
<![endif]-->
8
La guida di riferimento dell’HTML5
Le seguenti risorse sono molto utili per seguire il reale supporto e utilizzo dell’HTML5:
•
“When Can I Use...” : Un confronto del supporto dei
browser per HTML5, CSS3 e altre tecnologie per il
web gestito da Alexis Deveria.
•
HTML5 Please: Raccomanda quali funzionalità
HTML5 e CSS3 sono pronte per essere utilizzate e
quali fallback scegliere.
•
Wikipedia “Comparison of Layout Engines
(HTML5)”: contiene alcune tabelle che mostrano il
supporto per l’HTML5 da parte dei principali motori di browser.
•
HTML5 Readiness: Un’interessante visualizzazione
del crescente supporto per l’HTML5 e il CSS3 dal
2008 al presente.
La validazione dei documenti HTML5
È possibile verificare che i propri documenti HTML5 sono
validi, tramite il validator online disponibile all’indirizzo
validator.w3.org (il supporto HTML5 è in beta al momento
della scrittura di questo libro) o all’URL html5.validator.nu.
Gli attributi globali dell’HTML5
Alcuni attributi sono condivisi da tutti gli elementi dell’HTML5 e sono riferiti complessivamente come attributi
globali.
accesskey="carattere"
Assegna un tasto di accesso (una scorciatoia) che attiva
l’elemento o gli assegna il focus. Il valore è costituito
da un solo carattere. L’utente può accedere all’elemento
tramite la combinazione di tasti Alt-<tasto> (PC) o Ctrl<tasto> (Mac).
Gli attributi globali dell’HTML5
9
class="stringa di testo"
Assegna uno o più nomi di classificazione all’elemento.
contenteditable="true|false"
Non in HTML 4.01. Indica che l’utente può modificare
l’elemento. Questo attributo è già ben supportato dalle
versioni correnti dei browser.
contextmenu="id dell'elemento menu"
Non in HTML 4.01. Specifica un menu contestuale che
si applica all’elemento. Il menu contestuale deve essere
richiesto dall’utente, per esempio, con un clic destro.
dir="ltr|rtl|auto"
Specifica la direzione dell’elemento. ltr indica da sinistra
a destra; rtl indica da destra a sinistra e auto indica che la
direzione deve essere determinata programmaticamente.
draggable="true|false"
Non in HTML 4.01. Indica che l’elemento è trascinabile,
cioè che può essere spostato facendo clic su di esso e
mantenendo premuto il pulsante del mouse mentre lo si
trascina in un’altra posizione all’interno della finestra
del documento.
dropzone="copy|move|link|string:tipo della stringa di
testo|file:tipo di file"
Non in HTML 4.01. Indica cosa accade quando un dato
è trascinato su un elemento e quale tipo di dati esso può
accettare. copy comporta la copia del dato trascinato;
move sposta il dato in una nuova posizione e link crea un
collegamento al dato originale. Comprende string:text/
plain che gli consente di accettare qualsiasi stringa di
testo. L’attributo file: indica quando tipo di file viene
accettato (per esempio, file:image/png). È possibile fornire
sia l’azione sia il tipo di dato, per esempio dropzone="copy
string:text/plain".
hidden ( hidden="hidden" in XHTML)
Non in HTML 4.01. Evita che l’elemento e i suoi
discendenti possano essere renderizzati nello user agent
10
La guida di riferimento dell’HTML5
(browser). Qualsiasi script o modulo presente nelle
sezioni nascoste sarà ancora eseguito, ma non sarà
visibile all’utente.
id="stringa di testo"
Assegna un identificativo univoco all’elemento.
inert (inert="inert" in XHTML)
Solo WHATWG & HTML5.1. Indica che l’elemento
deve rimanere inerte, che significa che non può essere
selezionato, né cercato, né indirizzato dalle interazioni
dell’utente.
itemid="testo"
Solo WHATWG. Elemento del sistema di microdati
per incorporare dati leggibili dalla macchina; l’attributo
itemid
indica un identificatore universalmente
riconosciuto (come il codice ISBN per i libri). Viene
utilizzato assieme a itemtype nello stesso elemento che
contiene itemscope.
itemprop="testo"
Solo WHATWG. Elemento del sistema di microdati
per incorporare dati leggibili dalla macchina; l’attributo
itemprop fornisce il nome della proprietà. Il contenuto
dell’elemento fornisce il suo valore. Il valore può essere
un URL fornito dall’attributo href in un elemento a o
dall’attributo src in img.
itemref="elenco di ID separati da spazi"
Solo WHATWG. Elemento del sistema di microdati
per incorporare dati leggibili dalla macchina; l’attributo
itemref indica un elenco (per valori ID) di elementi
della pagina corrente da includere in un elemento
item. L’attributo itemref deve essere utilizzato nello
stesso elemento as the attributo itemscope che stabilisce
l’elemento.
itemscope
Solo WHATWG. Elemento del sistema di microdati
per incorporare dati leggibili dalla macchina; l’attributo
Gli attributi globali dell’HTML5
11
itemscope crea un nuovo item, un gruppo di proprietà
(coppie nome/valore).
itemtype="URL o etichetta DNS inversa "
Solo WHATWG. Elemento del sistema di microdati
per incorporare dati leggibili dalla macchina; l’attributo
itemtype indica un tipo di elemento standardizzato
identificato da un URL (per esempio, http://vocab.
example.net/book) o un’etichetta DNS inversa (per
esempio, com.example.person). L’attributo itemtype è
utilizzato nello stesso elemento che contiene l’attributo
itemscope.
lang
Specifica la lingua dell’elemento tramite il relativo codice
di lingua.
xml:lang
Solo XHTML. Specifica la lingua degli elementi nei
documenti XHTML.
spellcheck="true|false"
Non in HTML 4.01. Indica che l’elemento deve avere il
proprio controllo ortografico e sintattico.
style="stile CSS"
Associa le informazioni di stile all’elemento.
tabindex="numero"
Specifica la posizione dell’elemento corrente, nell’ordine
di tabulazione valido per il documento corrente. Il valore
deve essere compreso tra 0 e 32.767. Questo attributo
viene utilizzato per lo spostamento tra i collegamenti di
una pagina (o i campi di un modulo).
title="stringa di testo"
Fornisce un
sull’elemento.
titolo
o
informazioni
riepilogative
translate="yes|no"
Non in HTML 4.01. Indica se il contenuto di testo
dell’elemento e i valori dell’attributo devono essere
12
La guida di riferimento dell’HTML5
tradotti quando il documento viene localizzato. yes
è l’impostazione predefinita; no lascia il contenuto
inalterato.
I seguenti attributi non sono inclusi nell’elenco degli attributi
globali ma sono permessi nei documenti HTML5:
aria-*="stringa di testo o numero"
Non in HTML 4.01. Permette uno degli stati e proprietà
WAI-ARIA per migliorare l’accessibilità applicata a
un elemento, per esempio aria-hidden="true". Il valore
dell’attributo varia con la proprietà. Vedere www.w3.org/
TR/wai-aria/states_and_properties per informazioni
sugli stati e le proprietà supportate.
data-*="stringa di testo o dato numerico"
Non in HTML 4.01. Abilita gli autori a creare attributi
personalizzati collegati ai dati, per esempio, datalength, data-duration, data-speed, etc. in modo che i
dati non visibili possono essere incorporati utilizzando
un’applicazione o script personalizzati.
role="ruolo standardizzato WAI-ARIA"
Non in HTML 4.01. Assegna uno dei ruoli standardizzati
WAI-ARIA a un elemento per rendere più chiaro il suo
scopo agli utenti con disabilità. I ruoli di riferimento
(application, banner, complementary, contentinfo, form,
main, navigation e search) sono molto importanti nella
navigazione e nei dispositivi assistiti. Vedere www.
w3.org/TR/wai-aria/roles#role_definitions per un elenco
completo dei ruoli disponibili.
I gestori di eventi HTML5
A meno che non sia specificato diversamente, gli attributi dei
seguenti gestori di eventi possono essere specificati su qualsiasi elemento HTML:
Gli attributi globali dell’HTML5
13
onabort
onblur*
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose **
oncontextmenu
oncuechange
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror*
onfocus*
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload*
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onratechange
onreset
onscroll
onseeked
onseeking
onselect
onshow
onsort **
onstalled
onsubmit
onsuspend
ontimeupdate
onvolumechange
onwaiting
onblur, onerror, onfocus e onload si
comportano in modo leggermente differente quando sono applicati all’elemento body poiché l’elemento body condivide questi gestori di eventi con la finestra
genitore.
* Il gestore di eventi per l’oggetto Window quando è utilizzato con
l’elemento body
** Solo WHATWG e HTML5.1. Non nella Candidate Recommendation HTML5.
14
La guida di riferimento dell’HTML5