Introduzione
Quando si costruisce un’interfaccia HTML, <div> e <span> sono due elementi generici molto utili, ma non equivalenti. Usarli correttamente aiuta a isolare parti del layout, controllare gli spazi e applicare regole CSS senza modificare involontariamente il comportamento degli altri elementi.
In questo tutorial analizzeremo un caso pratico: la realizzazione di una scheda prodotto con una sezione principale organizzata tramite <div> e piccoli dettagli testuali gestiti tramite <span>. L’obiettivo non è sostituire gli elementi semantici, come <article> o <section>, ma capire quando un contenitore generico è davvero appropriato.
La regola fondamentale è semplice: usiamo <div> per raggruppare contenuti a livello di blocco e <span> per isolare una porzione inline di testo. Entrambi non aggiungono significato semantico, quindi non devono essere impiegati al posto di elementi HTML più descrittivi.
Codice completo
<article class="product-card">
<div class="product-card__header">
<h2>Cuffie Studio Pro</h2>
<div class="product-card__meta">
<span class="product-card__category">Audio</span>
<span class="product-card__separator" aria-hidden="true">·</span>
<span class="product-card__availability">Disponibile</span>
</div>
</div>
<div class="product-card__content">
<p>
Cuffie chiuse con cancellazione del rumore e autonomia fino a
<span class="product-card__highlight">30 ore</span>.
</p>
<div class="product-card__price">
<span class="product-card__price-label">Prezzo</span>
<span class="product-card__price-value">149,00 €</span>
</div>
</div>
<div class="product-card__footer">
<a href="/prodotti/cuffie-studio-pro">
Visualizza dettagli
</a>
</div>
</article>Spiegazione
Quando usare div
Il tag <div> è un contenitore di tipo blocco. Per impostazione predefinita occupa l’intera larghezza disponibile e inizia su una nuova riga. Nell’esempio viene utilizzato per dividere la scheda in tre zone funzionali: intestazione, contenuto e piè di pagina.
Le classi product-card__header, product-card__content e product-card__footer permettono di applicare layout e spaziature a gruppi interi di elementi. Per esempio, una regola CSS potrebbe trasformare il contenuto in una griglia o usare Flexbox per allineare prezzo e informazioni correlate.
Il <div> è adatto quando il raggruppamento serve soprattutto alla presentazione e non esiste un elemento semantico più preciso. Tuttavia, nella scheda è stato usato anche <article> come contenitore esterno, perché il prodotto rappresenta un contenuto autonomo. Se la sezione avesse avuto un titolo proprio e un ruolo tematico più ampio, si sarebbe potuto valutare anche l’uso di <section>.
Quando usare span
Il tag <span> è un elemento inline. Non crea una nuova riga e consente di isolare una parola, una frase breve o un valore all’interno di un testo già esistente.
Nel paragrafo, ad esempio, <span class="product-card__highlight"> identifica soltanto il valore “30 ore”. Questo permette di modificarne colore, peso del carattere o dimensione senza trasformare l’intero paragrafo in un blocco separato.
Gli <span> della sezione meta separano informazioni brevi come categoria e disponibilità. Il punto centrale è marcato con aria-hidden="true" perché ha una funzione puramente grafica e non deve essere letto inutilmente dalle tecnologie assistive.
Una differenza importante nel flusso del documento
Inserire un <div> dentro un paragrafo è un errore, perché il paragrafo è un contenitore di contenuto phrasing e non può contenere elementi di tipo blocco. In questi casi bisogna usare uno <span> oppure chiudere il paragrafo prima del contenitore.
<!-- Errato: un div non deve essere inserito dentro un p -->
<p>Prezzo:
<div>149,00 €</div>
</p>
<!-- Corretto: il valore rimane inline -->
<p>Prezzo: <span>149,00 €</span></p>Best practice
- Preferisci elementi semantici: usa
<header>,<main>,<article>,<section>o<footer>quando descrivono meglio il contenuto. - Usa div per gruppi di blocco: è utile per creare un contenitore comune, applicare un layout o separare aree visive.
- Usa span per frammenti inline: è indicato per una parola, un prezzo, un’unità di misura o una piccola porzione di testo.
- Non usare div e span per simulare controlli: un
<div>con un evento JavaScript non sostituisce automaticamente un pulsante o un collegamento. Per le azioni usa<button>, mentre per la navigazione usa<a>. - Evita contenitori inutili: ogni elemento aggiunto dovrebbe avere una motivazione chiara, come layout, stile o raggruppamento.
- Non affidarti solo alle classi: una classe come
product-card__price-valueaiuta il CSS, ma non comunica da sola il significato del prezzo alle tecnologie assistive. Quando serve, valuta elementi semantici e attributi accessibili. - Controlla il flusso inline: uno
<span>può andare a capo naturalmente se il testo è lungo, mentre un<div>forza una nuova riga.
Riepilogo
<div> e <span> sono strumenti generici per organizzare il markup HTML. Il primo raggruppa contenuti a livello di blocco, mentre il secondo isola porzioni inline senza interrompere il testo.
In una scheda prodotto, i <div> possono delimitare intestazione, contenuto e piè di pagina; gli <span> possono invece evidenziare prezzi, categorie, unità di misura o brevi dettagli. La scelta corretta dipende dal flusso del documento e dalla presenza di elementi semantici più adatti.