Sin dalla nascita di Internet, l’HTML (Hypertext Markup Language) si è affermato come standard per la struttura, il col­le­ga­men­to e la messa a di­spo­si­zio­ne dei contenuti in rete, in­di­pen­den­te­men­te dal sistema in uso. Però lo sviluppo di questo lin­guag­gio di markup es­sen­zia­le è stato messo da parte dopo il rilascio dell’HTML 4.01 nel dicembre 1999, no­no­stan­te Internet pro­gre­dis­se sempre più. Navigare in Internet non è più come prima: oltre a testi ed immagini, sono so­prat­tut­to gli elementi mul­ti­me­dia­li che lo rendono quello che è oggi. In più aumenta co­stan­te­men­te l’interesse alle offerte pensate per i di­spo­si­ti­vi mobili. Il moderno utilizzo del web ha in­gi­gan­ti­to il lin­guag­gio di markup dell’ultimo millennio e così i siti attuali si ap­pog­gia­no su molti plug-in pro­prie­ta­ri per essere all’altezza delle esigenze dei pro­gram­ma­to­ri, dei web publisher e dei con­su­ma­to­ri. Le con­se­guen­ze sono in­com­pa­ti­bi­li­tà e falle di sicurezza. La quinta versione del lin­guag­gio iper­te­stua­le dovrebbe riuscire a porre fine a questa si­tua­zio­ne. Già dal 28 ottobre 2014 il World Wide Web Con­sor­tium (W3C) ha pre­sen­ta­to la struttura dell’HTML5 come il nuovo lin­guag­gio prin­ci­pa­le del World Wide Web. La maggior parte dei gestori utilizza ancora la versione pre­ce­den­te o dei com­pro­mes­si sor­pas­sa­ti come l’XHTML, ma presto non sarà più così.

Excursus sullo sviluppo dell’HTML5

Di­ver­sa­men­te dal suo pre­de­ces­so­re, la quinta versione del lin­guag­gio di markup iper­te­stua­le è il risultato del lavoro parallelo di due gruppi di svi­lup­pa­to­ri. Quando il W3C ha ac­can­to­na­to il progetto HTML dopo il rilascio della versione 4.01, con­cen­tran­do­si invece sull’ulteriore sviluppo dell’XHTML, si è sollevata l’in­di­gna­zio­ne di numerose or­ga­niz­za­zio­ni sul percorso in­tra­pre­so dal comitato di stan­dar­diz­za­zio­ne. Proprio per le aziende software e per gli svi­lup­pa­to­ri di browser lo sviluppo stentato di uno standard web tramite il W3C è stata una spina nel fianco. Come reazione alla nuova tendenza del W3C è seguita la creazione del gruppo di lavoro Web Hypertext Ap­pli­ca­tion Tech­no­lo­gy Working Group (WHATWG) che si è dedicato allo sviluppo dello standard HTML e si è so­prat­tut­to fo­ca­liz­za­to sull’in­te­gra­zio­ne delle ap­pli­ca­zio­ni. Il WHATWG ha pre­sen­ta­to già nel 2004 una prima proposta per l’HTML5 che ha convinto anche il W3C ad in­ca­ri­ca­re due anni dopo un proprio gruppo di lavoro per lo sviluppo dell’HTML5, partendo dalla versione del WHATWG. Nel 2009, la W3C ha fi­nal­men­te an­nun­cia­to la fine dello sviluppo dell’XHTML ed ha iniziato a con­cen­trar­si sull’ela­bo­ra­zio­ne della spe­ci­fi­ca­zio­ne dell’HTML5 in coo­pe­ra­zio­ne con il WHATWG.

Perché usare l‘HTML5?

Mentre i siti agli albori di Internet servivano solo per la vi­sua­liz­za­zio­ne di contenuti, oggi l’in­te­ra­zio­ne con l’offerta online è in primo piano. I vi­si­ta­to­ri delle pagine non si con­si­de­ra­no più dei de­sti­na­ta­ri passivi, ma vogliono essere visti come dei soggetti attivi. I gestori di un sito ri­spon­do­no a questa esigenza inserendo moduli di contatto in­te­rat­ti­vi, funzioni come commenti o in­te­gran­do i social media. In più ci sono i giochi online, uti­liz­za­bi­li di­ret­ta­men­te dal browser. Con l’HTML 4.01 simili funzioni erano messe a di­spo­si­zio­ne solo tramite plug-in esterni. Il nuovo standard web HTML5 dimostra proprio qui i suoi punti di forza. Oltre ai classici tag HTML tra parentesi uncinate, la struttura dell’HTML5 contiene degli specifici marcatori (v. sotto) che mettono a di­spo­si­zio­ne elementi mul­ti­me­dia­li così come in­nu­me­re­vo­li in­ter­fac­ce di pro­gram­ma­zio­ne di un’ap­pli­ca­zio­ne (Ap­pli­ca­tion Pro­gram­ming In­ter­fa­ces, APIs), che possono essere combinate con Ja­va­Script. I plug-in pro­prie­ta­ri di fornitori privati, come ad es. Adobe Flash, ap­par­ten­go­no ormai al passato. I pro­gram­ma­to­ri possono lavorare con l’HTML5 in­di­pen­den­te­men­te dall’uso di software pro­prie­ta­ri e creare dei siti sicuri e ac­ces­si­bi­li. La tabella seguente introduce le novità dell’HTML5 e ne illustra gli elementi prin­ci­pa­li.

Nuovi elementi HTML

