Nuovi elementi per l'impalcatura della pagina

Il tag header è un contenitore riservato sia agli elementi di navigazione, le barre dei menù per intenderci, che agli elementi di intestazione che introducono l'argomento della pagina, il tag h1 per il titolo, h2 per il sottotitolo, ecc... Esso non deve necessariamente trovarsi all'inizio del corpo della pagina anche se solitamente è posizionato subito dopo l'apertura del tag body ma può trovarsi anche all'interno di altri tag come section, article, ecc... in tutti i casi va fatto presente che la sua presenza non è obbligatoria e che, ove presente, non obbliga gli altri elementi (come appunto il menù di navigazione) ad essere posizionati al suo interno. In uno scenario classico all'interno del tag header, a rafforzare la presenza degli elementi che racchiude, è possibile trovare altri due tipi di tag: hgroup e nav che contengono a loro volta l'uno gli elementi di intestazione e l'altro quelli di navigazione, come mostrato nel seguente codice preso dall'esempio sui nuovi content models dell'articolo precedente:

<header>
  <hgroup>
    <h1>Lista della spesa online</h1>
    <h2>Elenco di alimenti e bevande suddiviso per reparto alimentare</h2>
  </hgroup>
  <nav>
      <ul>
        <li><a href="#">Profilo</a></li>
        <li><a href="#">La mia spesa</a></li>
        <li><a href="#">I miei ordini precedenti</a></li>
        <li><a href="#">I miei prodotti preferiti</a></li>
      </ul>
  </nav>
</header>

E' importante utilizzare il tag nav per racchiudere gli elementi di lista e non per sostituirli e per racchiudere solo i menù di navigazione principali, quindi ad esempio non dovrà racchiudere le briciole di pane o i link nel footer.

Il tag footer è invece un contenitore riservato alle informazioni relative alla sezione che lo contiene, da qui si evince che in una stessa pagina web possono esistere più contenitori di tipo footer qualora esistano più sezioni. Non deve necessariamente trovarsi all'interno di un tag section ed in questo caso non è obbligatorio che si trovi in fondo alla pagina. Le informazioni in esso contenute spaziano solitamente dai dati di copyright del sito e link interni qualora non si riferisca ad una particolare section ma sia figlio diretto del tag body a metadati come l'autore dell'articolo, la data di pubblicazione, i tags, così come link a categorie o argomenti correlati nel caso faccia parte di una sezione. Avendo introdotto la questione metadati è inevitabile un accenno ad altri tre particolari tag atti a contenerli: dl, dt e dd. Essi definiscono un elenco di definizione dove il primo (dl) è il contenitore principale di tutti i metadati di quella particolare sezione dentro il quale sono definiti gli altri due che, a coppia, possono ripetersi a seconda del tipo e della quantità di informazioni da inserire e che rispettivamente indicano il termine (dt) e la sua definizione (dd). Un esempio chiarirà sicuramente il concetto:

[...]
  <section>
    <article>
      <header>[...titolo e subtitolo ...]</header>
      <p>[...testo dell'articolo...]</p>
      <footer>
        <dl>
          <dt>Articolo creato da</dt>
          <dd><address><a href="mailto:[...]">Michele Pisani</a></address></dd>
          <dt>Data</dt>
          <dd><time datetime="2014-08-19" pubdate="pubdate">Lunedì 18 Agosto</time></dd>
        </dl>
      </footer>
    </article>
  </section>
  <footer>www.michelepisani.it © 2014 Michele Pisani</footer>
</body>
</html>

Dal codice appena mostrato possiamo introdurre un altro elemento, il tag section, che funge da contenitore di contenuti univoci nella pagina ovvero raggruppa informazioni e tag relative ad un determinato contenuto. La pagina può quindi contenere più di un elemento di tipo section e non necessariamente tale elemento deve intendersi come contenitore più estremo ma può trovarsi anche all'interno di altri tag con funzioni simili, come il tag article. E' importante utilizzarlo con lo scopo di raggruppamento tematico e non di impaginazione in sostituzione ai div.

Inevitabile a questo punto la presentazione del tag article che in un certo senso è, come visibile sempre nel codice postato sopra, una sorta di section. Può quindi essere ripetuto in una stessa pagina e trovarsi annidato all'interno di un altro tag dello stesso tipo. Può essere utilizzato per ospitare il vero e proprio articolo della pagina e riutilizzato sotto per racchiudere altri elementi sempre relativi all'articolo come ad esempio ciascun eventuale commento da parte degli utenti (che come l'articolo stesso ha un autore e una data).

Da non trascurare il tag aside che da specifiche è indicato per racchiudere quegli elementi facenti parte di un determinato contenuto le cui informazioni sono però marginali, ma che, data la sua natura, si adatta bene a contenere colonne laterali di un sito o un blog e pertanto atto ad ospitare articoli correlati, banner pubblicitari ma anche link a categorie inseriti come menù di navigazioni all'interno nel tag nav; il codice seguente ne mostra un esempio:

  [...]
    <header>
      <hgroup>[...titolo e subtitolo ...]</hgroup>
      [...nav...]
    </header>
    <aside>
      <section>
        <h2>Sponsor:</h2>
        <img src="/banner_spondor.jpg" />
      </section>
      <nav>
        <h2>Categorie:</h2>
        <ul>
          <li><a href="/javascript/">javascript</a></li>
          <li><a href="/css/">CSS</a></li>
          [...]
        </ul>
      </nav>
    </aside>
    <section>
      <header>[...titolo e subtitolo ...]</header>
      <article><p>[...testo dell'articolo...]</p></article>
    </section>
    <section>[...]</section>
    <footer></footer>
  </body>
</html>