Struttura di un sito in HTML5: header, nav, section, article, aside, footer e il nuovo doctype

Vediamo caratteristiche principali e novità della nuova struttura modulare per le pagine web scritte in HTML5.

La nuova e ordinata struttura modulare prevista dall’HTML5 è possibile grazie all’implementazione di nuove specifiche di marcatura: vediamole insieme.

DOCTYPE

Un cenno merita il nuovo DOCTYPE definito in HTML5: nessuna stringa lunga e confusa, ma solo un semplice snippet che indica al browser che tipo di documento sta elaborando.

Eccolo:

<!DOCTYPE html>

HEADER

Il tag <header> serve per mostrare informazioni introduttive inerenti ad una sezione di documento oppure ad un’intera pagina.

<header><h1>Benvenuto nel mio sito web</h1><p>qui va il contenuto…</p></header> <p>The rest of my home page...</p>

NAV

Come facilmente intuibile, il tag <nav> serve a delimitare una sezione dedicata a custodire gli elementi per l’esplorazione del sito: è in pratica un marcatore per il menu di navigazione.

<nav><a href="index.html">Home</a><a href="chi-siamo.html">chi siamo</a><a href="contatti.html">contatti</a></nav>

SECTION

Il tag <section> serve per stabilire un raggruppamento tematico di contenuti. Questo tag può essere usato ad esempio per ospitare e mostrare la parte centrale dei contenuti di navigazione.

<section>  <h1>Webmasterpoint.org</h1>  <p>Werbmasterpoint.org è il sito di riferimento italiano per sviluppatori e web designer</p></section>

ARTICLE

Come specificato in una nota del WHATWG (Web Hypertext Application Technology Working Group), il tag <article> serve a definire una sezione di contenuto che forma una parte indipendente di una porzione di documento o di un sito. In parole povere, tutti quei contenuti come news, blog post e simili.

<article><a href="http://www.sito-news-italia.com/2011/05/25/news-del-giorno.html">link ipertestuale</a><br />Qui va il contenuto della notizia del giorno</article>

ASIDE

Il tag <aside> serve per fornire informazioni supplementari all’utente: è un tag che fa da contorno al flusso informativo principale, creando un approfondimento che può essere utile in alcuni casi (come spiegazioni particolari).

<p>Il TNT è un potente esplosivo.</p><aside><h4>TNT</h4>TNT è l’acronimo di trinitrotoluene, meglio conosciuto come “tritolo”.</aside>

FOOTER

Il tag <footer> serve generalmente a inglobare, a piè di pagina, informazioni come autore, data di creazione del sito e simili.

<footer>Copyright 2011-2012 WMP</footer>

In pratica, la creazione di pagine web avviene seguendo una precisa “scaletta” d’implementazione. Risultato: un markup più pulito e facilmente gestibile.