HTML 5, come molti sviluppatori web sanno, sarà, assieme ai CSS 3, il linguaggio del futuro per la  creazione dei siti web.
La creazione da parte del  W3C  di queste nuove specifiche si prefigge l’obiettivo di separare completamente la struttura dalla presentazione,obiettivo riuscito solo in parte dalle versioni precedenti dei linguaggi ancora in uso,  (x)html & css 2.1.
Nonostante HTML 5 sia un documento in working draft,ovvero è un linguaggio in bozza in attesa della Recommandation (si presume intorno al 2020), e dato che i vari browser ad ogni release implementano nuove funzionalità, nulla ci vieta di approfondirlo e studiarlo.
Prima di avvicinarmi a descrivere i nuovi elementi strutturali di HTML 5, vorrei porre l’attenzione sul DOCTYPE e il metatag charset.
Il DOCTYPE html è una dichiarazione posta all’inizio di ogni documento web e ha doppia funzionalità:

  • Predispone la pagina web per la validazione
  • Attiva la modalità standard di interpretazione del documento da parte di alcuni browser

In (x)html il DOCTYPE era prolisso.Un’esempio era:

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Questo doctype xhtml 1.0 Transitional(uno dei tre), veniva molto spesso copiato ed incollato nel documento senza cercare di capire cosa volesse significare,o comunque anche per chi conosceva la dichiarazione lo incollava senza redigerlo a mano.
Il DOCTYPE HTML 5 è estremamente semplice:

<!DOCTYPE html>  

E’ doveroso sottolineare che questa stringa è valida solo per validare siti in html 5 in working draft.Ma quando il linguaggio verrà  standardizzato, avrà il suo DTD(Document Type Definition) HTML 5 di riferimento.

Ora vediamo il metatag charset. Questo metatag viene utilizzato per definire la codifica dei caratteri in uso del documento.
Per ciò che concerneva l’(x)html era redatto cosi,all’interno dei tag <head>…</head>

<meta http-equiv=”content-type” content=”text/html; charset=”UTF-8” />

HTML 5 usa la forma più semplice da ricordare:

<meta charset=”UTF-8”>      

(vale anche la chiusura a tag vuoto, ovvero: <meta charset=”UTF-8” /> ).

Si consiglia di inserire il metatag charset subito dopo l’apertura del tag <head> onde evitare che i browser  analizzino il meta charset dopo i 512byte.

<HEADER>
L’elemento <header> contrassegna l’intestazione di una sezione del documento.Questo elemento può essere usato per identificare il logo o branding con un’eventuale slogan,per intenderci la tagline.In un documento possono coesistere una o più intestazioni.
<NAV>
L’elemento <nav> rappresenta un ausilio alla navigazione. Insieme al tag <ul> rappresenta il cosiddetto menu di un sito, e possono esistere più elementi <nav>, in diverse posizioni del documento.Se dovremmo richiamarli per dargli degli stili basta accompagnarli a delle class o id
<FOOTER>
L’elemento <footer>,in pratica, è l’alter ego del tag <header>,ovvero contrassegna la  parte inferiore di un documento.Come per l’<header>, il documento web può avere multipli <footer>.
<SECTION>
Il tag <section> demarca un insieme di contenuti tra loro logicamente correlati.Un chiaro esempio, sono le varie sezioni di un sito web come: Home, Chi Siamo, Portfolio, Contatti. Può essere usato come demarcazione di varie sezioni di capitoli di libri. Non deve assolutamente essere usato  ne come un contenitore generico da cui inserire una serie di stili o come codice di scripting, ne come contenuto disponibile via RSS, in questi casi rimane valido l’utilizzo del semplice <div>.
<ARTICLE>
Veniamo al tag <article>.Questo tag demarca un contenuto che sia, in linea di principio utilizzabile o distribuibile in modo indipendente dal resto del documento o alla solo sezione in cui è racchiuso.Si pensi all’articolo di un quotidiano online,la pubblicazione di un messaggio in un blog o forum, o il commento da parte di un utente(vedi facebook). I tag <article> possono essere annidati l’uno nell’altro,ma questo utilizzo ha senso solo se  esiste una relazione tra di essi.
<ASIDE>
L’elemento <aside> si potrebbe usare come:

  • Terza colonna di un sito o blog, ad esempio marcando un blogroll o “siti amici”, o banner pubblicitario.
  • Enfatizzare un virgolettato o qualcosa che colpisca l’occhio dell’utente, come spesso accade nei magazine: in questo caso ha correlazione debole in modo tangenziale.

Tutti questi nuovi elementi  strutturali html 5 sono elementi block.
Un’ultima considerazione,parlando di retrocompatibilità, Internet Explorer precedenti alla versione 9  non supporta questi nuovi elementi strumenti HTML 5. Un metodo semplice per essere supportati consiste in una libreria Javascript ponendola nei commenti condizionali. Qui di seguito propongo lo script html 5shiv;

<!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

Qui proporrò un’esempio concreto di come utilizzare i nuovi tag strutturali HTML 5.

<!DOCTYPE html>
 <html>
  <head>
  <meta charset=”UTF-8” />
  <title>Nuovi elementi strutturali HTML 5!!!!</title>
  </head>
  <body>
  <header>
  <h1>Intestazione</h1>
  </header>
  <nav>
  <ul>
  <li><a href=”#”>Home</a></li>
  <li><a href=”#”>Chi Siamo</a></li>
  <li><a href=”#”>Portfolio</a></li>
  <li><a href=”#”>Contatti</a></li>
                                    </ul>
  </nav>
  <section>
   <!--  QUI CONTENUTO -->
                <article>
     <!--  QUI CONTENUTO -->
  </article>
  </section>
  <aside>
  <!-- QUI CONTENUTO -->
  </aside>
  <footer>
  </footer>
  </body>
 </html>

CSS

  header, nav, section, aside, article, footer 
{  display: block;} /*per internet explorer < 9*/
nav {  width: 15%;
          float: left;
 }
 section {  width: 70%;
                float: left;
 }
 aside  {  width: 15%;
             float: right;    
 }