Questa è la traduzione dell'articolo A Preview of HTML 5 di Lachlan Hunt pubblicato originariamente su A List Apart il 4 dicembre 2007. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Il web è in costante evoluzione. Nuovi e innovativi siti web vengono creati ogni giorno, spingendo i confini del linguaggio HTML in ogni direzione. HTML 4 è una specifica ufficiale e accettata da ormai dieci anni. Quanti sono in cerca di nuove tecniche per fornire agli utenti funzionalità avanzate sono spesso bloccati dai limiti del linguaggio e dei browser.
Per dare a designer e sviluppatori più flessibilità e interoperabilità, per rendere possibile la realizzazione di siti web più interattivi e coinvolgenti, HTML 5 introduce e migliora una vasta gamma di funzionalità, inclusi nuovi controlli per i form, nuove API, elementi per il multimedia, migliorando sia la struttura sia la semantica.
Il lavoro su HTML5, che è iniziato nel 2004, è al momento portato avanti nell'ambito di un sforzo comune tra l'HTML WG del W3C e il WHATWG. Molti attori chiave nel settore stanno partecipando a questo lavoro faticoso, inclusi rappresentanti dei quattro principali browser e delle loro aziende: Apple, Mozilla, Opera e Microsoft. Sono attivi anche diverse altre organizzazioni e singoli individui con interessi e livelli di esperienza anche molto diversi.
Voglio solo ricordare, prima di andare oltre, che al momento la specifica è ancora un lavoro in corso di definizione, molto lontano dall'essere completato. In quanto tale, è possibile che qualcuna delle caratteristiche di cui si discuterà in questo articolo potrebbe in futuro subire modifiche. L'articolo è dunque inteso come una sorta di primo sguardo, di anteprima o introduzione ad alcune delle maggiori novità così come sono definite nella prima bozza della specifica.
Struttura
HTML 5 introduce un set di nuovi elementi che rendono più semplice la definizione della struttura di una pagina. La maggior parte delle pagine scritte in HTML 4 contiene una varietà di elementi strutturali comuni, come header, footer, colonne. Oggi è una prassi piuttosto diffusa definirli nel markup usando elementi div e assegnando a ciascuno un id o una classe descrittiva:
L'uso di elementi div è molto diffuso perché la versione attuale di HTML 4 manca dei necessari elementi semantici per descrivere e definire queste parti in maniera più specifica. HTML 5 tenta di dare una risposta a questo problema introducendo nuovi elementi per rappresentare ciascuna di queste diverse sezioni:
header, nav, section, article, aside, footer
Il markup del documento sarebbe più o meno questo:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>Molti vantaggi derivano dall'adozione di questi elementi. Usati insieme ad elementi per la definizione di titoli (da h1 a h6), tutto ciò fornisce un modo per marcare sezioni annidate con livelli di titolo, al di là dei sei livelli possibili con le precedenti versioni di HTML. La specifica include un dettagliato algoritmo per la generazione di uno schema strutturale che prende in conto la struttura di questi elementi e rimane retrocompatibile con le versioni precedenti. Ciò può essere usato sia dai produttori di editor e strumenti per per lo sviluppo, sia dai produttori di browser per generare indici in grado di assistere gli utenti nella navigazione del documento.
Per esempio, osserviamo la struttura che segue con elementi section e h1 annidati:
<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>Si noti che, per mantenere una migliore compatibilità con gli attuali browser, è anche possibile usare in modo appropriato altri elementi di titolo (da h2 a h6) al posto dei soli elementi h1.
Identificando lo scopo delle sezioni di una pagina attraverso l'uso di specifici elementi di sezione, le tecnologie assistive possono aiutare l'utente a navigare più facilmente nella struttura della pagina. Per esempio, possono facilmente saltare la sezione di navigazione o passare direttamente da un articolo all'altro senza la necessità da parte dell'autore della pagina di fornire i classici skip link. Gli autori possono al tempo stesso trarre benefici perché sostituendo molti dei div nel documento con uno solo dei tanti elementi distinti per la definizione della struttura possono mantenere il codice più pulito e comprensibile.
header
L'elemento <header> rappresenta la testata di una sezione. Gli header possono contenere più della semplice intestazione della sezione. Sarebbe ad esempio ragionevole per un header includere sotto-intestazioni o altre informazioni di supporto:
<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Lachlan Hunt</p>
</header>
<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>footer
L'elemento <footer> rappresenta il footer della sezione a cui si applica. Un footer, in genere, contiene informazioni su quella sezione (chi l'ha scritta, link a documenti correlati, copyright, etc):
<footer>© 2007 Example Inc.</footer>nav
L'elemento <nav> rappresenta una sezione con link di navigazione. È adatta sia per la navigazione del sito sia per un indice:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>aside
L'elemento <aside> serve per ospitare contenuto che è in qualche modo correlato al contenuto che lo circonda. In genere può essere utile per definire colonne laterali:
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>section
L'elemento <section> rappresenta una generica sezione del documento o di un'applicazione, come un capitolo, per esempio:
<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
...</p>
</section>article
L'elemento <article> rappresenta una sezione indipendente di un documento, di una pagina o di un sito. È adatto per contenuti come news o post di un blog, interventi in un forum o commenti:
<article id="comment-2">
<header>
<h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack O'Niell</a></h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
</header>
<p>That's another great article!</p>
</article>Si chiude qui la prima parte. Nella prossima vedremo le novità relative agli elementi per il multimedia e alla rappresentazione del documento.
Video e audio
Negli ultimi anni l'audio e il video sul Web sono diventati piuttosto comuni. Siti come YouTube, Viddler, Revver, MySpace e tanti altri hanno reso estremamente semplice per tutti pubblicare video e audio. Ma, dal momento che HTML è privo dei mezzi necessari per incorporare elementi multimediali nella pagina e per controllarli, la maggior parte di questi servizi si affida a Flash per fornire queste funzionalità.
Sebbene sia possibile incorporare audio e video usando specifici plug-in (come QuickTime, Windows Media, Silverlight, etc), Flash è al momento il plug-in più universalmente diffuso e perciò in grado di offrire un vasto supporto cross-browser, oltre che un potente set di API per gli sviluppatori.
Come è evidente dall'analisi dei principali player multimediali basati su Flash, gli autori sono interessati ad offrire agli utenti interfacce specifiche e customizzate che in genere consentono l'esecuzione di file, la pausa, lo stop, la regolazione del volume. Il progetto è quello di offrire queste funzionalità aggiungendo nel linguaggio HTML un supporto nativo per la gestione di audio e video e fornendo API del DOM per il loro controllo.
I nuovi elementi <audio> e <video> rendono il tutto molto semplice. La maggior parte delle API sono condivise tra i due elementi, con l'unica differenza legata all'intrinseca diversità dei formati.
Il modo più semplice per incorporare un video consiste nell'usare un elemento video e consentire al browser di fornire l'interfaccia utente di base. L'attributo controls è di tipo booleano ed indica se vogliamo o no offrire i controlli per il playback:
<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>L'attributo opzionale poster può essere usato per specificare un'immagine, che sarà visualizzata al posto del video prima che esso inizi. Sebbene vi siano formati video che supportano il loro poster frame, come MPEG-4, ciò fornisce un'alternativa che può funzionare a prescindere dal formato video usato.
source
HTML 5 fornisce pure l'elemento <source> per specificare file video o audio alternativi. L'attributo media può essere usato per specificare una media query per la selezione di file o formati basati sul dispositivo con cui si raggiunge la pagina, l'attributo type serve a specificare il tipo di media e il codec. Si noti che quando si usa l'elemento <source>, l'attributo src deve essere omesso nella definizione dell'elemento video o audio, altrimenti le alternative verranno ignorate:
<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>Per chi vuole avere più controllo sull'interfaccia in modo tale che essa possa adeguarsi al design della pagina, l'API fornisce diversi metodi ed eventi per far sì che gli script possano controllare il playback. I metodi più semplici da usare sono play(), pause(), usando currentTime si può riavvogere tutto dall'inizio. L'esempio che segue illustra quanto visto:
<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;"><< Rewind</button>Ci sono molti altri attributi e API disponibili per gli elementi audio e video che non vengono qui discussi. Per maggiori informazioni vi rimando alla bozza attuale della specifica.
audio
Ugualmente semplice incorporare un file audio nella pagina usando l'elemento <audio>. La maggior parte degli attributi sono comuni ai due elementi, sebbene, per ovvie ragioni, l'elemento audio manchi di attributi come width, height e poster:
<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>Rappresentazione del documento
Diversamente dalle precedenti versioni di HTML e XHTML, che sono definiti nei termini della loro sintassi, HTML 5 viene definito secondo i termini del Document Object Model (DOM) - la rappresentazione ad albero usata dai browser per rappresentare la struttura di un documento. Per esempio, consideriamo un documento molto semplice che consiste di un titolo, di un'intestazione e di un paragrafo. L'albero DOM potrebbe sembrare come questo:
un elemento <title>, un elemento <h1> e un elemento <p>
Il vantaggio di definire HTML 5 nei termini del DOM è che il linguaggio stesso può essere definito indipendentemente dalla sintassi. Ci sono essenzialmente due sintassi che possono essere usate per rappresentare documenti HTML: la serializzazione HTML (nota come HTML 5) e la serializzazione XML (nota come XHTML 5).
La serializzazione HTML fa riferimento alla sintassi ispirata dalla sintassi SGML delle prime versioni di HTML, ma è definita in modo tale che sia più compatibile con il modo in cui i browser gestiscono attualmente e praticamente il linguaggio HTML:
<!DOCTYPE html>
<html>
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.
</body>
</html>Si noti che come in precedenti versioni di HTML alcuni tag sono opzionali.
La serializzazione XML fa riferimento alla sintassi che usa XML 1.0 e i namespaces, esattamente come XHTML 1.0:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.</p>
</body>
</html>A parte le differenze negli spazi bianchi e la presenza dell'attributo xmlns, questi due esempi sono equivalenti.
I browser usano il MIME type per distinguere tra i due. Ogni documento servito come text/html deve conformarsi ai requisiti della serializzazione HTML e ogni documento servito con un MIME type XML come application/xhtml+xml deve conformarsi ai requisiti della serializzazione XML.
Chi scrive pagine HTML opera una scelta informata su quale serializzazione usare, scelta che può dipendere da vari fattori. Gli autori non dovrebbero essere obbligati ad usare una rispetto all'altra; ognuna è ottimizzata per specifiche situazioni.
Benefici nell'usare HTML
- Retrocompatibile con i browser esistenti
- Gli autori hanno già confidenza con la sintassi
- La sintassi leniente significa che non accadranno cose irreparabili se si commette anche accidentalmente un errore
- Si può usare una sintassi abbreviata, nel senso che si possono omettere determinati tag o attributi
Benefici nell'usare XHTML
- La sintassi rigorosa dei XML incoraggia gli autori a scrivere un markup benformato, un markup che molti ritengono di più facile gestione
- Si integra facilmente con altri vocabolari XML, come SVG e MathML
- Consente l'uso di XML Processing, che alcuni autori usano come parte del loro processo di editing
Come contribuire
Il lavoro su HTML 5 sta facendo rapidi progressi, ma dovrebbe durare ancora durare per qualche anno. Dal momento che si dovranno produrre diversi test cases e ottenere implementazioni interoperabili, secondo le stime attuali tutto dovrebbe essere pronto tra dieci/quindici anni. Durante questo processo il feedback proveniente da molte persone, inclusi web designer e sviluppatori, produttori di CMS e strumenti di editing, e ovviamente i produttori di browser, è vitale per assicurare il successo dell'operazione. Tutti sono benvenuti e incoraggiati a contribuire.
Oltre alla specifica, ci sono altri sforzi in corso collegati al nuovo linguaggio e utili per fornire a chi fosse interessato una comprensione maggiore. Ecco alcuni documenti significativi:
- The Differences from HTML 4 descrive i cambiamenti intervenuti rispetto alla precedente versione di HTML.
- The HTML Design Principles discute i principi usati per prendere decisioni, e vi aiuterà a comprendere la ratio che sta dietro alle scelte operate.
- The Web Developerís Guide to HTML 5, inziativa che ha preso il via di recente, è stata scritta per aiutare sviluppatori e web designer a capire tutto ciò che è necessario per scrivere documenti conformi alla specifica HTML 5; fornisce linee guida e consigli.
Ci sono altri modi per contribuire. Ci si può unire al W3C HTML WG, iscriversi e contribuire alla alla mailing list, postare interventi nel forum di WHATWG o commenti sul blog dello stesso WHATWG.
