Qual è la differenza tra i tag HTML e ?

Vorrei chiedere alcuni semplici esempi che mostrano gli usi di

e . Li ho visti entrambi utilizzati per contrassegnare una sezione di una pagina con un id o una class , ma sono interessato a sapere se ci sono momentjs in cui uno è preferito rispetto all’altro.

div è un elemento di blocco, span è in linea.

Ciò significa che per utilizzarli semanticamente, è necessario utilizzare le div per avvolgere sezioni di un documento, mentre le span dovrebbero essere utilizzate per racchiudere piccole parti di testo, immagini, ecc.

Per esempio:

 
This a large main division, with a small bit of spanned text!

Si noti che è illegale posizionare un elemento a livello di blocco all’interno di un elemento in linea, quindi:

 
Some text that
I want
to mark
up

… è illegale.


EDIT: A partire da HTML5, alcuni elementi di blocco possono essere inseriti all’interno di alcuni elementi inline. Vedi il riferimento MDN qui per un elenco abbastanza chiaro. Quanto sopra è ancora illegale, dato che accetta solo contenuti di frasi e

è contenuto di stream.


Hai chiesto alcuni esempi concreti, quindi è stato preso dal mio sito web di bowling, BowlSK :

  

Ok, cosa sta succedendo? Nella parte superiore della mia pagina, ho una sezione logica, l’intestazione. Poiché questa è una sezione, utilizzo un div (con un id appropriato). All’interno di questo, ho un paio di sezioni: la barra utente e il titolo della pagina effettiva. Il titolo usa il tag appropriato, h1 . La barra utente, essendo una sezione, è racchiusa in un div . All’interno di questo, il nome utente è racchiuso in un span , in modo che io possa cambiare lo stile. Come puoi vedere, ho anche avvolto un span circa 2 lettere nel titolo – questo mi permette di cambiare il loro colore nel mio foglio di stile.

Si noti inoltre che HTML5 include un nuovo insieme di elementi che definiscono strutture di pagina comuni, come articolo, sezione, nav, ecc. La sezione 4.4 della bozza di lavoro HTML 5 li elenca e fornisce suggerimenti sul loro utilizzo. HTML5 è ancora una specifica funzionante, quindi nulla è ancora “definitivo”, ma è altamente dubbio che qualcuno di questi elementi sta andando ovunque. C’è un hack javascript che dovrai usare se vuoi modellare questi elementi in una versione più vecchia di IE – devi fondamentalmente creare uno di ciascun elemento usando document.createElement prima che uno di questi elementi sia specificato nella tua fonte. Ci sono un sacco di librerie che si prenderanno cura di questo per te: una rapida ricerca su Google ha triggersto html5shiv .

Solo per completezza, ti invito a pensarci in questo modo:

  • Vi sono molti elementi di blocco (interruzioni di riga prima e dopo) definiti in HTML e molti tag in linea (senza interruzioni di riga).
  • Ma nel moderno HTML si suppone che tutti gli elementi abbiano significati : un

    è un paragrafo, un

  • è un elemento della lista, ecc., E dovremmo usare il tag giusto per lo scopo giusto – non come ai vecchi tempi in cui rientravamo usando

    se il contenuto fosse o meno una citazione.

  • Quindi, cosa fai quando non c’è alcun significato per la cosa che stai cercando di fare? Non c’è significato per una colonna di 400px-wide, vero? Vuoi solo che la colonna di testo sia larga 400 px perché è adatta al tuo design.
  • Per questo motivo, hanno aggiunto altri due elementi all’HTML: gli elementi generici o privi di significato

    e , perché altrimenti le persone tornerebbero ad abusare degli elementi che hanno significati.

Ci sono già risposte buone e dettagliate qui, ma nessun esempio visivo, quindi ecco una rapida illustrazione:

differenza tra div e span

è un tag di blocco, mentre è un tag in linea.

è un elemento a livello di blocco e è un elemento in linea.

Se vuoi fare qualcosa con un testo inline, è la strada da percorrere poiché non introdurrà interruzioni di riga che sarebbero necessarie per un

.


Come notato da altri, ci sono alcune semantiche implicite in ognuna di queste, il più significativamente il fatto che un

implica una divisione logica nel documento, simile forse a una sezione di un documento o qualcosa, a la:

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis congue vehicula purus.

Nam eget magna nec sapien fringilla euismod. Donec hendrerit.

La vera differenza importante è già menzionata nella risposta di Chris. Tuttavia, le implicazioni non saranno ovvie per tutti.

Come elemento in linea, può contenere solo altri elementi in linea. Il seguente codice è quindi sbagliato:

 

This is a paragraph

Il codice sopra non è valido. Per includere elementi a livello di blocco, è necessario utilizzare un altro elemento a livello di blocco (ad esempio

). D’altra parte,

può essere utilizzato solo in luoghi in cui gli elementi a livello di blocco sono legali.

Inoltre, queste regole sono fisse in (X) HTML e non sono alterate dalla presenza di regole CSS! Quindi anche i seguenti codici sono errati!

 

Still wrong

Just as wrong

