HTML5 e semantica: non solo effetti speciali

12 ottobre 2010 | scritto da: Stefano Folegati | 4 Commenti
html5HTML5, il nuovo linguaggio del web le cui specifiche sono in corso di definizione, è da tempo al centro dell’attenzione di blog e stampa specializzata, anche se spesso ci si sofferma su alcune caratteristiche che si prestano a fare “sensazione” a discapito di altre. Particolare clamore ha suscitato la rivalità che è stata creata e alimentata con la tecnologia Adobe Flash, che HTML5 starebbe insidiando nel campo dei contenuti video e audio su web (per mezzo dei nuovi elementi <video> e <audio>) e delle animazioni complesse e interattive (tramite l’elemento <canvas>). Ulteriore benzina sul fuoco sensazionalistico è stata gettata quando HTML5 è stato indicato come arma scelta da Apple nella sua ostilità all’adozione di Flash sui sistemi iOS.

Non entriamo nel merito del confronto tra HTML5 e Flash, se non per notare che è formalmente non corretto: Flash è una tecnologia multimediale proprietaria chiusa, HTML5 un linguaggio per la descrizione di contenuti che fa parte di un complesso ecosistema: DOM, linguaggi di scripting, fogli di stile, formati di codifica audio/video… Ecco perché non dovremmo parlare di HTML5 come di una piattaforma multimediale o (solo) di un sostituto a Flash su YouTube: come i suoi predecessori, HTML5 cerca di descrivere i contenuti delle pagine web in modo dettagliato e comprensibile sia agli umani che alle macchine. Il suo punto focale è la semantica, e il linguaggio offre nuovi strumenti per arricchirla. Vediamone alcuni.

Descrivere la struttura della pagina


Fino ad ora, HTML ci ha permesso di definire all’interno del documento elementi quali titoli, paragrafi e liste, mentre per descrivere gli elementi strutturali di una pagina usiamo il tag generico <div> che non ha valore semantico e non ci dice molto sul contenuto della porzione di pagina che delimita. Per ovviare a tale limite HTML5 introduce nuovi elementi strutturali che descrivono i principali blocchi semantici di cui è costruita una normale pagina web. Eccone una breve panoramica.

<header>


La testata di una pagina, l’elemento dove si concentra molta dell’identità del sito. Logo, motto del sito/azienda e marchi secondari (come l’affiliazione a un network o una certificazione prominente) sono contenuti tipici di questo elemento.

<nav>


L’elemento che contiene il menù di navigazione della pagina, normalmente nella forma di link organizzati in una lista <ul>.

<section>


Un blocco che raggruppa contenuti con coerenza tematica, ad esempio la sezione “contenuto” (quella che troveremo normalmente tra uno <header> e un  <footer>) di una pagina. Può contenere a sua volta altre <section> (es. “news”, “ultimi articoli”…).

<article>


Un elemento di contenuto autonomo, come una notizia, un post di blog, una recensione, una scheda di prodotto… Una pagina può comprendere diversi <article>, i quali possono essere raggruppati tematicamente in <section>.

<aside>


Una sezione che delimita contenuti che sono correlati al contenuto principale della pagina in modo tangenziale, non diretto. Ad esempio una scheda di approfondimento, una nota, un elenco di articoli correlati…

<footer>


Il piede della pagina, dove troviamo abitualmente note sulla proprietà intellettuale dei contenuti e la eventuale licenza di utilizzo, i dati sintetici sulla persona o organizzazione che gestisce il sito…

Nuovi strumenti semantici


Oltre agli elementi strutturali HTML5 offre nuovi strumenti per rendere semanticamente ricchi i nostri  documenti web, con l’obiettivo che le macchine “comprendano” i contenuti assegnandogli  un significato che sia funzionalmente correlato a quello attribuito dagli umani. Ad esempio, noi interpretiamo la stringa “23/10/2010” come una data; se anche la nostra applicazione calendar la interpreta come tale può aprire direttamente la casella relativa a quel giorno, oppure aggiungere automaticamente l’evento associato ai nostri impegni.

Ecco alcuni degli elementi che sono stati aggiunti:

  • <time> (per marcare date e orari)

  • <figure> (per marcare immagini esplicative a cui si fa riferimento in un testo)

  • <dialog> (per segnalare un blocco che riporta un dialogo parlato, ma anche i commenti a un post su un blog)


Oltre ai nuovi elementi, HTML5 propone anche un nuovo strumento: i Microdata sono vocabolari che possono essere usati per rendere comprensibili alle macchine contenuti quali schede di contatto di persone o organizzazioni, eventi, recensioni. Tali vocabolari prevedono una serie di parole riservate da associare ai dati tramite specifici attributi dei tag HTML, così come sono descritti da data-vocabulary.org. Si tratta di uno strumento analogo ai Microformats (già utilizzati da tempo sul web) e a RDFa (legato al defunto progetto XHTML 2.0), e ciò può essere al momento fonte di confusione e incertezza su quale soluzione adottare (come descritto in quest’articolo di Webmonkey). Teniamo però conto che Google interpreta già ora sia Microdata che Microformats.

Supporto e implementazione


I nuovi elementi proposti in HTML5 rappresentano un passo avanti rispetto al passato, ma non sono ancora entrati nell’uso comune per almeno due motivi:

  • le specifiche non sono ancora finalizzate da parte del gruppo incaricato di definirle (WHAT-WG), e le formulazioni sono a volte un po’ vaghe; ad esempio non sono chiari gli usi ammessi dell’elemento <aside>, oppure quanti <nav> possiamo avere in un documento

  • il supporto nei diversi browser è variabile, ma in tutti i casi ancora incompleto (le cose comunque stanno migliorando).


L’esperienza però ci insegna che non dobbiamo attendere che una tecnologia web sia cristallizzata e universalmente supportata per utilizzarla, se essa ci permette significativi passi avanti: è stato così ad esempio per i layout in CSS. Possiamo utilizzare HTML5 prevedendo di gestire con soluzioni alternative anche i browser che non lo supportano (avvalendoci anche di librerie come Modernizr).

L’uso dei nuovi elementi apre la strada a un web più ricco e accessibile, dove la semantica fornisce alle macchine gli elementi per offrire un’esperienza migliore agli umani, in termini di personalizzazione, ricchezza e accessibilità . Possiamo immaginare aggregatori che ci propongono gli elementi <article> dai nostri siti preferiti, applicazioni mobili che spostano di default gli elementi <aside> per ottimizzare lo spazio su uno smartphone, browser per persone non vedenti che traducono automaticamente i <nav> in istruzioni vocali… Ottimi motivi per mettere HTML5 alla prova al più presto.
Articoli simili in: Software Web

4 Commenti a “HTML5 e semantica: non solo effetti speciali”

  1. Stefano Folegati ha detto:
    Una precisazione: questo articolo è stato scritto prima che il W3C diramasse la raccomandazione di attendere specifiche definitive prima di implementare HTML5. Credo che questo non cambi il senso del mio post: nella storia del web non abbiamo mai atteso le specifiche formali di una tecnologia prima di sfruttarne i benefici. Certo, ogni progetto va valutato singolarmente, e spesso dovremo mettere la compatibilità all’indietro come priorità. Ma basta dare un’occhiata a quello che fanno giganti come Google e Apple per capire che HTML5 è già realtà.
  2. Maurizio ha detto:
    bel post! credi che ci sia un collegamento o meglio uno sforzo per andare incontro ai motori di ricerca con questa evoluzione semantica?
    Maurizio
  3. Stefano Folegati ha detto:
    @Maurizio
    Credo piuttosto che la direzione sia di rendere “inutili” i motori di ricerca, per lo meno nel modo in cui li conosciamo. I search robot per anni hanno cercato di appiccicare la semantica dove ce n’era ben poca. La prospettiva, nel lungo periodo, è che il Web semantico descriva e organizzi i propri contenuti in modo da venire incontro alle esigenze dell’utente in maniera quasi automatica, passando dal modello “ricerca” a quello “raccomandazione” in base al profilo dell’utente.
  4. Stefano Iotti ha detto:
    Dico la mia su html5 e seo.

    Qui ci troviamo di fronte a informazioni sempre più strutturate a livello semantico al fine di poter essere interpretate dalle macchine. Purtroppo però i motori di ricerca hanno ancora scarse capacità di comprendere il linguaggio naturale.

    Il motore si nutre di tag e metadati che offrono un’approssimazione del contenuto della pagina, in modo simile alla funzione svolta da un indice di un libro.

    L’indice diventa strumento decisivo per l’assegnazione del ranking e l’attrazione di lead e come tale oggetto di manipolazioni più o meno etiche.


    Non è passato molto tempo da quando ho scritto di “scemantica” http://www.thenaturalpowerofnewmedia.com/google-e-la-scemantica/