Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 10 di 51
  • livello principiante
Indice lezioni

Section

Creare sezioni generiche all'interno di una pagina
Creare sezioni generiche all'interno di una pagina
Link copiato negli appunti

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:

Figura 12 - Struttura del documento: sezioni principali
schema template html5 [section]

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:

Figura 13 - Struttura del documento: suddivisione semantica del post
schema template html5 [footer]

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 Internet Explorer Firefox Safari Google Chrome Opera
<section> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+


Ti consigliamo anche