Qual è la differenza tra i tag <span> e <div>?

Sono curioso, il tag span sembra funzionare come un div.

La differenza principale è che il <span>tag è un elemento inline , mentre il <div>tag è un elemento a livello di blocco .

Due elementi a livello di blocco (div) verranno visualizzati uno dopo l'altro in verticale, mentre due elementi inline (span) verranno visualizzati uno dopo l'altro in orizzontale.

Per comprendere la differenza in termini visivi, potrebbe essere utile pensare <span>all'elemento come a una parola e <div>all'elemento come a un paragrafo: i div vengono generalmente utilizzati per disporre blocchi di contenuto. Gli span vengono normalmente utilizzati per evidenziare gruppi di parole all'interno di quel contenuto.

Sia Nick che Toby hanno risposto bene alla tua domanda, ma per andare oltre.

Per impostazione predefinita, <div>s sono elementi a blocchi e <span>s sono elementi incorporati. Si tratta di tag generici che forniscono semplicemente contenitori a blocchi o in linea. In pratica, questi possono essere distorti tramite CSS per essere in qualche modo intercambiabili impostando l'attributo css di visualizzazione su 'block', 'inline' o persino 'inline-block' (tra gli altri).

Tuttavia, non è consigliabile piegarli in modo che si comportino l'uno con l'altro. E ci sono regole in HTML che in realtà impediscono l'uso di elementi a livello di blocco all'interno di altri elementi (principalmente elementi in linea come il <a>tag), quindi, dovresti provare a usare il tag giusto dove è appropriato e provare a sovrascrivere il loro comportamento solo quando assolutamente necessario.

Cerca di pensarli come elementi semantici. Utilizzare <span>quando si desidera taggare il contenuto utilizzato all'interno di blocchi di testo, ad esempio, e utilizzare <div>quando è necessario aggiungere una struttura aggiuntiva alla pagina stessa.

Detto questo, HTML5 ha una pletora di elementi semantici che dovrebbero ridurre significativamente la necessità di utilizzare uno di questi tag generici. L'uso di tag semantici è altamente raccomandato rispetto all'aggiunta di abbondanti quantità di div e span.

In bocca al lupo!

La differenza principale è che divssono elementi a blocchi e spanselementi in linea.

Entrambi possono essere disegnati usando i CSS per agire come desideri, ma normalmente li useresti spansper divisioni inline più piccole e divsper blocchi più grandi.

Alcune cose influenzeranno inline e bloccheranno elementi diversi, ad esempio non puoi mettere un'altezza su un spanelemento.