MICHELEPISANI.IT

Guida HTML5

I nuovi tag: header, hgroup, nav, section, article, aside e footer

Nuovi elementi per l'impalcatura della pagina

Agosto 19
07:452014

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>

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao alessandro,
questa regex dovrebbe fare al caso tuo:

alessandro

ciao sto cercando una regex per numeri interi o decimali, positivi o negativi; la tua regex mi pare …

Michele Pisani

Ciao Nicola,
ti riferisci per caso alla situazione di gianluigi?
In tutti i casi la via …

Nicola

Ciao Michele, mi trovo nella medesima situazione in cui si trovava Gianluca un anno fa. Sei poi …