Il significato di “elemento di blocco” è implicito ma non dichiarato esplicitamente. Se ignoriamo tutta la teoria (la teoria è buona), il seguente è un confronto pragmatico. Il seguente:

 

This paragraph has a span.

This paragraph

has
a div.

produce:

 This paragraph has a span. This paragraph has a div. 

Ciò dimostra che non solo un div non può essere usato in linea, ma semplicemente non produrrà l’effetto desiderato.

Come menzionato in altre risposte, per impostazione predefinita div sarà reso come un elemento di blocco, mentre lo span sarà reso in linea all’interno del suo contesto. Ma nessuno dei due ha alcun valore semantico; esistono per permetterti di applicare lo styling e un’id quadro a qualsiasi dato bit di contenuto. Usando gli stili, puoi fare in modo che div diva span e viceversa.

Uno degli stili utili per div è inline-block

Esempi:

  1. http://dustwell.com/div-span-inline-block.html

  2. Visualizzazione CSS: in linea vs blocco in linea

Ho usato inline-block per un grande successo, in progetti di giochi web.

Div è un elemento di blocco e span è un elemento in linea e la sua larghezza dipende dal contenuto di esso stesso in cui div non lo fa

Direi che se conosci un po ‘di spagnolo per guardare questa pagina , dove è correttamente spiegato.

Tuttavia, una definizione veloce sarebbe che div è per dividere le sezioni e span serve per applicare un qualche tipo di stile a un elemento all’interno di un altro elemento del blocco come div .

In HTML ci sono tag che aggiungono struttura o semantica al contenuto. Ad esempio il tag

viene utilizzato per identificare un paragrafo. Un altro esempio è il tag

    per un elenco ordinato.

    Quando non ci sono tag adatti disponibili in HTML come mostrato sopra, i

    e vengono generalmente utilizzati.

    Il tag

    viene utilizzato per identificare una sezione / divisione di blocco di un documento che presenta un’interruzione di riga sia prima che dopo di essa.

    Esempi di dove possono essere utilizzati i tag div sono le intestazioni, i piè di pagina, le navigazioni ecc. Tuttavia in HTML 5 questi tag sono già stati forniti.

    Il tag viene utilizzato per identificare una sezione / divisione inline di un documento.

    Ad esempio, un tag span può essere utilizzato per aggiungere pittogrammi in linea a un elemento.

    Volevo solo aggiungere un contesto storico al modo in cui ci si span trovare span vs div

    Storia della span :

    Il 3 luglio 1995, Benjamin CW Sittler propone un tag contenitore di testo generico per applicare gli stili a determinati blocchi di testo. Il rendering è neutrale tranne se usato in combinazione con un foglio di stile. C’è un dibattito in giro contro la leggibilità, il significato. Bert Bos sta citando la natura dell’estensibilità dell’elemento attraverso l’attributo class (con valori come città, persona, data, ecc.). Paul Prescod è preoccupato che entrambi gli elementi saranno abusati. Si oppone al testo che menziona che “ogni nuovo elemento dovrebbe essere su uno vecchio” e aggiungendo “Se creiamo un tag senza semantica può essere usato dovunque senza mai sbagliare. Dobbiamo costringere gli autori a taggare adeguatamente la semantica dei loro documento. Dobbiamo costringere i produttori di editor a rendere esplicita questa scelta nelle loro interfacce. ”

    – Fonte (wiki w3)

    Dalla bozza RFC che introduce l’ span :

    Innanzitutto, è necessario un contenitore generico per trasportare gli attributi LANG e BIDI nei casi in cui nessun altro elemento sia appropriato; l’elemento SPAN è stato introdotto per questo scopo.

    – Fonte (Bozza IETF)

    Storia di div :

    Gli elementi DIV possono essere utilizzati per strutturare i documenti HTML come una gerarchia di divisioni.

    CENTER è stato introdotto da Netscape prima che aggiungessero il supporto per l’elemento DIV HTML 3.0. È mantenuto in HTML 3.2 a causa della sua diffusione su larga scala.

    HTML 3.2 Spec

    In breve, entrambi gli elementi sono nati dall’esigenza di un contenitore più semanticamente generico. Span è stato proposto come sostituto più generico per un elemento per lo stile del testo. Div è stato proposto come un modo generico per dividere le pagine e ha avuto il vantaggio aggiuntivo di sostituire il tag

    per il contenuto allineato al centro. Div è sempre stato un elemento di blocco a causa della sua storia come separatore di pagine. Span è sempre stato un elemento in linea perché il suo scopo originale era lo stile del testo e oggi div e span sono entrambi arrivati ​​ad essere elementi generici con il blocco predefinito e le proprietà di visualizzazione inline rispettivamente.

    è un elemento di blocco. Come tutti i paragrafi o qualsiasi contenuto scritto all’interno di un div, possiamo applicare css a tutti gli elementi nel div. Dando solo uno stile in soli div.

    è un elemento in linea.

    Che cosa sono tutte le modifiche CSS che si riflettono solo su quell’elemento.

     

    Example of div and span

    This is a paragraph within a div Paragraph with in span.