HTML5 e i nuovi elementi semantici
Nel passaggio da HTML4 ad XHTML, abbiamo visto i vecchi approcci basati sull’uso delle tabelle, lasciare il posto alla progettazione fluida caratterizzata dai div.
Con l’avvento di HTML5, vengono introdotti nuovi elementi semantici frutto di un nuovo approccio progettuale.
La domanda che si è posta il gruppo di lavoro responsabile del progetto l’HTML5 è stata: da cosa è caratterizzato un sito oggi? La risposta a questa domanda ha portato l’introduzione di nuovi tag mirati non solo a suddividere, ma anche a contraddistinguere le parti più importanti di una pagina web. Questi nuovi elementi semantici hanno due scopi: una maggiore riconoscibilità da parte dei motori di ricerca, e la possibilità di aiutare gli screenreader per disabili, ad individuare le varie sezioni di un sito.
Il web di nuova generazione, vedrà quindi ridurre l’uso dei generici div, a favore di nuovi elementi strutturali. Ecco di seguito un elenco di alcuni dei nuovi tag:
<header>
Identifica la testata di un documento o di una sezione. In base alla specifiche, dovrebbe essere usato come contenitore per la parte introduttiva della pagina web.
<hgroup>
Rappresenta l’intestazione di una sezione. Questo tag viene utilizzato per raggruppare un insieme di elementi h1-h6 quando ad esempio la pagina è organizzata in sottotitoli.
<nav>
Definisce una serie di link per la navigazione. Non è sempre necessario connotare ogni link con il tag <nav>. Il suo scopo, è quello di identificare, se esiste, una zona della pagina web destinata a contenere i gruppo più importante di collegamenti ipertestuali.
<article>
Questo tag identifica un contenuto singolo che può essere indipendente dalla pagina web. Ad esempio: l’articolo di un blog, la notizia di un giornale online, il post di un forum e così via.
<figure>
Specifica un tipo di contenuto visuale. Ad esempio foto, illustrazioni o diagrammi.
<section>
E’ un tag generico che ci consente di raggruppare le informazioni presenti in un documento HTML5. Ad esempio, potremmo raggruppare in un tag <section> una serie di articoli che hanno qualcosa in comune.
<aside>
Serve a organizzare un sottoinsieme di informazioni correlate ad un elemento adiacente. In concreto, possiamo usare questo tag per approfondire un argomento presente in un altro elemento vicino. Per esempio, supponendo di avere una sezione che tratta notizie sportive, potremmo usare questo tag per collocare al lato una serie di link o banner che trattano lo stesso argomento.
<time>
Questo elemento viene usato come riferimento ad un orario o una data.
<footer>
Specifica il piè di pagina di un documento o di una sezione. In genere contiene informazioni sul copyright o sull’autore del sito web. Quelli appena riportati, sono alcuni tra i più diffusi tag introdotti da HTML5, e sono già supportati da Explorer 9, Firefox, Chrome, Opera e Safari. In teoria potremmo strutturare una generica pagina web in questo modo:
Volendo trasformare questo schema essenziale in una pagina web reale, ci basterebbe scrivere un codice di questo tipo:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio di struttura</title>
<link rel="stylesheet" type="text/css" href="stile1.css">
<meta charset="ISO-8859-1">
</head>
<body>
<header>
header
</header>
<nav>
nav
</nav>
<aside>
aside
</aside>
<article>
article
<section>section</section>
</article>
<footer>
footer
</footer>
</body>
</html>
Come è possibile osservare, si tratta di un meccanismo in tutto è per tutto simile a quello visto per i div. In quel caso avremmo usato delle classi per identificare le varie sezioni, con le nuove regole semantiche, abbiamo già degli elementi ad hoc che fanno il lavoro al posto nostro. Ovviamente, per poter organizzare il layout di questa pagina, è necessario ricorrere ai fogli di stile. Di seguito posto il codice del CSS:
body{
margin: 0px auto;
width: 908px;
background-color: #cccccc
}
header{
float: left;
width: 100%;
height: 200px;
background-color: #99cccc
}
nav{
float: left;
width: 100%;
height: 20px;
background-color: #666699
}
aside{
float: left;
width: 312px;
height: 400px;
background-color: #4096ee
}
article{
float: right;
width: 596px;
height: 400px;
background-color: #356aa0
}
section{
width: 300px;
height: 300px;
position: relative;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
background-color: #009999
}
footer{
float: left;
width: 100%;
height: 60px;
background-color: #6b9cc9
}
Si tratta di une esempio essenziale, il cui scopo è solo quello di identificare le varie sezioni. Volendo fare un lavoro più accurato, avremmo dovuto complicare leggermente la struttura HTML e il CSS. Tuttavia, questo esempio ci è utile per riepilogare i vari concetti. Qui è possibile visualizzare la pagina online.
