Qual è la differenza tra i tag HTML <div> e <span>?
Risposte:
divè un elemento a blocchispanè un elemento incorporato .
Ciò significa che per usarli semanticamente, i div dovrebbero essere usati per avvolgere sezioni di un documento, mentre gli span dovrebbero essere usati per avvolgere piccole parti di testo, immagini, ecc.
Per esempio:
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>Si noti che è illegale posizionare un elemento a livello di blocco all'interno di un elemento inline, quindi:
<div>Some <span>text that <div>I want</div> to mark</span> up</div>... è illegale.
EDIT: A partire da HTML5, alcuni elementi di blocco possono essere inseriti all'interno di alcuni elementi incorporati. Vedi il riferimento MDN qui per un elenco abbastanza chiaro. Quanto sopra è ancora illegale, in quanto <span>accetta solo contenuti a frase ed <div>è contenuto di flusso.
Hai chiesto alcuni esempi concreti, quindi uno è preso dal mio sito web di bowling, BowlSK :
<div id="header">
<div id="userbar">
Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>Ok, cosa sta succedendo?
Nella parte superiore della mia pagina, ho una sezione logica, l '"intestazione". Dato che questa è una sezione, uso un div (con un id appropriato). All'interno di questo, ho un paio di sezioni: la barra degli utenti e il titolo della pagina attuale. Il titolo utilizza il tag appropriato,h1. La barra degli utenti, essendo una sezione, è racchiusa in a 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 racchiuso spancirca 2 lettere nel titolo - questo mi permette di cambiare il loro colore nel mio foglio di stile.
Si noti inoltre che HTML5 include una nuova vasta serie di elementi che definiscono strutture di pagina comuni, come articolo, sezione, nav, ecc.
La sezione 4.4 della bozza di lavoro di HTML 5 li elenca e fornisce suggerimenti sul loro utilizzo. HTML5 è ancora una specifica funzionante, quindi nulla è ancora "finale", ma è altamente dubbio che uno di questi elementi vada ovunque. C'è un hack javascript che dovrai usare se vuoi dare uno stile a questi elementi in una versione precedente di IE - Devi creare uno di ogni elemento usando document.createElementprima che uno di questi 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 mostrato html5shiv .
dive spansemanticamente poiché non hanno alcun significato associato a loro. divè un elemento a livello di blocco generico insignificante mentre spanè un elemento inline generico insignificante.
Solo per completezza, ti invito a pensarci in questo modo:
- Ci sono molti elementi a blocchi (interruzioni di riga prima e dopo) definiti in HTML e molti tag incorporati (senza interruzioni di riga).
- Ma nell'HTML moderno tutti gli elementi dovrebbero avere significati : a
<p>è un paragrafo, an<li>è un elemento di elenco, ecc., E dovremmo usare il tag giusto per lo scopo giusto - non come ai vecchi tempi quando rientrato usando<blockquote>se il contenuto era un preventivo o meno. - Allora, che cosa fare quando non v'è alcun significato per la cosa si sta cercando di fare? Non c'è alcun significato per una colonna larga 400 px, vero? Vuoi solo che la tua colonna di testo sia larga 400 px perché si adatta al tuo design.
- Per questo motivo, hanno aggiunto altri due elementi all'HTML: gli elementi generici o privi di significato
<div>e<span>, in caso contrario, le persone tornerebbero ad abusare degli elementi che hanno significati.
Ci sono già buone risposte dettagliate qui, ma nessun esempio visivo, quindi ecco una breve illustrazione:
<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span><div>è un tag block, mentre <span>è un tag inline.
<div>è un elemento a livello di blocco ed <span>è un elemento incorporato.
Se vuoi fare qualcosa con del testo in linea, <span>è la strada da percorrere poiché non introdurrà interruzioni di riga che <div>sarebbe.
Come notato da altri, ci sono alcune semantiche implicite in ognuna di queste, in particolare il fatto che a <div>implica una divisione logica nel documento, simile a forse una sezione di un documento o qualcosa del genere, alla:
<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>La vera differenza importante è già menzionata nella risposta di Chris. Tuttavia, le implicazioni non saranno ovvie per tutti.
Come elemento inline, <span>può contenere solo altri elementi inline. Il seguente codice è pertanto errato:
<span><p>This is a paragraph</p></span>Il codice sopra non è valido. Per avvolgere gli elementi a livello di blocco, è necessario utilizzare un altro elemento a livello di blocco (come <div>). D'altra parte, <div>può essere utilizzato solo in luoghi in cui gli elementi a livello di blocco sono legali.
Inoltre, queste regole sono fissati in (X) HTML e sono non alterati dalla presenza di regole CSS! Così i seguenti codici sono anche sbagliato!
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>Il significato di "elemento a blocchi" è implicito ma mai dichiarato esplicitamente. Se ignoriamo tutta la teoria (la teoria è buona), il seguente è un confronto pragmatico. Il seguente:
<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>produce:
This paragraph has a span.
This paragraph
has
a div.Ciò dimostra che non solo dovrebbe un div non essere in linea usato, semplicemente non produrrà l'effetto desiderato.
Come menzionato in altre risposte, per impostazione predefinita divverrà visualizzato come elemento a blocchi, mentre spanverrà reso in linea nel suo contesto. Ma nessuno dei due ha alcun valore semantico; esistono per permetterti di applicare uno stile e un'identità a qualsiasi dato contenuto. Usando gli stili, puoi fare un divatto simile a spane viceversa.
Uno degli stili utili per div èinline-block
Esempi:
Ho avuto inline-blockun grande successo nei progetti web di gioco.
Div è un elemento a blocchi e l'intervallo è un elemento inline e la sua larghezza dipende dal contenuto di se stesso, dove div non lo è
Direi che se conosci un po 'di spagnolo per guardare questa pagina , dove viene spiegato correttamente.
Tuttavia, una definizione rapida sarebbe quella divdi dividere le sezioni e spandi applicare un qualche tipo di stile a un elemento all'interno di un altro elemento a blocchi come div.
Volevo solo aggiungere un po 'di contesto storico a come è arrivato a essere spanvsdiv
Storia di 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 è neutro, tranne se utilizzato insieme a un foglio di stile. C'è un dibattito attorno a contro leggibilità, significato. Bert Bos menziona la natura di estensibilità dell'elemento attraverso l'attributo class (con valori come città, persona, data, ecc.). Paul Prescod è preoccupato che entrambi gli elementi vengano abusati. Si oppone al testo che menziona che "ogni nuovo elemento dovrebbe essere su uno vecchio" e che aggiunge "Se creiamo un tag senza semantica, può essere usato ovunque senza mai sbagliare.Dobbiamo costringere gli autori a taggare correttamente la semantica del loro documento. Dobbiamo costringere i produttori di editor a rendere esplicita questa scelta nelle loro interfacce ".
Dalla bozza RFC che introduce 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 a tale scopo.
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 diffusa.
In breve, entrambi gli elementi sono nati dalla necessità di un contenitore semanticamente generico. Span è stato proposto come sostituto più generico di un <text>elemento per lo stile del testo. Div è stato proposto come un modo generico per dividere le pagine e ha avuto l'ulteriore vantaggio di sostituire il <center>tag per il contenuto allineato al centro. Div è sempre stato un elemento a blocchi a causa della sua storia come divisore di pagina. Lo 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 a essere elementi generici con blocco predefinito e proprietà di visualizzazione in linea rispettivamente.
In HTML ci sono tag che aggiungono struttura o semantica al contenuto. Ad esempio, il <p>tag viene utilizzato per identificare un paragrafo. Un altro esempio è il <ol>tag per un elenco ordinato.
Quando non è disponibile un tag adatto in HTML, come mostrato sopra, i tag <div>e <span>vengono generalmente utilizzati.
Il <div>tag viene utilizzato per identificare una sezione / divisione a livello di blocco di un documento che presenta un'interruzione di riga sia prima che dopo.
Esempi di utilizzo dei tag div sono le intestazioni, i piè di pagina, le navigazioni ecc. Tuttavia, in HTML 5 questi tag sono già stati forniti.
Il <span>tag viene utilizzato per identificare una sezione / divisione in linea di un documento.
Ad esempio, è possibile utilizzare un tag span per aggiungere pittogrammi incorporati a un elemento.
Ricorda, fondamentalmente e anche loro stessi non svolgono alcuna funzione. Essi sono non specifici sulla funzionalità solo con i loro tag .
Possono essere personalizzati solo con l'aiuto dei CSS.
Ora che arriva alla tua domanda:
Il tag SPAN insieme ad alcuni stili sarà utile per tenere all'interno di una linea, diciamo in un paragrafo, nell'html. Questo è un tipo di livello di riga o di istruzione in HTML.
Esempio:
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>La funzionalità dei tag DIV come detto può essere visibile solo con lo stile, può contenere blocchi di grandi dimensioni di codice HTML.
DIV è a livello di blocco
Esempio:
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>Entrambi hanno il loro tempo e il caso in cui utilizzare, in base alle vostre esigenze.
Spero di essere chiaro con la risposta. Grazie.