Guida HTML interattiva: Span

Q: Che differenza c'è tra div e span?

Un è un blocco: inizia su una nuova riga e occupa tutta la larghezza. Uno è inline: resta dentro la riga di testo ed è largo solo quanto il suo contenuto. Usa il div per raggruppare blocchi di contenuto, lo span per indicare parole dentro il testo.

Q: Perché width non funziona sul mio span?

Gli elementi inline ignorano width, height e i margini verticali. Dai allo span display: inline-block per tenerlo nella riga accettando una dimensione, oppure display: block per farlo comportare come un div.

Tag span HTML: dare stile a parte del testo, div vs span

Il tag <span> è un contenitore inline generico: racchiude qualche parola dentro una riga così puoi darle uno stile o usarla in uno script senza spezzare la riga. Scopri come usarlo, in cosa è diverso da div e quando è meglio un tag più specifico.

Questa pagina include editor eseguibili: modifica, esegui e vedi subito l'output.

Di Kevin Spektor, Cofondatore e CTO

Pubblicato il Sep 24, 2026

Cosa fa il tag span

<span> racchiude un pezzo di testo dentro una riga così puoi dargli uno stile o trovarlo con JavaScript. È il gemello inline di <div>: non ha significato né un aspetto predefinito, e non inizia una nuova riga.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

La frase resta su una sola riga. Cambiano solo le parole racchiuse.

div vs span

I due hanno lo stesso scopo (un contenitore senza significato) e si differenziano per come stanno nella pagina:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

Il div spezza la frase in tre righe e si allarga su tutta la pagina; lo span resta nella frase e aderisce al suo testo.

	`<div>`	`<span>`
Visualizzazione	Blocco	Inline
Inizia una nuova riga	Sì	No
Larghezza	Tutta la larghezza disponibile	Quanto il suo contenuto
`width`, `height`, margine verticale	Applicati	Ignorati
Può contenere	Qualsiasi cosa, anche blocchi	Solo testo ed elementi inline
Uso tipico	Sezioni, schede, contenitori di layout	Una parola o una frase dentro il testo

Un'altra differenza: un <div> non è ammesso dentro un <p>, e se ci provi il browser chiude il paragrafo in anticipo, mentre uno span può andare ovunque vada il testo. Trovi di più nella pagina sul div.

Dare stile a uno span: cosa funziona e cosa no

Colore, font, sfondo e padding orizzontale funzionano tutti su uno span. La dimensione no: un elemento inline ignora width, height e i margini superiore e inferiore. Passalo a inline-block per dargli una dimensione tenendolo nella riga:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

Il primo span è largo solo quanto le sue parole. Il secondo misura esattamente 120 per 40 pixel e sta comunque dentro la frase.

Span con JavaScript

Uno span è il segnaposto abituale per un valore che uno script compila, come un contatore o un nome utente:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

Cambia solo il numero; il resto della frase resta intatto.

Quando un tag specifico è meglio di span

Uno span non ha significato, quindi uno screen reader lo legge come testo semplice. Quando le parole hanno un ruolo, usa il tag di quel ruolo e dagli lo stile che preferisci:

Significato	Usa al posto di uno span
Testo importante	`<strong>`
Enfasi	`<em>`
Testo evidenziato o segnato	`<mark>`
Codice, un nome di file	`<code>`
Un tasto della tastiera	`<kbd>`
Una data o un orario	`<time datetime="2026-09-24">`
Testo in un'altra lingua	`<span lang="fr">` (span più l'attributo `lang`)

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

La pagina sul grassetto spiega la differenza tra <strong>, <b>, <em> e <i>.

Errori comuni

Impostare width su un semplice span. Viene ignorato. Usa display: inline-block.
Mettere un div o un paragrafo dentro uno span. HTML non valido che spezza la riga. Sostituisci lo span esterno con un div.
Span cliccabili. Come un div, uno span con onclick non si raggiunge con la tastiera. Usa un <button> o un link.
Uno span per ogni stile. Se interi paragrafi o sezioni hanno bisogno di uno stile, metti la classe sul <p> o sul contenitore stesso invece di racchiuderne il testo in uno span.

Domande frequenti

Cos'è uno span in HTML?

<span> è un contenitore inline generico. Racchiude una parte di una riga di testo, come una parola, così il CSS o JavaScript possono selezionarla, e non ha né un aspetto né un significato propri.

Che differenza c'è tra div e span?

Un <div> è un blocco: inizia su una nuova riga e occupa tutta la larghezza. Uno <span> è inline: resta dentro la riga di testo ed è largo solo quanto il suo contenuto. Usa il div per raggruppare blocchi di contenuto, lo span per indicare parole dentro il testo.

Perché width non funziona sul mio span?

Gli elementi inline ignorano width, height e i margini verticali. Dai allo span display: inline-block per tenerlo nella riga accettando una dimensione, oppure display: block per farlo comportare come un div.

Come cambio il colore di una parola in HTML?

Racchiudi la parola in uno span con una classe e colorala in CSS: <span class="accent">word</span> con .accent { color: #2563eb; }. Per un caso isolato funziona anche <span style="color: #2563eb">word</span>.

Uno span può contenere un div?

No. Uno span può contenere solo contenuto inline come testo, link, immagini e altri span. I browser mostrano comunque un div dentro uno span, ma è HTML non valido e spezza la riga, quindi trasforma l'elemento esterno in un div.

Concetti correlati