Gli elementi di sezione dividono una pagina in regioni significative. Molti di essi si mappano a landmark ARIA — regioni denominate che permettono agli utenti di tecnologie assistive di saltare tra loro, come un sommario della pagina.
...
Details
...
...
Gli utenti di screen reader possono premere un tasto per elencare i landmark e saltare direttamente a <main>, evitando header e nav ripetuti. Si tratta di un guadagno di efficienza significativo — i tag semantici lo forniscono automaticamente, nessun ARIA necessario.
<article> — contenuto che ha senso da solo e potrebbe essere distribuito: un post di blog, una scheda prodotto, un commento.<section> — un raggruppamento tematico all'interno di un documento, normalmente con il proprio heading. Non autonomo.<article>
<h1>Blog post title</h1>
<section><h2>Introduction</h2>...</section>
<section><h2>Conclusion</h2>...</section>
</article>
Regola generale: se potrebbe stare da solo, è un <article>; se è solo un pezzo etichettato di un insieme più grande, è una <section>. Non usare <section> puramente come wrapper di stile — quello è il compito di <div>.
Usare gli elementi di sezione corretti ti fornisce landmark gratuiti e robusti per la navigazione da tastiera/screen reader e un chiaro outline del documento — migliorando l'accessibilità e la SEO senza alcun attributo ARIA aggiuntivo.