Indice

I tag section consentono di organizzare il flusso del contenuto in una pagina Web e di riutilizzare facilmente i relativi elementi in altri punti. Sostituiscono i tag <div> generici, offrendo opzioni più significative per la scrittura del codice. Il tag section è molto utile per la distribuzione e la composizione dinamica dei contenuti da diverse fonti. Rappresenta inoltre un valido aiuto quando si scrive un libro o un blog, ad esempio, con diverse pagine e oggetti raggruppati in sezioni.

A un livello inferiore, quando si utilizza questo tag, la sezione è impostata come nodo principale nella struttura del documento e a tale nodo sono collegati tutti gli elementi successivi. L'espansione di questa struttura restituisce un risultato simile al seguente:

section | +--h1 (first heading, child of section) | | | +--text node "Hello WebWorld" | +--p (child of section, sibling of h1) | +--text node "This is your text" |

Section, article e aside

Il tag principale è <section> che, come indicato dal nome, rappresenta un raggruppamento tematico dei contenuti, in genere con un'intestazione. Il tag section è generico e può essere modificato in funzione della suddivisione del contenuto; ad esempio, le sezioni introduzione, sviluppo, conclusione e ulteriori informazioni possono rappresentare ciascuna una diversa sezione.

Tuttavia, se si prevede di ridistribuire il contenuto in altre pagine, è necessario utilizzare il tag <article>. Il tag article crea una sezione o un elemento autonomo che può essere distribuito o riutilizzato in modo indipendente. Inoltre, consente di mantenere il layout della documentazione separando intestazioni diverse. Quindi, quando si definiscono i tag <h1> - <h6> in articoli diversi, l'intestazione precedente non interferirà con quella successiva.

Il tag <aside> consiste in contenuto collegato marginalmente al contenuto che lo circonda e potrebbe essere considerato anche separato da tale contenuto. Un esempio è rappresentato da una nota a margine su uno specifico paese in un articolo sull'Europa o da collegamenti agli archivi di un blog. Il tag aside può essere utilizzato anche per citazioni e barre laterali, nonché per includere annunci pubblicitari o qualsiasi altro contenuto considerato separato dal contenuto principale.

Altri nuovi tag di sezionamento

All'interno di un'area section, article o aside, è possibile utilizzare i seguenti tag:

<header>: rappresenta un gruppo di ausili introduttivi o di navigazione e crea la struttura per un documento. Contiene in genere le intestazioni delle sezioni, ma può essere anche utilizzato per i contenuti di una sezione, un modulo di ricerca o i loghi del caso.

<hgroup>: rappresenta l'intestazione di una sezione. L'elemento viene utilizzato per raggruppare un insieme di elementi h1 – h6 quando l'intestazione include più livelli, come sottotitoli, titoli alternativi o slogan.

<figure>, <figcaption>: si tratta di un elemento che rappresenta immagini all'interno del contenuto, utilizzato in genere per annotare illustrazioni, diagrammi, foto, elenchi di codice e così via. La didascalia è rappresentata dall'elemento figcaption opzionale.

<nav>: viene utilizzato per rappresentare un blocco di collegamenti di navigazione che fanno riferimento a una sezione.

<footer>: definisce il contenuto di sezionamento del suo predecessore più prossimo (article, aside, nav, section) e contiene, in genere, informazioni relative alla sezione, quali collegamenti, dati di copyright e informazioni sull'autore.

HTML5 Section demo Title goes here

And subtitle...

Home | Blog | About | Contact | Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam magna...

Section

...angam maid ue essidnepsuS .tile gnicsipida rutetcesnoc ,tema tis rolod muspi meroL

Archives

• October 2011
• September 2011
• August 2011

AppUp^SM Developer Program -->

<header>
    <h1>Title goes here</h1>
    <h2>And subtitle...</h2>
    </header>

    <nav><a href="/en-us/home/">Home</a> |
      <a href="/en-us/blog/">Blog</a> |
      <a href="/en-us/about/">About</a> |
      <a href="/en-us/contact/">Contact</a> |
    </nav>

  <article>
    <h1>Article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam magna...</p>
    <section>
       <h1>Section</h1>
       <p>...angam maid ue essidnepsuS .tile gnicsipida rutetcesnoc ,tema tis rolod muspi meroL</p>
    </section>
  </article>

  <aside>
    <h1>Archives</h1>
    <ul>
      <li>October 2011</li>
      <li>September 2011</li>
      <li>August 2011</li>
    </ul>
  </aside>

  <footer>AppUp<sup>SM</sup> Developer Program</footer>

Tag di sezionamento esistenti

Di seguito sono riportati gli altri tag preesistenti per il sezionamento dei contenuti e supportati dalla nuova specifica:

<body>: rappresenta il contenuto principale del documento. È presente un solo elemento body in una pagina conforme alla specifica HTML.

<address>: nelle versioni HTML precedenti, rappresentava le informazioni di contatto per l'autore o il proprietario della pagina. In HTML5, è possibile inserire il tag address in un articolo e rappresenta, quindi, le informazioni di contatto per l'autore o il proprietario dell'articolo.

Ulteriori risorse

Per ulteriori dettagli ed esempi sui tag section HTML5, è consigliabile fare riferimento alle seguenti risorse:

1. Dive Into HTML5, la versione online dell'interessante libro HTML5: Up and Running

2. HTML 5 Reference on Section tags

3. Per ulteriori demo ed esempi