I nuovi elementi introdotti in HTML 5
Lo sviluppo dell' HTML è rimasto fermo a 10 anni fa: 1999. Il W3C ha concentrato i propri sforzi su un cambiamento di base della sintassi HTML da Standard Generalized Markup Language (SGML) ad XML (eXtensible Markup Language). Accanto a questi ha introdotto nuovi linguaggi quali Scalable Vector Graphics (SVG), XForms, MathML.
Da qualche anno, i 3 maggiori produttori di browsers - Apple, Opera e Mozilla Foundation - si sono riuniti dando vita al Web Hypertext Application Technology Working Group (WhatWG) per sviluppare una versione aggiornata e migliorata del "classico" HTML. Recentemente il W3C ha preso atto di questi sviluppi ed ha cominciato a collaborare con molti membri del WhatWG. Oggi possiamo trovare le specifiche sia nel sito del W3C che in quello del WhatWG. Sicuramente in futuro le due iniziative le vedremo "fuse" assieme. Se da un lato tutti i dettagli sono in via di definizione, dall'altro si potrebbe sostenere che i contorni della prossima versione di HTML sono meno foschi, a tal punto da avere in rete molti siti web realizzati con HTML 5.
Questa nuova versione di HTML 5 prende anche il nome di Web Applications 1.0. Essa è facilmenmte riconoscibile per chi realizza pagine web in quanto non ci sono namespaces o schemi. Non tutti gli elementi devono avere il tag di chiusura. In un certo senso i browser "perdonano" gli errori rispetto al codice che viene tutt' oggi utilizzato. Un paragrafo viene sempre identificato con il tag p e le tabelle sempre con il tag table.
Parallelamente un web designer si troverà difronte alcuni nuovi elementi che potrebbero indurlo in confusione. Continueremo ad avere i vecchi e cari "div" ma cominceremo a vedere nell' HTML elementi quali: header, nav, section, aside, footer ecc... Elementi inline come em, code e strong saranno ancora da considerarsi validi ed usabili ma, accanto a questi, vedranno la luce meter, time, ed m.
I tag img ed embed ci accompoagneranno ancora ed a proposito di inserire oggetti audio e video in una pagina, potremo servirci degli elementi audio e video.
Da quanto si legge nei blog di coloro che sono al lavoro per l' HTML 5, si evince che il nuovo markup è stato concepito per degradare in maniera ottimale nei browser che non lo supportano. Questo è facilmente intuibile in quanto se da un lato i browser si sono evoluti introducendo i tabs per una navigazione multitasking, se integrano i lettori RSS, se supportano l'oggetto XMLHttpRequest, i loro parser sono rimasti fermi a 10 anni fa. Se ne deduce che non potremmo assistere ad un "oscuramento" di tutti i siti web.
Struttura di una pagina HTML 5
Ogni pagina HTML ben formata (well-formed) diventa difficile da processare a causa della "mancanza" di una struttura. Si deve analizzare la struttura di ogni sezione, facendo attenzione ai livelli di intestazione. Sidebars, footer, header, menu di navigazione, contenuti vengono contrassegnati dai tag div. HTML 5 aggiunge nuovi elementi per identificare specificamente ciascun elemento:
- header: intestazione visualizzata all'inizio della pagina (da non confondere con l'elemento <head>;
- nav: racchiude una serie di link ad altre pagine interne o esterne al sito;
- section: corrisponderebbe ad un capitolo di un libro o ad una sezione ben precisa;
- article: un testo "indipendente", quale potrebbe essere un messaggio scritto in un blog, un articolo ecc;
- footer: classico piè di pagina, nel quale inserire l'indirizzo email per i contatti, copyright ecc.
Fare un confronto tra il codice di una pagina xhtml ed una in HTML 5 potrebbe apparire noioso. Chi usa i div per impaginare un sito, conosce a memoria la struttura e come deve essere scritta. Realizzeremo, invece, una pagina molto semplice con una testata, contenente un titolo ed un sottotitolo; possiamo vedere da vicino il primo elemento menzionato nella lista - header - Il tutto, rigorosamente, in HTML 5. Verrà affrontato, man mano che si procede, anche il problema di come i browser interpretano questi nuovi elementi. Il codice in oggetto è il seguente:
<!DOCTYPE html>
<html>
<head>
<title>Struttura pagina in HTML 5</title>
<meta charset="UTF-8">
</head>
<body>
<header id="title">
<hgroup>
<h1>Titolo Sito in HTML 5</h1>
<h2>Slogan del sito</h2>
</hgroup>
</header>
</body>
</html>
Si noti innanzitutto l' elemento header al quale è stato associato un id="title". Questo è possibile farlo anche in HTML 5, vale a dire che se in una pagina abbiamo più elementi e si vuol dare una formattazione differente, è sufficente contrassegnarli con un identificatore univoco. Se provassimo a richiamare questa pagina nel browser, avremo un risultato uguale al primo articolo di esempio.
Nulla di particolare, si direbbe. Però se provassimo a formattare la pagina con del codice CSS, il tutto assumerebbe un altro aspetto. Il secondo esempio è stato associato ad un foglio di stile. Direi che il risultato è leggermente migliore in quanto a presentazione. Ovviamente... non possiamo dimenticarci i browser della Microsoft (purtroppo, aggiungo io). Se provassimo a visualizzare il secondo esempio con i browser Internet Explorer, non avremmo lo stesso risultato che si ottiene con i browser standard. Questo accade perchè Internet Explorer non interpreta, non conoscendolo, l' elemento header. Grazie al DOM (Document Object Model) dobbiamo prima "creare" un determinato elemento e poi formattarlo attraverso i fogli di stile. Nell' HTML della pagina è sufficiente aggiungere il seguente codice:
<script>
document.createElement('header');
</script>
tra i tag <head> e </head>; il codice completo diventa:
<!DOCTYPE html>
<html>
<head>
<title>Struttura pagina in HTML 5</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="/esempio04.css">
<script>
document.createElement('header');
</script>
</head>
<body>
<header id="title">
<hgroup>
<h1>Titolo Sito in HTML 5</h1>
<h2>Slogan del sito</h2>
</hgroup>
</header>
</body>
</html>
Adesso possiamo dire di aver ottenuto lo stesso ed identico risultato anche con i browser Internet Explorer.
Come si può notare dal codice riportato, non è stato necessario includere nella pagina nessun <div>. Grazie all' aiuto dei CSS è stato possibile assegnare una dimensione al body, un background all' elemento <header> ecc...
Elementi <section> e <article>
Proseguendo con la costruzione della struttura di pagina, verranno introdotti due nuovi elementi: <section> e <article>. L' elemento <article> potrebbe contenere, nel nostro caso, il testo vero e proprio. L' area all'interno della quale deve trovarsi tale elemento, verrà delimitata da <section>. Dopo la chiusura dell' elemento <header id="title">, visto nell' esempio precedente, si contuinui ad integrare il codice come segue:
<section id="presentazione">
<article id="first">
<h1>Articolo in primo piano</h1>
<p>Lorem ipsum dolor...</p>
</article>
</section>
Perchè è stato assegnato un id agli elementi? Perchè nel prosieguo della pagina che si andrà a realizzare, vedremo come sia semplice integrare e formattare altri elementi; per distinguerli da tutti gli altri si assegna un identificatore univoco in maniera tale da non avere conflitti con i fogli di stile. Nel quinto esempio possiamo notare il risultato ottenuto grazie all' ausilio dei CSS. Ovviamente non c'è limite agli elementi che si possono avere in una pagina, proprio come accade attualmente con i <div>. Al di sotto dell' articolo in primo piano, potremmo volere, per esempio, due news affiancate, le quali occupano tutto lo spazio a disposizione in orizzontale. Il tutto deve continuare ad essere insertito nell' elemento <section> principale (con id="presentazione"). Il codice diventa:
<section id="presentazione">
<article id="first">
<h1>Articolo in primo piano</h1>
<p>Lorem ipsum...</p>
</article>
<section>
<article class="first-left">
<h2>Secondo Titolo</h2>
<p>Cras blandit...<br /><a href="#">Continua...</a></p>
</article>
<article class="first-right">
<h2>Terzo Titolo</h2>
<p>Nam ac dui sit...<br /><a href="#">Continua...</a></p>
</article>
</section>
</section><!--/presentazione-->
Il risultato ottenuto lo possiamo vedere nel sesto esempio. Possiamo dire, effettivamente, che la pagina comincia ad assumere un aspetto decisamente più gradevole.
Elemento <nav>
Come suggerisce il nome, all' interno dell' elemento <nav> andremo ad inserire una serie di link che possono contenere il menu di navigazione per tutto il sito. Nella pagina che si sta realizzando, se volessimo posizionare il menu di navigazione al di sotto di </header> e prima di <section>, non si deve fare altro che scrivere il codice html e formattarlo nel foglio di stile. Per l' esempio in oggetto vedremo 4 link. Il codice è:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Chi siamo</a></li>
<li><a href="#">Dicono di noi</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</nav>
Ovviamente anche <nav> deve essere "creato" tramite DOM, come tutti gli altri elementi visti sin qui. Il risultato visualizza il menu di navigazione appena creato.
Elementi semantici di blocco
Alla pari degli elementi strutturali, HTML 5 introduce alcuni elementi a livello di blocco, puramente semantici. Essi sono:
- aside
- figure
- dialog
Vedremo adesso l'impiego di questi tre elementi, nella pagina di esempio che si sta man mano costruendo. Il terzo elemento - dialog - non è, a dire il vero, molto utilizzato.
Aside
L'elemento aside potrebbe rappresentare una nota, un suggerimento, una barra laterale o qualcosa che si trova solitamente al di fuori del flusso principale di un articolo. Nella pagina di esempio vedremo l' elemento aside utilizzato come un "contenitore" laterale di due menu. Il suo codice è:
<aside>
<section>
<header><h3>Menu Laterale</h3></header>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
</ul>
</section>
</aside>
Anche in questo caso, <aside> deve essere "creato" dal DOM per poter essere interpretato da Internet Explorer. Con le opportune formattazioni via CSS, possiamo dare qualsiasi tipo di presentazione. L' ottavo esempio mostra l'introduzione di tale elemento.
Figure
L'elemento figure rappresenta un contenitore di immagine a livello di blocco, con didascalia. Se oggi in una pagina xHTML scriviamo:
<img alt="Audi R8" src="/1.jpg" border="0" height="362" width="563" />
<b>Figura 1. Una spendida Audi R8</b>
in HTML 5, per riprodurre la stessa immagine con didascalia avremo:
<figure>
<img alt="Audi R8" src="/images/1.jpg" height="352" width="563">
<legend>Figura 1. Una splendida Audi R8</legend>
</figure>
Il risultato possiamo vederlo nell' esempio numero 9.
Una cosa molto importante è che i browser, soprattutto gli screen reader, associano la didascalia all' immagine. In ultimo, l'elemento figure lo si può utilizzare con altri elementi quali: audio, video, ecc...
Dialog
L'elemento <dialog> indica una conversazione tra due o più persone. Il tag <dt> sta ad indicare il nome di colui che parla mentre il tag <dd> racchiude il discorso vero e proprio. La pagina di esempio mostra solo un esempio dell' elemento <dialog> "in azione".
| < Prec. | Succ. > |
|---|
