<section>: l'elemento "Sezione generica"

L' elemento HTML <section> rappresenta una sezione generica autonoma di un documento, che non ha un elemento semantico più specifico per rappresentarlo. Le sezioni dovrebbero sempre avere un'intestazione, con pochissime eccezioni.

Note d'uso

Come accennato in precedenza, <section> è un elemento di sezione generico e dovrebbe essere utilizzato solo se non esiste un elemento più specifico per rappresentarlo. Ad esempio, un menu di navigazione dovrebbe essere racchiuso in un elemento <nav>, ma un elenco di risultati di ricerca o la visualizzazione di una mappa e i relativi controlli non hanno elementi specifici e potrebbero essere inseriti in un elemento <section>.

Considera anche questi casi:

• Se il contenuto dell'elemento rappresenta un'unità di contenuto autonoma e atomica che ha senso distribuito come pezzo autonomo (ad esempio un post di un blog o un commento sul blog, o un articolo di giornale), l'elemento <article> sarebbe una scelta migliore.
• Se i contenuti rappresentano informazioni utili tangenziali che funzionano insieme al contenuto principale, ma non ne fanno direttamente parte (come i link correlati o una biografia dell'autore), utilizzare un elemento <aside>.
• Se i contenuti rappresentano l'area del contenuto principale di un documento, utilizzare <main>.
• Se stai usando l'elemento solo come involucro di stile, usa un elemento <div>. Una regola pratica è che un <section> dovrebbe apparire logicamente nella struttura di un documento.

Per ribadire, ciascun <section> dovrebbe essere identificato, in genere includendo un'intestazione (elemento <h1> - <h6>) come figlio dell'elemento <section>, ove possibile. Vedi sotto per esempi di dove potresti vedere un <section> senza titolo.

Esempi

Utilizzo semplice

<section>
  <h2>Intestazione</h2>
  <p>Contenuto figo</p>
</section>

Utilizzo di una sezione senza intestazione

Le circostanze in cui potresti vedere <section> utilizzato senza un'intestazione si trovano in genere nelle sezioni dell'applicazione Web/interfaccia utente piuttosto che nelle tradizionali strutture dei documenti. In un documento, non ha davvero alcun senso avere una sezione di contenuto separata senza un'intestazione per descriverne il contenuto. Tali intestazioni sono utili per tutti i lettori, ma particolarmente utili per gli utenti di tecnologie assistive come gli screen reader e sono utili anche per la SEO.

Si consideri tuttavia un meccanismo di navigazione secondario. Se la navigazione globale è già racchiusa in un elemento <nav>, potresti plausibilmente racchiudere un menu precedente/successivo in un <section> :

<section>
  <a href="#">Articolo precedente</a>  
  <a href="#">Articolo successivo</a>
</section>

O che ne dici di una sorta di barra dei pulsanti per controllare la tua app? Questo potrebbe non richiedere necessariamente un'intestazione, ma è comunque una sezione distinta del documento:

<section>
  <button class="reply">Rispondi</button>
  <button class="reply-all">Rispondi a tutti</button>
  <button class="fwd">Inoltra</button>
  <button class="del">Elimina</button>         
</section>

Le sezioni senza intestazioni non vengono visualizzate nella struttura del documento. Se si desidera forzare l'inclusione di un blocco HTML di questo tipo all'interno della struttura del documento ma non influire in alcun modo sull'output visivo, è possibile includere un'intestazione ma nasconderla:

<section>
  <h2 class="hidden">Controlli </h2>
  <button class="reply">Rispondi</button>
  <button class="reply-all">Rispondi a tutti</button>
  <button class="fwd">Inoltra</button>
  <button class="del">Elimina</button>         
</section>

Assicurati di utilizzare alcune tecnologie assistive e CSS compatibili con lo screen reader per nasconderlo, in questo modo:

.hidden }
  position: absolute;
  top: -9999px;     
  left: -9999px;     
}

A seconda del contenuto, includere un'intestazione potrebbe anche essere utile per la SEO, quindi è un'opzione da considerare.