Corso di HTML / Quando usare div e span?

div e span raggruppano i contenuti senza attribuire loro un significato particolare. Usateli quando CSS o JavaScript richiedono un obiettivo e nessun elemento HTML più specifico descrive il contenuto. Un div raggruppa normalmente parti più grandi; uno span raggruppa una parte di una frase.

In cosa differiscono div e span?

Un div può contenere contenuti di flusso come paragrafi, elenchi o un'intera scheda. Un span è previsto per il testo e altri cosiddetti contenuti frasali all'interno di una sezione di testo. Nessuno dei due indica che il suo contenuto sia un'intestazione, un pulsante o particolarmente importante. Per impostazione predefinita, un div inizia come blocco e un span rimane inline, ma il CSS può modificarne la visualizzazione. Scegliete in base alla struttura del contenuto, non solo al suo aspetto. Per un'area con un ruolo specifico nella pagina, scegliete prima un elemento semantico adatto in Strutturare pagine con elementi semantici.

Non inserite un paragrafo o un div in un span. Se il vostro unico obiettivo è un'interruzione di riga, valutate prima se avete bisogno di un nuovo paragrafo o di modificare il layout CSS invece di un altro contenitore.

Raggruppare solo ciò che deve essere stilizzato

Inserite questo HTML in un body di un documento e il CSS in un style nel suo head.

<div class="product-card">
  <h2>Tazza da viaggio</h2>
  <p>Prezzo: <span class="price">15 $</span></p>
</div>

.product-card {
  padding: 16px;
  border: 1px solid #dadada;
}

.price {
  color: #075cb4;
  font-weight: 700;
}

L'intera scheda riceve un bordo, mentre solo il prezzo cambia colore e spessore del carattere. L'attributo class dà un nome al CSS per selezionarlo. Anche senza CSS, il nome del prodotto rimane un'intestazione e il prezzo rimane in un paragrafo. Se il prezzo non diventa blu, controllate se class="price" nell'HTML corrisponde a .price nel CSS. Il punto indica un selettore di classe; non fa parte del nome della classe HTML.

Preferire un elemento con significato appropriato

Per la navigazione principale, preferite nav a un generico div. Per un articolo indipendente, considerate article. Per un'azione che gli utenti possono eseguire, utilizzate button, anziché creare un span cliccabile. L'elemento nativo corretto trasmette già significato e offre spesso comportamenti da tastiera. I diversi tipi di pulsante sono spiegati nel post Moduli con textarea, select, option e button .

Il prezzo in questo esempio non richiede un'elaborazione speciale dei dati, quindi span è sufficiente. È possibile mantenere una classe CSS e allo stesso tempo sostituire successivamente il suo elemento con un elemento più significativo. Consultate l'elenco degli elementi HTML di MDN quando scegliete un elemento appropriato.

Separare il contenuto consentito dalla presentazione CSS

Il contenuto di flusso è una categoria utilizzata per il flusso di contenuti di una pagina, inclusi paragrafi, elenchi e sezioni. Il contenuto frasale viene utilizzato all'interno delle sezioni di testo, come testo, enfasi, collegamenti e immagini. div raggruppa il contenuto di flusso; span raggruppa il contenuto frasale. Queste categorie differiscono dalle regole CSS per l'impaginazione delle righe.

<!-- Non conforme: un paragrafo in span -->
<span class="card"><p>Descrizione del prodotto</p></span>

<!-- Un contenitore che può contenere paragrafi -->
<div class="card"><p>Descrizione del prodotto</p></div>

Scrivere span { display: block; } non genera un paragrafo valido all'interno di un span. Confrontate i frammenti separatamente e poi mantenete la stessa classe CSS sul contenitore corretto. Scegliete un elemento dal modello di contenuto invece di modificare semplicemente i tag per nascondere un problema visivo.

Riferimento per span su MDN · Riferimento per div su MDN

Errori comuni

Non costruite ogni area della pagina solo con div per facilitare lo styling del layout. Non assegnate a un contenitore un elemento semantico il cui significato non corrisponde. Un span stilizzato non diventa automaticamente un'intestazione o un pulsante solo perché ha quell'aspetto. Iniziate con contenuto e interazione, e aggiungete contenitori generici solo dove sono necessari.