Page 43 - Guida tascabile HTML5

Un altro tag reso disponibile con l’introduzione della specifica HTML5 è

<section>. Questo tag, combinato con il tag <article> appena descritto, permette di
coprire le più comuni casistiche cui potreste andare incontro mentre progetti la

struttura di una pagina.

Il valore semantico di questo tag si discosta da <article>, poiché è più generico:

una sezione è intesa come un raggruppamento tematico del contenuto. Tale
raggruppamento sarà normalmente identificato da un titolo (un tag da <h1> a <h6>),

che contribuirà a dettagliare l’argomento della sezione stessa.

NOTA Un buon sistema per valutare l’utilizzo di un tag <section> è proprio quello di

ragionare sull’opportunità di attribuire un titolo al blocco di contenuto in questione.
Tenete presente che, rispetto ad <article>, il raggruppamento può essere inteso

come una suddivisione più ampia (immaginate per esempio la sezione sportiva di

una testata giornalistica, che raggruppa più articoli legati a quell’argomento), o più
specifica (immaginate per esempio la descrizione di una ricetta che comprende una

sezione dedicata agli ingredienti necessari e una dedicata alla preparazione).

Ecco un esempio di applicazione del tag <section> che suddivide per argomento
gli articoli di una testata giornalistica:

<main>
<h1>Gli articoli di oggi</h1>
<section>
<h1>Sport</h2>
<article>
<header>
<h1>Basket</h3>
<p>I risultati della giornata</p>
</header>
<p>...</p>
</article>
<article>
<header>
<h1>Pallavolo</h1>
<p>Uno sguardo alla classifica</p>
</header>
<p>...</p>
</article>
</section>
<section>
<h1>Tecnologia</h2>
<article>
<header>
<h1>Smartphone</h1>
<p>Il miglior dispositivo mobile di sempre</p>
</header>
<p>...</p>
</article>
<article>
<header>
<h1>La casa intelligente</h1>