HTML Academy · Lezione

L’elemento section a confronto con div

Capire quando usare section invece di un semplice div

L’elemento section a confronto con div è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

L'elemento section

L'elemento <section> raggruppa contenuti correlati in una sezione tematica:

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

section vs div

La domanda fondamentale è: questo gruppo ha un tema o uno scopo a cui si potrebbe dare un nome?

<section> — sì; rappresenta un raggruppamento tematico e dovrebbe avere un'intestazione
<div> — no; è solo un contenitore per lo stile o gli script

section richiede un'intestazione

Ogni <section> dovrebbe avere un'intestazione (<h2>-<h6>):

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

Quando usare section

Utilizzi <section> per:

Capitoli di un documento
Schede o passaggi di una procedura guidata
Parti di un articolo lungo (Introduzione, Metodi, Risultati)
Sezioni di marketing della homepage (Funzionalità, Prezzi, Testimonianze)

Quando usare div

Utilizzi <div> quando le serve solo un contenitore per CSS o JavaScript, senza significato semantico:

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

section in un articolo lungo

Utilizzi le section per creare capitoli all'interno di un article:

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

Sezioni della homepage

Una homepage strutturata con le section:

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

section crea il contesto delle intestazioni

Le section creano nuovi contesti per le intestazioni nell'algoritmo HTML5 della struttura del documento:

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

aria-labelledby per le section

Associ una section alla relativa intestazione per gli screen reader:

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

Diagramma di flusso decisionale

Quale elemento contenitore utilizzare?

Navigazione principale? → <nav>
Contenuto principale della pagina? → <main>
Contenuto autonomo? → <article>
Raggruppamento tematico con un'intestazione? → <section>
Barra laterale o contenuto correlato? → <aside>
Solo un contenitore per lo stile? → <div>

section senza intestazione: utilizzi div

Se non può assegnare un'intestazione a una section, utilizzi div:

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

Verifica rapida

Quando è preferibile usare div invece di section?

Riepilogo: section vs div

Elementi essenziali di section e div:

<section> — gruppo tematico, dovrebbe avere un'intestazione
<div> — contenitore semanticamente neutro per stile e script
section crea una regione denominata che funge da punto di riferimento per la navigazione con gli screen reader
Aggiunga aria-labelledby per collegare la section alla relativa intestazione
In caso di dubbio, utilizzi div; potrà sempre sostituirlo in seguito

Domande Frequenti

La lezione «L’elemento section a confronto con div» è gratuita?

Sì — il testo completo di «L’elemento section a confronto con div» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «L’elemento section a confronto con div»?

Capire quando usare section invece di un semplice div Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «L’elemento section a confronto con div»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy