Guida HTML interattiva: Section

A cosa serve il tag section

<section> raggruppa contenuti su un unico tema, e inizia con un titolo che dà il nome a quel tema. Una landing page divisa in "Features", "Pricing" e "FAQ" è un caso da manuale:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

Ogni sezione è un capitolo della pagina, e ogni titolo è una riga dell'indice della pagina. Come gli altri tag semantici, <section> non ha uno stile predefinito; i bordi vengono dal CSS.

section vs article vs div

Sullo schermo i tre sembrano uguali. Cambia quello che dicono del contenuto:

Elemento	Significa	Prova
`<article>`	Un pezzo completo e autonomo	Avrebbe senso pubblicato da solo, su un altro sito o in un feed?
`<section>`	Una parte tematica di un insieme più grande	Ha (o gli serve) un titolo, ed è un capitolo di qualcosa?
`<div>`	Niente: un contenitore per stile o layout	Serve solo per il CSS o per JavaScript?

Post di un blog, commenti di un forum, notizie e schede prodotto sono article. "Funzionalità", "Capitolo 2" e "Prodotti correlati" sono section. Una riga flex che allinea tre schede è un div.

Article dentro una section

I due si annidano in entrambe le direzioni. Qui una sezione "Latest posts" contiene diversi articoli indipendenti:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

Nota il <div class="grid">: esiste solo per disporre le schede in riga, quindi un div è il tag giusto. Ogni scheda è un article perché ogni post sta in piedi da solo.

Section dentro un article

Un articolo lungo può essere diviso in sezioni, proprio come i capitoli di un libro. I livelli dei titoli proseguono da quello dell'articolo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

Il riquadro blu è l'article (l'intera guida), le barre verdi sono le sue section. Dai a una section il suo livello di titolo: un article con h2 contiene section con h3.

Le section con un nome diventano landmark

Gli screen reader elencano alcuni elementi come landmark tra cui gli utenti possono saltare. Una <section> diventa un landmark region solo quando ha un nome accessibile. Punta aria-labelledby al suo titolo:

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

Fallo per le poche sezioni a cui un utente vorrebbe saltare direttamente, non per tutte: una pagina con venti landmark è difficile da esplorare quanto una che non ne ha nessuno. Anche le sezioni senza nome aiutano, perché i loro titoli compaiono nella lista dei titoli dello screen reader.

Le sezioni sono anche ottime destinazioni per i link interni alla pagina. Dai a una sezione un id e un link con href="#id" salta fino a lì:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

Errori comuni

Usare <section> come contenitore per lo stile. Se non ci sono né un titolo né un tema, usa <div>. La pagina sull'HTML semantico mostra dove va ogni tag di layout.
Racchiudere un singolo post di un blog in <section>. Un post che sta in piedi da solo è un <article>.
Sezioni senza titolo. Aggiungi un titolo, anche nascosto alla vista, oppure ripensa se è davvero una sezione.
Sostituire <main> con <section>. Il contenuto principale della pagina va in <main>; le sezioni vanno dentro.
Dare un nome a ogni sezione. Aggiungi aria-labelledby solo a quelle importanti, così la lista dei landmark resta corta.

Domande frequenti

Cos'è il tag section in HTML?

<section> raggruppa contenuti che appartengono a un unico tema, come un capitolo di un documento o la parte "Prezzi" di una landing page. Di norma dovrebbe iniziare con un titolo che dice di cosa parla la sezione.

Che differenza c'è tra section e div?

<section> dice che il contenuto è una parte tematica del documento con un proprio titolo. <div> non dice niente; è un contenitore per lo stile o il layout. Se ti serve solo un contenitore per il CSS, usa <div>.

Che differenza c'è tra section e article?

<article> è un contenuto che ha senso da solo, fuori dalla pagina: un post di un blog, un commento, la scheda di un prodotto. <section> è una parte di qualcosa di più grande che ha senso solo nel suo contesto. Chiediti se potresti pubblicare quel pezzo da solo: se sì, è un article.

Un article può contenere section, e una section può contenere article?

Sì, entrambe le cose. Un articolo lungo può essere diviso in sezioni, e una sezione come "Ultimi post" può contenere una lista di articoli.

Una section ha bisogno di un titolo?

Dovrebbe averlo quasi sempre, perché è il titolo a dare il nome al tema. Se non riesci a trovarle un titolo, probabilmente il contenuto non è una sezione e un <div> è più adatto.

Concetti correlati