HTML 5 è il nuovo standard proposto dal consorzio W3C per la
creazione delle pagine web, che promette di facilitare la creazione
di siti web fluidi ed interattivi con l'utilizzo di nuovi strumenti
per la creazione di controlli avanzati, anche se attualmente
l'adozione di queste funzionalità è limitata ad alcuni browser e
soprattutto non è supportata da ie che rappresenta a tutt'oggi il
browser più utilizzato.
Su internet ci sono molte ottime guide su come implementare i
nuovi spettacolari tag di html per creare pagine interattive, ma
spesso si tralasciano aspetti ancora più innovativi per chi si
occupa di web professionalmente. In particolare rivestono grande
interesse (e grande importanza) i tag semantici e gli attributi
personalizzati. Quello che segue è un esempio, tra i molti
possibili, di una pagina strutturata utilizzando gli strumenti
messi a disposizione da html 4 (xhtml 1.1).
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1" />
<title></title>
</head>
<body>
<div id="container">
<div id="top">
<div id="menu"></div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
Adesso la struttura della pagina ne definisce anche la semantica
con una intestazione (header) che contiene il sistema di
navigazione (nav), una parte principale che definisce il contenuto
della pagina (article) ed un piede (footer). In questo modo i
motori di ricerca possono indicizzare le varie sezioni della pagina
in modo diverso, ad esempio eliminando dall'indice il sistema di
navigazione e concentrandosi solo sul vero contenuto della
pagina.
I tag che abbiamo visto non vengono visualizzati sulla pagina,
nel senso che sono disegnati dai browser come elementi di linea
(inline) come il tag <span> e non compromettono il design.
Ovviamente nulla vieta di modificarne l'aspetto utilizzando css
come questo:
article
{
border:1px solid red;
display:block;
margin:4px 0px;
}
che rende il tag footer un elemento di blocco, ne colora il
bordo con una linea solida rossa di 1px di spessore e lo distanzia
dagli elementi precedenti e successivi di 4px.
Html 5 e Internet Explorer
Come spesso accade, tutto quanto detto sopra non si applica ad
internet explorer 8 e precedenti. Infatti IE non riconosce i nuovi
tag e si limita ad inserirli nella struttura del documento, ma
senza considerare i tag inclusi, che vengono generati dopo il tag e
non dentro di esso. Ad esempio una struttura come questa:
...
<article>
<p>Lorem ipsum dolor...</p>
</article>
...
viene reso da IE in questo modo:
<article></article>
<p>Lorem ipsum dolor...</p>
alterando la struttura del documento e rendendo inutile un
eventuale selettore css associato al tag <article>.
Fortunatamente esiste una soluzione semplice al problema: creare
i tag sconosciuti a ie in javascript prima che il documento venga
costruito. Basta quindi inserire nell'intestazione del documento
(<head>) un codice javascript simile a questo:
<script type="text/javascript">
document.createElement("article");
</script>
e IE prenderà a riconoscere il tag <article> e lo gestirà
in maniera corretta. La soluzione è stata proposta da Remy
Sharp ed è disponibile con licenza MIT prezzo il Google
Project Hosting.
Sezioniamo il documento
I tag semantici di cui abbiamo parlato non si applicano solo al
documento, ma a ciascuna della sue sezioni. Infatti html 5 prevede
un nuovo tag <section> il cui scopo è appunto quello di
articolare il contenuto della pagina in più parti logiche, come il
contenuto principale della pagina ed una galleria di immagini.
Ogni sezione può a sua volta contenere i tag <header>,
<nav>,<article> e <footer> che abbiamo già
utilizzato. Ad esempio possiamo inserire nella pagina più tag
<nav>, uno per il documento principale, contenente i
collegamenti alle altre pagine del sito, ed uno nella sezione della
galleria di immagini, contenente il sistema di navigazione della
galleria stessa.
Un altro esempio potrebbe essere una tag <section> che
contiene al suo interno un tag <article> con il testo
principale ed un tag <footer> con le informazioni relative
all'autore e alla data dell'articolo stesso.
Attributi personalizzati
Html 5 ci permette di aggiungere ai nostri tag attributi
personalizzati che iniziano con "data-". Ad esempio:
<a id="whoAmI" href="/imgs/me.jpg" data-width="300" data-height="200">Who am i</a>
"data-width" e "data-height" sono attributi personalizzati che
non verranno presi in considerazione dai motori di ricerca e dai
validatori, ma che possiamo agevolmente utilizzare nei nostri
script, ad esempio aprendo una finestra con le dimensioni volute
con questo script:
var a = document.getElementById('whoAmI');
var w = a.getAttribute('data-width');
var h = a.getAttribute('data-height');
window.open(a.href,'popup', 'width='+w+',height='+h);