Perché il tag <p> non può contenere un tag <div> al suo interno?

169

Per quanto ne so, è giusto:

<div>
  <p>some words</p>
</div>

Ma questo è sbagliato:

<p>
  <div>some words</div>
</p>

Il primo può passare il validatore W3C (XHTML 1.0), ma il secondo no. So che nessuno scriverà codice come il secondo. Voglio solo sapere perché.

E la relazione di contenimento di altri tag?

html xhtml

— Henry H Miao
fonte

9

Poiché <p>è un elemento a livello di blocco ed è (supposto che sia) utilizzato per visualizzare il testo, non consentirà altri elementi a livello di blocco al suo interno, ma solo quelli incorporati come <span>e <strong>.

— Bojangles,

22

JamWaffles: questo pè un elemento a livello di blocco non ha nulla a che fare con esso. divè anche uno e consente altri blocchi.

— Joey,

possibile duplicato di: stackoverflow.com/questions/4967976/… (non contrassegnato): qualsiasi risposta decente risponderà a come leggere le specifiche HTML e quindi anche a questa.

— Ciro Santilli 17 冠状病六四事件法轮功

Dichiarare lo stile del div come inline non funziona neanche.

— Triynko,

198

Un luogo autorevole in cui cercare le relazioni di contenimento consentite è la specifica HTML. Vedi, ad esempio, http://www.w3.org/TR/html4/sgml/dtd.html . Specifica quali elementi sono elementi a blocchi e quali sono in linea. Per tali elenchi, cercare la sezione contrassegnata "Modelli di contenuto HTML".

Per l'elemento P, specifica quanto segue, a indicare che gli elementi P possono contenere solo elementi incorporati.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

Ciò è coerente con http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 , che afferma che l'elemento P "non può contenere elementi a livello di blocco (incluso lo stesso P)".

— Colin Campbell
fonte

74

Ho l'abitudine di evitare le specifiche, i documenti più autorevoli che abbiamo per cose del genere, perché non sono divertenti da leggere. +1 per leggerli, comprenderli e usarli per rispondere alle domande.

— Stoutie,

3

È ancora valido per HTML 5? Le specifiche collegate fanno riferimento in particolare a HTML 4 e HTML 5 non ha una definizione del tipo di documento .

— Ajedi32,

2

@ Ajedi32 Sì, qui . HTML5 ha rinominato molta terminologia, ma "Contenuti consentiti: contenuto di frase" significa lo stesso del %inlinebit sopra. Vedi anche la risposta di Oriol.

— Sig. Lister,

@Stoutie Proprio con te, ecco perché esiste Stack Overflow.

— Capitano Hypertext,

69

In breve, è impossibile posizionare un <div>elemento all'interno di a <p>nel DOM perché il <div>tag di apertura chiuderà automaticamente l' <p>elemento.

— defau1t
fonte

2

Ah, questo spiega perché c'è un enorme spazio prima di un div all'interno di ap, perché la p in realtà termina appena prima del div.

— AaronLS,

2

È possibile inserire un divelemento all'interno di una p nel DOM , ad esempio myP.appendChild(myDiv). Ma un parser HTML non lo farà.

— Oriol,

1

Non farlo. Non hai idea di come risponderà nei browser futuri. La tecnologia è in continua evoluzione. Potrebbe esserci un parser HTML dinamico che lo renderà non valido un giorno. L'obiettivo nel web dev è quello di creare cose che abbiano la capacità di essere desiderabili e in qualche modo compatibili. Se riesci a bypassare ciò che il browser consente, è sicuro dire che non puoi assicurarti che funzionerà per sempre. Basta usare una span ragazzi ... Se avete bisogno di un div, smettete di usare il tag p.

39

Secondo HTML5, il modello di contenuto degli divelementi è il contenuto di flusso

La maggior parte degli elementi utilizzati nel corpo dei documenti e delle applicazioni sono classificati come contenuto del flusso.

Ciò include pelementi, che possono essere utilizzati solo dove è previsto il contenuto del flusso .

Pertanto, gli divelementi possono contenere pelementi.

Tuttavia, il modello di contenuto degli pelementi è il contenuto di Phrasing

Il contenuto della frase è il testo del documento, nonché gli elementi che contrassegnano quel testo a livello di paragrafo. Corre di fraseggio contenuti forma paragrafi .

Ciò non include gli divelementi, che possono essere utilizzati solo dove è previsto il contenuto del flusso .

Pertanto, gli pelementi non possono contenere divelementi.

Poiché il tag di fine degli pelementi può essere omesso quando l' pelemento è immediatamente seguito da un divelemento (tra gli altri), il seguente

<p>
  <div>some words</div>
</p>

viene analizzato come

<p></p>
<div>some words</div>
</p>

e l'ultimo </p>è un errore.

— Oriol
fonte

Ma se nei CSS se ho impostato div inline perché non lo rispetta?

— Sanjay,

Dato che i valori CSS vengono applicati dopo l'analisi di dom ... anche se non ne facciamo div as inline in CSSuso, poiché la nuova struttura analizzata è <p>Text</p> <div>some words</div> <p></p> corretta?

— Sanjay,

@Sanjay Sì, sembra che tu abbia ragione. Inoltre, durante le mie osservazioni, se si inserisce <span> in <p> e quindi si imposta la visualizzazione di span su "blocco", verrà visualizzato come un tipico elemento a blocchi senza un tale effetto.

— Andrii Naumovych,

-1

Dopo l'X HTML, le convenzioni sono state modificate e ora è una combinazione di convenzioni XML e HTML, quindi è per questo che il secondo approccio è sbagliato e il validatore W3C accetta le cose corrette che sono conformi agli standard e alle convenzioni.

— geekdev786
fonte

XHTML non è cambiato molto. All'elemento p non è mai stato permesso di contenere un elemento div.

— Quentin,

-7

Perché il divtag ha una precedenza maggiore rispetto al ptag. Il ptag rappresenta un tag di paragrafo mentre il divtag rappresenta un tag di documento.

Puoi scrivere molti paragrafi in un tag documento, ma non puoi scrivere un documento in un paragrafo. Lo stesso di un file DOC.

— Gaurav Agrawal
fonte

2

In realtà, è divisione. Altrimenti sarebbe <doc>: D

— Kyle il

6

La precedenza non è un concetto che si applica agli elementi html e div rappresenta una divisione, come dice @KyleSevenoaks :)

— SimplGy

Che cos'è un file DOC? Un file di Microsoft Word ?

— Peter Mortensen,