Tag HTML <section>
Il tag <section> raggruppa contenuti tematici. Scopri quando usare section vs article vs div, la regola dei titoli e il landmark region.
L'elemento HTML <section> è uno degli elementi semantici HTML5. Raggruppa un insieme di contenuti correlati che forma una parte tematica della pagina — una parte che, idealmente, apparirebbe come voce nel profilo del documento (un blocco di notizie, un'area "Contattaci", un capitolo di un lungo articolo, ecc.).
Questa pagina spiega cosa significa <section>, come scegliere tra <section>, <article> e <div>, perché una sezione ha quasi sempre bisogno di un titolo e la regola sull'accessibilità che trasforma una sezione in un landmark navigabile.
Quando usare <section> vs <article> vs <div>
Questi tre elementi sembrano intercambiabili, ma hanno significati molto diversi. Scegli in base all'intento, non all'aspetto:
<section>— un raggruppamento tematico di contenuti che appartiene al profilo della pagina e ha il proprio titolo. Usalo quando il contenuto è "una parte distinta di questa pagina" ma non ha senso da solo se rimosso dalla pagina. Esempi: un blocco Introduzione, un blocco Prezzi, un blocco Recensioni su una pagina prodotto.<article>— una composizione autonoma e distribuibile indipendentemente. Usalo quando il contenuto avrebbe senso anche se estratto e pubblicato altrove (un feed sindacato, una voce RSS, un risultato di ricerca). Esempi: un post di blog, una notizia, un singolo commento utente, una scheda prodotto.<div>— nessun significato semantico; un contenitore generico che esiste solo come aggancio per stili o script. Usa<div>quando hai semplicemente bisogno di un wrapper per il layout (un contenitore flex/grid, una colonna) e non vi sono contenuti tematici da etichettare.
Un test rapido: se puoi dare al blocco un titolo significativo, probabilmente è un <section>. Se il blocco potrebbe stare da solo come pagina o voce di feed, è un <article>. Se lo stai aggiungendo solo per collegare CSS o una classe, è un <div>.
Non usare <section> come wrapper generico per il layout o lo stile. Se un blocco di markup non ha significato tematico e non ha un titolo, usa invece un <div>.
Il requisito del titolo
HTML si aspetta che ogni <section> sia identificata, e il modo normale per farlo è con un titolo (<h1>–<h6>). Una sezione senza titolo non ha un argomento chiaro e produce una voce confusa e "senza titolo" nei profili del documento della tecnologia assistiva.
Usa il livello di titolo adatto alla profondità di annidamento: un <h2> per una sezione di primo livello sotto l'<h1> della pagina, un <h3> per una sezione annidata un livello più in profondità, e così via. Mantieni la gerarchia logica senza saltare livelli — consulta HTML Headings per le regole.
<h1>Web technologies</h1>
<section>
<h2>HTML</h2>
<p>HTML is the standard markup language for creating web pages.</p>
</section>
<section>
<h2>CSS</h2>
<p>CSS describes how HTML elements should be presented.</p>
</section><section> e accessibilità: il landmark region
Una <section> non è automaticamente un landmark raggiungibile dagli utenti di screen reader. Diventa un landmark region navigabile solo quando ha un nome accessibile. È possibile assegnarlo in due modi:
aria-labelledbyche punta all'iddel suo titolo (preferito — il titolo visibile e il nome accessibile rimangono sincronizzati), oppurearia-labelcon una stringa letterale (quando non è presente un testo di titolo visibile a cui fare riferimento).
Senza un nome, la sezione è solo un raggruppamento per il profilo; con un nome, compare nell'elenco dei landmark dello screen reader.
<section aria-labelledby="pricing-heading">
<h2 id="pricing-heading">Pricing</h2>
<p>Choose the plan that fits your team.</p>
</section>
<!-- No visible heading? Name it directly: -->
<section aria-label="Search results">
<p>3 results found.</p>
</section>Ecco perché <section> si distingue da elementi come <main>, <aside>, <header> e <footer>: questi espongono ruoli landmark autonomamente, mentre <section> richiede un nome per farlo.
Sintassi
Il tag <section> viene usato in coppia. Il contenuto è scritto tra i tag di apertura (<section>) e di chiusura (</section>).
Esempio del tag HTML <section>:
<!DOCTYPE html>
<html>
<head>
<title>Using the section tag</title>
</head>
<body>
<section>
<h2>Hypertext markup language HTML</h2>
<p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</section>
<section>
<h2>CSS</h2>
<p>Formal language, which is used as a description zone, formatting the appearance of a web page, written by the help of markup languages HTML and XHTML, but it can be applied to any XML-document, for example, to SVG or XUL.</p>
</section>
</body>
</html>Risultato
Esempio di <section> annidato all'interno di un <article>:
Un contenuto lungo e autonomo è un <article>; i capitoli al suo interno sono elementi <section>. Ogni sezione ha il proprio titolo e il proprio contenuto distinto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>A short guide to web technologies</h1>
<p>Modern web pages are built from three core technologies that work together.</p>
<section>
<h2>HTML: structure</h2>
<p>HTML is the standard markup language for web pages. It describes the structure of a document — headings, paragraphs, links and media — so browsers can render it as a page.</p>
</section>
<section>
<h2>CSS: presentation</h2>
<p>CSS controls how the structured content looks: colors, spacing, typography and responsive layout across different screen sizes.</p>
</section>
<section>
<h2>JavaScript: behavior</h2>
<p>JavaScript adds interactivity, letting the page respond to user actions, update content dynamically and communicate with servers.</p>
</section>
</article>
</body>
</html>Attributi
Il tag <section> supporta gli Attributi Globali e gli Attributi Evento.
Come applicare stili a un tag HTML <section>
section {
background-color: #f9f9f9;
padding: 20px;
border: 1px solid #ddd;
}