Tag HTML <span>
Il tag HTML <span> è un contenitore inline generico senza significato semantico, usato per stilizzare o manipolare testo. Esempi e buone pratiche.
Il tag HTML <span> è un contenitore inline generico per un frammento di testo o di contenuto. A differenza della maggior parte degli elementi HTML, non ha alcun significato semantico — non comunica né al browser né alle tecnologie assistive nulla sul tipo di contenuto che racchiude. Il suo unico scopo è delimitare una porzione di contenuto inline in modo da poterla raggiungere con CSS o JavaScript.
Poiché non aggiunge alcun significato, <span> dovrebbe essere la tua ultima scelta, non la prima. Ogni volta che un elemento semantico si adatta al contenuto, preferisci quello:
| Se il testo è… | Usa questo, non <span> |
|---|---|
| enfatizzato | <em> |
| importante / forte | <strong> |
| evidenziato / rilevante | <mark> |
| un'abbreviazione | <abbr> |
| codice | <code> |
| una data o un'ora | <time> |
Usa <span> solo quando nessun elemento inline semantico è applicabile e ti serve semplicemente un aggancio per stilizzare o scriptare — ad esempio, colorare una singola parola, avvolgere un carattere per un effetto capolettera, o etichettare un'icona decorativa.
Preferire gli elementi semantici
I due frammenti seguenti appaiono identici nel browser, ma non sono equivalenti. Il primo usa uno <span> con uno stile inline; il secondo usa <mark>, che comunica effettivamente "questo testo è evidenziato per rilevanza" ai lettori di schermo e ai motori di ricerca.
<!-- Just visual — no meaning conveyed -->
<p>Search results for <span style="background:yellow;">CSS</span> grid.</p>
<!-- Semantic highlight — assistive tech understands it -->
<p>Search results for <mark>CSS</mark> grid.</p>Quando hai bisogno solo di un aggancio per lo stile e non esiste un elemento semantico corrispondente, <span> è lo strumento giusto. Quando lo stile riflette un significato, scegli l'elemento che porta quel significato.
<span> vs <div>
<span> e <div> sono i due contenitori generici "privi di significato" in HTML. La differenza sta nel tipo di box che creano:
<span>è inline — scorre all'interno di una riga di testo e occupa solo la larghezza del suo contenuto. Non può contenere elementi block-level.<div>è block-level — inizia su una nuova riga e si estende per tutta la larghezza del suo elemento padre. Usalo per raggruppare sezioni più ampie.
<p>This sentence has an <span style="color:#8ebf42;">inline span</span> in the middle.</p>
<div style="border:1px solid #8ebf42;">
This div is a block — it sits on its own line and fills the row.
</div>Regola pratica: usa <span> per una porzione di riga e <div> per un blocco di contenuto.
Sintassi
Il tag <span> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<span>) e quello di chiusura (</span>).
Nell'esempio seguente, applichiamo uno stile direttamente all'interno del tag.
Esempio del tag HTML <span>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>Vediamo un altro esempio in cui aggiungiamo un attributo class al tag e applichiamo gli stili separatamente in un foglio di stile. Questo crea un capolettera — una prima lettera ingrandita, un classico tocco tipografico per l'inizio di un capitolo.
Esempio del tag HTML <span> con l'attributo class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Make the first letter much larger */
position: relative; /* Position it relative to its normal spot */
top: 7px; /* Nudge it down to align with the text */
}
</style>
</head>
<body>
<!-- The first letter "S" is wrapped in a span so we can style it alone -->
<p>
<span class="letter">S</span>he brought in disgusting, disturbing yellow
flowers in her hands. And these flowers stood out on her black coat.
</p>
<p>Michael Bulgakov</p>
</body>
</html>Casi d'uso per l'accessibilità
Due pattern rendono <span> genuinamente utile per l'accessibilità.
Testo visibile solo ai lettori di schermo. Una classe visually-hidden nasconde il testo allo schermo ma lo mantiene disponibile per i lettori di schermo. È il modo standard per fornire contesto che gli utenti vedenti ricavano dal layout.
<a href="/cart">
View cart
<span class="visually-hidden">(3 items)</span>
</a>
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>Etichettare le icone. I font di icone e i glifi decorativi non hanno testo che il lettore di schermo possa annunciare. Nascondi il <span> decorativo con aria-hidden e fornisci un nome accessibile tramite aria-label sul link o sul pulsante.
<button aria-label="Close dialog">
<span aria-hidden="true">×</span>
</button>Qui aria-hidden="true" rimuove la "×" visiva dall'albero di accessibilità, mentre aria-label comunica alle tecnologie assistive che il pulsante significa "Chiudi finestra di dialogo".
Attributi
<span> non ha attributi propri. In pratica, questi attributi globali svolgono quasi tutto il lavoro:
| Attributo | Scopo |
|---|---|
class | Collega l'elemento a una o più regole CSS. |
id | Assegna un identificatore univoco per il targeting con CSS o JavaScript. |
style | Applica CSS inline direttamente (utile per stili occasionali). |
lang | Marca un tratto di testo come scritto in una lingua diversa, ad es. <span lang="fr">. |
Il tag supporta anche gli attributi evento, che permettono di reagire alle azioni dell'utente come clic o passaggio del mouse. Un evento si verifica quando il browser reagisce a un'azione dell'utente — clic del mouse, riproduzione di un video, invio di un modulo e così via.