Come precedentemente detto, il tag span è utilizzato dai designer, più per motivi stilistici che per altro. Infatti lo span non crea interruzioni di riga ma è un elemento inline che consente di modificare tramite alcuni accorgimenti la grandezza, lo sfondo e il colore di determinati elementi.
È quindi possibile applicare CSS agli elementi HTML all’interno dei tag <span> utilizzando gli attributi di stile (noti anche come “inline CSS”) anche se è una pratica che dovrebbe essere spesso evitata. Lo span può contenere anche altri attributi. Ad esempio, se hai un pezzo di testo in una lingua diversa dal documento, avvolgi questo testo in un tag <span> e aggiungi l’attributo lang al tag per indicare la modifica temporanea della lingua. Questo aiuta l’indicizzazione dei motori di ricerca e indica ai programmi di sintesi vocale di pronunciare queste parole in modo diverso.
L’elemento span è ottimo anche per il targeting di una sezione di testo con funzioni JavaScript. Nell’esempio seguente, il testo all’interno del tag <span> è nascosto. Il codice JavaScript rivela questo testo quando fai clic su un pulsante.
<p>Q: Quante lune ha la Terra?</p>
<p>A: <span id=”answer”>Una soltanto!</span></p>
<button onclick=”clicked()”>Rivela la risposta</button>
Infine, possiamo usare <span> per mettere in grassetto e corsivo il testo con CSS. Tuttavia, è consigliabile utilizzare il tag <strong> per il testo in grassetto e il tag <em> per il testo in corsivo. Questo perché <strong> e <em> sono elementi HTML semantici (mentre <span>) non lo è, il che rende il codice più accessibile.
Saper utilizzare al meglio questo tag ci consentirà di progettare meglio i nostri contenuti senza bisogno di grosse modifiche di stile al codice stesso.