Introduzione
Gli elementi <div> e <span> sono contenitori generici: non descrivono il significato del contenuto, ma permettono di raggrupparlo e applicare stili o comportamenti. Proprio per questo devono essere utilizzati con attenzione, soprattutto quando la pagina contiene elementi semantici come <article>, <section>, <header> e <footer>.
Un errore comune consiste nel costruire l’intera pagina utilizzando soltanto <div>, perdendo informazioni utili per browser, motori di ricerca e tecnologie assistive. La soluzione corretta è usare prima l’elemento semantico più adatto e aggiungere <div> o <span> soltanto quando serve un raggruppamento neutro.
In questo tutorial vedremo come organizzare una scheda informativa all’interno di un articolo. Il contenitore principale userà elementi semantici, mentre <div> servirà per creare gruppi di layout e <span> per piccoli frammenti di testo inline, come etichette, unità di misura e valori evidenziati.
Codice completo
<article class="technical-card">
<header>
<div class="heading-group">
<p class="category">Guida HTML</p>
<h2>Uso corretto dei contenitori generici</h2>
</div>
<p class="reading-time">
Tempo di lettura:
<span class="reading-time__value">8</span>
<span class="reading-time__unit">minuti</span>
</p>
</header>
<section aria-labelledby="obiettivo-title">
<h3 id="obiettivo-title">Obiettivo della lezione</h3>
<div class="content-columns">
<p>
Imparare a distinguere tra contenitori di tipo blocco e contenitori
inline, mantenendo il significato semantico della pagina.
</p>
<aside class="note">
<strong>Nota:</strong>
<span>un elemento generico non sostituisce un elemento semantico.</span>
</aside>
</div>
</section>
<section aria-labelledby="termini-title">
<h3 id="termini-title">Termini principali</h3>
<dl class="terms-list">
<div class="term-item">
<dt><code>div</code></dt>
<dd>Contenitore generico di tipo blocco.</dd>
</div>
<div class="term-item">
<dt><code>span</code></dt>
<dd>Contenitore generico inline per una parte del testo.</dd>
</div>
</dl>
</section>
<footer>
<p>
Livello:
<span class="level level--intermediate">Intermedio</span>
</p>
</footer>
</article>Spiegazione
Usare prima gli elementi semantici
<article> rappresenta un contenuto autonomo, ad esempio un articolo, una recensione o una scheda pubblicabile indipendentemente. Al suo interno, <header> contiene il titolo e le informazioni introduttive, mentre <footer> raccoglie le informazioni finali.
Gli elementi <section> dividono l’articolo in argomenti distinti. Ogni sezione dovrebbe avere un titolo, generalmente un elemento <h2> o <h3>. In questo modo la struttura del documento rimane comprensibile anche senza fogli di stile.
Quando usare <div>
Nel codice, <div class="heading-group"> raggruppa la categoria e il titolo. Il gruppo non ha un significato semantico autonomo: serve soprattutto a gestire la disposizione grafica dei due elementi.
Anche <div class="content-columns"> è un contenitore neutro. Può essere trasformato con CSS in una griglia o in un layout a colonne senza alterare il significato del testo. Il contenitore non dovrebbe però essere inserito al posto di <section>, <header> o <aside> quando uno di questi elementi descrive meglio il contenuto.
Un uso particolarmente utile è il raggruppamento dei termini di un <dl>. In HTML moderno è possibile racchiudere ogni coppia <dt> e <dd> in un <div>. Il div collega visivamente e strutturalmente il termine alla sua definizione, senza introdurre un significato semantico sbagliato.
Quando usare <span>
<span> è adatto a una porzione di testo che deve rimanere all’interno della stessa riga. Nel tempo di lettura, per esempio, il valore 8 e l’unità minuti sono separati in due span per poter essere stilizzati indipendentemente.
Lo span può contenere una parola, un numero o una breve espressione. Non dovrebbe racchiudere paragrafi interi, blocchi complessi o sezioni della pagina. Per questi casi è preferibile utilizzare elementi di tipo blocco o elementi semantici.
L’attributo class consente di applicare lo stesso stile a più span. Tuttavia, una classe non aggiunge significato al documento: serve solo a identificare un elemento per CSS o JavaScript. Se il testo possiede un significato specifico, è meglio valutare elementi come <strong>, <em>, <time> o <abbr>.
Best practice
- Scegli prima l’elemento semantico: usa
<article>,<section>,<aside>o<header>quando descrivono realmente il contenuto. - Usa
<div>per raggruppare blocchi: è ideale per organizzare più elementi destinati a una griglia, a una colonna o a un contenitore grafico. - Usa
<span>per testo inline: è adatto a valori, unità, etichette e frammenti di una frase. - Non usare un div come semplice sostituto di un paragrafo: per il testo discorsivo è preferibile
<p>. - Non inserire elementi blocco dentro uno span: uno span non dovrebbe contenere sezioni, paragrafi o altri gruppi complessi.
- Evita contenitori inutili: ogni div o span dovrebbe avere uno scopo concreto, come il layout, lo stile o l’interazione.
- Non aggiungere ruoli ARIA senza necessità: un contenitore generico con un ruolo artificiale può rendere l’interfaccia più difficile da interpretare.
- Verifica la struttura senza CSS: se il contenuto rimane comprensibile anche senza stili, probabilmente la gerarchia HTML è ben progettata.
Riepilogo
<div> e <span> sono strumenti flessibili, ma privi di significato semantico proprio. Il <div> raggruppa principalmente contenuti di tipo blocco, mentre lo <span> racchiude piccole porzioni inline.
Il metodo corretto consiste nel costruire prima una struttura basata sugli elementi semantici e utilizzare i contenitori generici solo per esigenze reali di layout o presentazione. In questo modo il codice resta più leggibile, accessibile e semplice da mantenere.