Una novità pio­nie­ri­sti­ca è l’in­tro­du­zio­ne dei nuovi elementi HTML5 come marcatori semantici.  Mentre l’HTML 4.01 prevedeva solo una strut­tu­ra­zio­ne generica tramite diversi elementi <div>, marcatori specifici come <section>, <nav>, <article>, <aside>, <header>, <footer> o <main> offrono la pos­si­bi­li­tà di definire con l’HTML5 di quale tipo di contenuto si tratti per ogni elemento.

Tag Funzione
<section> Definisce una sezione all’interno di un documento HTML5.
<nav> Definisce una sezione come barra di na­vi­ga­zio­ne. Ge­ne­ral­men­te qui si trovano dei col­le­ga­men­ti ad altre sot­to­pa­gi­ne.
<article> Marca una sezione come contenuto in­di­pen­den­te all’interno di un documento HTML5.
<aside> Definisce una sezione come elemento laterale.
<header> Definisce una sezione come in­te­sta­zio­ne. Ge­ne­ral­men­te qui si trovano i loghi, il titolo del sito e la na­vi­ga­zio­ne.
<footer> Definisce una sezione come piè di pagina. Ge­ne­ral­men­te qui si trovano le in­for­ma­zio­ni di contatto e l’in­for­ma­ti­va sul copyright.
<main> Definisce una sezione come contenuto prin­ci­pa­le di un sito web. Il tag main può essere uti­liz­za­to solo una volta in un­do­cu­men­to HTML5.

La de­scri­zio­ne semantica delle sezioni del sito ha il grande vantaggio di agevolare i motori di ricerca nella scansione di un documento HTML. Infatti è risaputo che i bot pre­fe­ri­sca­no dei contenuti web ben strut­tu­ra­ti. I gestori dei siti che agevolano al crawler l’in­ter­pre­ta­zio­ne di un documento HTML5 tramite tag cor­ri­spon­den­ti hanno delle maggiori chances di ottenere un buon po­si­zio­na­men­to tra i risultati di ricerca.

In­te­gra­zio­ne di elementi mul­ti­me­dia­li

Con l‘HTML l’in­se­ri­men­to di file video e audio avviene fa­cil­men­te così come l’in­te­gra­zio­ne di immagini. Per questo ci sono gli elementi HTML5 <audio> e <video> grazie ai quali non sarà più ne­ces­sa­rio ricorrere a plug-in.

Tag Funzione
<audio> Marca un file come file audio.
<video> Marca i contenuti video com­pren­si­vi di audio.

In­ter­fac­ce di pro­gram­ma­zio­ne di un’ap­pli­ca­zio­ne

L’HTML5 mette a di­spo­si­zio­ne per i pro­gram­ma­to­ri una serie di oggetti Ja­va­Script che possono essere integrati nei documenti HTML5 come API. La seguente tabella mostra una selezione dei cor­ri­spon­den­ti elementi HTML5 che aiutano i pro­gram­ma­to­ri a sod­di­sfa­re i requisiti dei moderni siti.

API Funzione
Canvas Con l’elemento canvas i pro­gram­ma­to­ri possono definire una specifica area di un documento HTML5 e integrare tramite Ja­va­Script delle immagini dinamiche bitmap. Oltre a linee, quadrati e cerchi, l’elemento supporta anche curve, cam­bia­men­ti dei colori e grafiche nei formati PNG, GIF e JPEG, così come tra­spa­ren­ze e testi. Un tipico esempio dell’uso del tag <canvas> è l’in­te­gra­zio­ne dei diagrammi. È possibile anche l’in­clu­sio­ne di ap­pli­ca­zio­ni complesse e di giochi online.
Drag and Drop L’API drag and drop consente lo spo­sta­men­to di oggetti all’interno di un documento HTML5 o tra due siti.
Ap­pli­ca­zio­ni offline At­tra­ver­so le ap­pli­ca­zio­ni offline sono a messe a di­spo­si­zio­ne ap­pli­ca­zio­ni web su pagine HTML5, anche senza essere connessi ad internet. Ciò è so­prat­tut­to rilevante per l’utilizzo di internet sui di­spo­si­ti­vi mobili. Per questo viene caricata un’ap­pli­ca­zio­ne con tutti i contenuti necessari nella cache del browser.
Geo­lo­ca­liz­za­zio­ne Con la geo­lo­ca­liz­za­zio­ne l’HTML supporta un’API Ja­va­Script che consente di rilevare il luogo attuale di un vi­si­ta­to­re. Ge­ne­ral­men­te viene richiesto al vi­si­ta­to­re, al momento del ca­ri­ca­men­to di una pagina HTML5 con l’API di geo­lo­ca­liz­za­zio­ne, se autorizzi a co­mu­ni­ca­re la propria posizione.

 

Lavorare con l‘HTML5

Per imparare ve­lo­ce­men­te ad uti­liz­za­re il nuovo standard web, in rete ci sono in­nu­me­re­vo­li tutorial sull’HTML5. Per iniziare si consiglia la pagina di html.it. Una scelta di risorse utili per gli svi­lup­pa­to­ri è anche offerta da Mozilla Developer Network. Ge­ne­ral­men­te il lin­guag­gio di markup è sup­por­ta­to da tutte le versioni recenti di web editor e quindi non è ne­ces­sa­rio disporre di un editor specifico per HTML5. Come per ogni standard web ufficiale, il W3C mette a di­spo­si­zio­ne anche per l’HTML5 il va­li­da­to­re con cui è possibile ve­ri­fi­ca­re gra­tui­ta­men­te la con­for­mi­tà dei documenti HTML. La va­li­da­zio­ne dell’HTML di un sito è perciò un passo im­por­tan­te per garantire la qualità di una pagina.

Vai al menu prin­ci­pa­le