Che cos’è il tag Span e come utilizzarlo Parte 1

Tra i molti elementi HTML che incontrerai nel tuo viaggio verso la padronanza del front-end, span è uno di quelli che incontrerai spesso. A differenza di altri elementi, il tag <span> non crea da solo un tipo specifico di elemento della pagina. A cosa serve effettivamente un elemento come <span>?

Gli elementi span offrono a designer e sviluppatori uno stretto controllo sullo stile e sulla formattazione delle loro pagine Web e dei loro contenuti. Conoscere il tag span quindi è fondamentale se vuoi comprendere al meglio il web e il suo stile. Qui approfondiremo quelle che sono le caratteristiche principali di questo importante.

In HTML, il tag span è un elemento contenitore inline generico. I tag span di solito delimitano sezioni di testo per scopi stilistici o per aggiungere attributi a una sezione di testo senza creare una nuova riga di contenuto. Un tag span viene scritto con un tag di apertura e uno di chiusura, in questo modo:

<span>Contenuto di esempio</span>

L’elemento span è chiamato “generico” perché il nome del tag stesso non ci dice nulla sul contenuto dell’elemento. In altre parole, “span” non significa nulla per noi. L’opposto di un elemento HTML generico è un elemento HTML semantico, uno il cui nome ne descrive lo scopo (ad esempio, <p> per paragrafo, <section> per sezione, ecc… ecc..).

I tag span sono anche elementi “inline”, il che significa che l’elemento rimane sulla riga corrente e non crea un’interruzione di riga. A differenza del div che è un altro elemento HTML generico, detto a livello di blocco che crea una nuova riga nella pagina. 

Di per sé, un tag <span> non influisce sul modo in cui viene visualizzata la pagina. Tuttavia, i tag <span> sono potenti perché ci consentono di assegnare qualsiasi attributo HTML globale a una sezione di testo o altro contenuto di una pagina inline. Gli attributi più comuni che vedrai usati con span sono i selettori id e class, usati per applicare lo stile a parole specifiche.