Tag HTML "contenitore": utilizzo corretto?

Question

Da un po 'di tempo realizzo siti Web, ma non ho mai visto una discussione sull'uso corretto dei tag contenitore. Ho visto un numero qualsiasi di diversi tipi di contenuti nei tag della raccolta, ma di solito sembra che il creatore della pagina scelga solo uno stile che gli piace e lo rispetti.

La discrepanza principale nella mia mente è che tra

<p> 
<div> 

ma mi piacerebbe anche come opinioni riguardo

<span> 

e tutti gli altri posso essere dimenticare.

Answer 1

HTML è stato originariamente creato per mettere il contenuto dei documenti in una sorta di struttura comprensibile ai computer. Con questo in mente, il tag p dovrebbe contenere tutto ciò che sarebbe strutturato come un paragrafo se il contenuto della pagina dovesse essere trasformato in un documento stampato. Gli elementi div e span sono riservati come contenitori di uso generale per facilitare la formazione e il raggruppamento di elementi correlati per fornire livelli aggiuntivi di struttura, eventualmente correlati alle pagine di un documento di testo.

In alcuni casi, p tag dovrebbe contenere altri elementi, come ad esempio l'ancora (a), immagine (img) e di altri elementi in linea, in quanto si riferiscono direttamente al contenuto del resto del paragrafo e ha senso raggrupparli in questo modo, oppure il testo del resto del paragrafo fornisce una descrizione più approfondita.

Se non c'è una descrizione aggiuntiva di questi elementi, tuttavia, non ha senso collocarli in un paragrafo semplicemente come un contenitore conveniente; un div sarebbe più appropriato. In generale, un paragrafo dovrebbe contenere un paragrafo di testo e qualsiasi elemento direttamente correlato o descritto. Nient'altro ha molto senso in un paragrafo.

---

UPDATE: HTML5 aggiunge anche una serie di altri elementi semantici "contenitori", tra cui article, nav, header, section e aside.

Answer 2

Penso che i creatori di pagine debbano utilizzare il markup semantico, il che significa che il markup creato deve comunicare significato (e non presentazione). <div> e <p> hanno significati diversi. Il primo è usato per definire una divisione (o sezione) di una pagina HTML, la seconda per definire un paragrafo di testo.

Answer 3

credo, il significato dei tag è qualcosa di simile:

<p>Paragraph, usually just text</p> 

<div>A block, containing anything</div> 

<span>Just a simple non-blocking wrapper</span> 

Answer 4

<p> è un elemento di blocco che dovrebbe contenere un paragrafo, composto da testo, elementi in linea che modificano tale testo (<p>, <a>, <abbr>, ecc) e immagini.

<div> è un elemento a livello di blocco utilizzato per dividere la pagina, quasi sempre in combinazione con gli stili CSS.

<span> ... beh, onestamente non uso questo tag così spesso.È un elemento in linea e lo uso di solito quando mi piacerebbe applicare gli stili a una porzione di testo che non trarrebbe vantaggio dall'usare qualcosa con più significato, come i tag <strong> e <em>.

Answer 5

mi è stato insegnato a vedere <span> e <div> come il "tofu di webdeveloppement", dal momento che non ha alcun sapore reale ma si può fare praticamente qualsiasi cosa con esso.

(X) I tag HTML definiscono il testo su cui si trovano. È e un indirizzo, è un collegamento, è un paragrafo e così via ...

<div> e <span> sono semplicemente dei modi per ottenere pezzi del tuo sito che normalmente non puoi raggiungere. Come quando stai cercando di ridimensionare un | simbolo. Il modo più veloce che abbia mai trovato è stato quello di racchiuderlo, dargli un corso e poi implementare il CSS.

Questo è ciò per cui sono buoni, secondo me. Sarei interessato a sentire più o addirittura correzioni su ciò che ho scritto qui.

Answer 6

La differenza tra questi tre (e molti altri) tag è il loro significato semantico. Lo standard HTML include entrambi i tag con significati semantici specifici (<p> per paragrafi, <em> per testo sottolineato, ecc.) E tag senza significato semantico.

Questi ultimi sono <div> e <span>, che vengono utilizzati per identificare contenuti Stop dopo o a livello di riga che deve essere identificato (usando, per esempio un attributo class= o id=), ma per i quali un tag semanticamente-specifico non esiste . Ad esempio, si può scrivere <p>Hi, my name is <span class="name">John Doe</span>.</p> - indicando che si tratta di un paragrafo (che il browser ha già un'idea su come gestire) e che una parte del suo contenuto è un nome (che significa assolutamente niente nel browser a meno che CSS o JavaScript lo utilizzino).

Questi tag sono quindi incredibilmente utile sia ad aggiungere ulteriori informazioni a un documento HTML che non rientra all'interno dei tag semantici forniti dallo standard (vedi the hCard specification per un esempio eccellente) e per l'applicazione di visual (CSS) o struttura funzionale (JavaScript) a un documento senza alterarne la semantica.

Answer 7

suona come è necessario leggere il HTML specification

The p element:

L'elemento p rappresenta un paragrafo.

The div element:

L'elemento div non ha significato speciale a tutti. Rappresenta i suoi figli. Può essere utilizzato con gli attributi class, lang e title per contrassegnare la semantica comune a un gruppo di elementi consecutivi.

The span element:

L'elemento span non significa nulla di per sé, ma può essere utile quando viene utilizzato insieme con gli attributi globali, ad esempioclass, lang o dir. Rappresenta i suoi figli.

La principale differenza tra div e span è quella portata è flow content, phrasing content e palpable content, mentre un div è solo flow content e palpable content.

Essenzialmente questo equivale a:

div elementi sono elementi di blocco, e tipicamente può essere eseguito solo all'interno di altri elementi di blocco, che span elementi sono elementi in linea, e può essere immesso all'interno maggior parte degli altri elementi .

The HTML spec defines which elements are acceptable as descendents of each element.