Section

Funzioni e dati tecnici

Il tag <section>, secondo la definizione presente nella specifica HTML5, rappresenta una sezione generica di un documento o applicazione. L'elemento <section>, in questo contesto, individua un raggruppamento tematico di contenuti,ed in genere contiene un titolo introduttivo.

Vediamo quindi quali sono i punti fondamentali da ricordare riguardo il suo utilizzo:

1. l'elemento <section> non deve essere utilizzato in sostituzione del <div> per impostare graficamente la pagina; inoltre è fortemente consigliato utilizzare i <div> anche quando risultano più convenienti per gli script;
2. l'elemento <section> non deve essere preferito all'elemento <article> quando i contenuti possono essere ripubblicati anche su altri siti;
3. l'elemento <section> e l'elemento <article> non sono indipendenti ed esclusivi: possiamo avere sia un <article> all interno di un <section> che viceversa.

<article>
    <section>
        <h1>Titolo 1</h1>
        <p>Testo correlato al titolo 1.</p>
    </section>
    <section>
        <h1>Titolo 2</h1>
        <p>Testo correlato al titolo 2.</p>
    </section>
</article>

L'elemento <section> può essere utilizzato in combinazione con l'attributo cite attraverso il quale è possibile specificare l'url dalla quale si stanno riportando i contenuti.

Section: esempi concreti

Come abbiamo visto nei capitoli precedenti, il codice del nostro progetto inizia a prendere una forma più chiara e definita: infatti, dopo aver compreso l'utilità semantica dell'<header> e del <footer>, capiamo come utilizzare l'elemento <section> all'interno del nostro blog.

Per strutturare la pagina raggruppando i contenuti correlati, in ordine decrescente incontriamo le prime due grandi macrosezioni del blog: "l'ultimo post" e "i post meno recenti" contenuti quindi in due <section>:

<section>
     <h1>L'ultimo post</h1>
      <article>
          [contenuto del post...]
          <section>
          [commenti...]
          </section>
      </article>
</section>
<section>
     <h1>Post meno recenti</h1>
      <article>
      [contenuto del post...]
      </article>
  	  <article>
      [contenuto del post...]
      </article>
      <article>
      [contenuto del post...]
      </article>
</section>

Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresenta nel nostro progetto:

Nel nostro progetto le <section>, oltre a poter raggruppare i vari <article>, sono presenti anche all'interno del primo <article> per suddividere i commenti dal contenuto del post. La sezione dei commenti a sua volta contiene un'altra sezione contenente il form per l'inserimento di un nuovo commento:

<article>
      [contenuto del post...]
      <section>
          <article>
             [commento1...]
          </article>
          <article>
             [commento2...]
          </article>
          <article>
             [commento3...]
          </article>
          <section>
             [Inserisci un nuovo commento...]
          </section>
      </section>
   </section>
</article>

In questo modo il post è diviso in maniera molto netta rispetto ai propri contenuti solo con l'ausilio dei tag HTML5, separando quindi i commenti che sono una sezione aggiuntiva eventualmente anche eliminabile dall'argomento principale trattato all'interno dell'articolo.

Lo schema dell'articolo analizzato è quindi il seguente:

Il tag <section> rappresenta un elemento che viene considerato una sezione a sé stante dall'outliner e quindi un blocco con dei contenuti univoci che necessitano di un titolo (<hN>) che li riassuma. Come vedremo nelle prossime lezioni esistono anche altri elementi nelle specifiche HTML5 che sono considerati "contenitori di sezionamento dei contenuti".

Tabella del supporto sui browser

Nuovi tag semantici e strutturali
<section>	9.0+	3.0+	3.1+	5.0+	10.0+