Come realizzare una pagina in Html5: novità e semantica

Che cosa è cambiato, e che cosa cambia con HTML5? Per rispondere a questa domanda servirebbero numerose pagine o comunque diverse guide; abbiamo già fatto alcuni cenni al valore di alcuni nuovi tag, così come l’importanza di differenziare una rappresentazione stilistica da una semantica, come nel caso dei tag <strong> ed <em>. Tuttavia, l’elemento che andiamo ora ad analizzare è uno di quelli che maggiormente contraddistingue HTML5 dai suoi predecessori: vediamo infatti comel’aspetto semantico stia diventando fondamentale nel realizzare i llayout di una pagina in html5. Che cosa significa? Significa che anche la struttura della nostra pagina dovrà essere sempre più coerente con il contenuto che conterrà, per facilitare i motori di ricerca sempre protesi a trovare contenuti di qualità (e facilitare in parte il lavoro del SEO sulla pagina). Se per esempio finora abbiamo sempre utilizzato il tag <p> per indicare un elemento preciso di layout in cui era contenuto un elemento descrittivo, faremo allo stesso modo in html5 per le sezioni e le porzioni di pagina. L’era del web semantico è infatti incominciata! Andiamo quindi a vedere concretamente un applicazione di quanto appena detto.

La struttura dell’ homepage di un sito-blog in html5

Nell’illustrazione accanto vediamo un esempio concreto, che ora dettagliamo passo passo, di applicazione dei concetti appena esposti e di come siano possibili soluzione diverse in base alle esigenze realizzative di ognuno di noi.

La parte in alto è definita <header>, un luogo dove è presumibile che si vada ad inserire un titolo ed un menu di navigazione rappresentato dal tag  <nav>. Ok, avrete già visto che ci sono più <header> nella pagina. Ebbene, con HTML5 cade il mito di un solo H1 per pagina. <header> infatti si configura come un contenitore di intestazioni al cui interno, in zone separate, è possibile anche includere più <h1>.

La colonna sinistra è racchiusa invece dentro un elemento <section> (e non <article>) dal momento che non può essere realmente considerato un elemento indipendente. E’ buona prassi utilizzare questo tag in due situazioni:

• Quando il contenuto non è pensato per essere ridistribuito (ad esempio via RSS). E’ facile che in una homepage non si abbia la necessità di ridistribuire i contenuti, spesso infatti presenta solo piccoli estratti di articoli e magari diversi tra loro.
• Per raggruppare più articoli all’interno di una sezione.

Per un approfondimento sull’uso del tag <section> vi rimando a questo articolo molto interessante che analizza dettagliatamente quanto viene detto nella specifica ufficiale.

Dentro alla <section> e sotto all'<header> che la identifica, troviamo una raccolta di 4 articoli, con le loro rispettive intestazioni (in cui sono raccolti titoli, sottotitoli eventuali, informazioni sulla data di pubblicazione, sull’autore ecc…). Questi sono sicuramente articoli e non section. I loro contenuti infatti possono essere considerati indipendentemente dal resto della pagina da un punto di visto semantico e contenutistico.
Nella colonna destra troviamo una sezione (per esempio Chi siamo) che può anch’essa essere considerata a sè stante e quindi racchiudibile dentro al tag <article>. E’ una sorta di piccolo documento dentro al documento più grande che è la pagina. Oltre all'<header> abbiamo un’immagine che inseriremo dentro al tag <figure>. E’ possibile, sotto all’immagine ma sempre dentro a <figure> inserire una descrizione della stessa usando l’elemento <figcaption>. Il dibattito sull’uso di questi due tag è tuttavia costantemente aperto, per maggiori dettagli in merito ti consiglio di visitare html5doctor.

Sotto alla zona Chi Siamo troviamo un altro blocco, realisticamente rappresentativo degli ultimi prodotti che vorremmo esporre. Si sarebbero potuti raccogliere più <article> nuovamente oppure usare, come si è fatto, una lista di elementi per non attribuire alcun valore semantico. E’ una scelta da fare in base alle proprie esigenze, non esiste una regola universale!

In chiusura di pagina troviamo un <footer> dove potremmo raccogliere informazioni svariate ed eventualmente altre raccolte di links. E’ bene precisare che possono esistere più footer in una pagina!

Esempio di markup utilizzato per realizzare la pagina d’esempio

< !DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Esempio homepade di blog in html5</title>
</head>
 
<body>
<header>
  <h1>Titolo del tuo blog</h1>
  <nav><!-- contenuto menu di navigazione principale --></nav>
</header>
 
<section id="UltimeNews">
  <header>
    <h1>Titolo di questa sezione: News</h1>
  </header>
 
  <article>
    <header>
      <hgroup>
        <h1><a href="#">Titolo dell'articolo</a></h1>
        <h2>Scritto alle
          <time pubdate="pubdate" datetime="2011-02-19T10:00">10:00</time>
        </h2>
      </hgroup>
    </header>
    <p>Contenuto di questa news</p>
  </article>
 
  <!-- eventuali altri articoli -->
 
</section>
 
<article id="ChiSiamo">
  <h1>Chi Siamo</h1>
  <figure>
    <img src="#" alt="Una foto di chi siamo andrà qui" />
    <figcaption>Descrizione della foto inserita</figcaption>
  </figure>
  <p><!-- contenuto --></p>
</article>
 
<section id="LatestProducts">
  <header>
    <h1>Ultimi prodotti</h1>
  </header>
  <ul>
    <li><a href="#"><img src="#" /></a></li>
    <li><a href="#"><img src="#" /></a></li>
    <li><a href="#"><img src="#" /></a></li>
    <li><a href="#"><img src="#" /></a></li>
  </ul>
</section>
 
<footer><!-- contenuto footer --></footer>
 
</body>
</html>

Note interpretative e conclusive

Da quanto appena detto avrai capito che ci sono diverse possibilità interpretative. Per esempio, per quanto riguarda la zona “Chi Siamo” si sarebbe potuto usare il tag <aside> invece di <article> se si fosse deciso che questo blocco non era indipendente dal resto ma tangenzialmente connesso al contenuto della pagina. Oppure avremmo potuto trattarlo come un <footer> nel caso in cui fosse stato considerato come una raccolta di semplici informazioni riguardo all’autore. E così via. Ciò che è importante ricordare, e concludo, è che ogni elemento può essere utilizzato per contestualizzare meglio se stesso e tutti gli altri per acquistare un valore diverso. E’ bene quindi conoscere tutti i tag e poi far sì che siano la logica e la semantica a guidarci nella scelta migliore, per noi, per gli utenti ed anche (e forse soprattutto) per i motori di ricerca. I nuovi tag infatti, proprio per la loro natura semantica, contribuiranno al posizionamento della nostra pagina come fattori SEO a tutti gli effetti! È bene quindi valutare e ponderare bene ogni scelta.

Retrocompatibilità per i tag semantici

Per tutti coloro che volessero iniziare ad utilizzare i nuovi tag nei propri progetti è bene prestare attenzione ai browser di casa microsoft antecedenti IE9 che non supportano nessun elemento e tantomeno lo renderizzano correttamente. Per ovviare a questo problema è stata creato un semplice script javascript, incluso il quale, non avremo più nessun problema! Lo script si chiama html.js e lo trovi qui!