Mengapa tag <p> tidak dapat berisi tag <div> di dalamnya?

169

Sejauh yang saya tahu, ini benar:

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

Tapi ini salah:

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

Yang pertama bisa melewati validator W3C (XHTML 1.0), tetapi yang kedua tidak bisa. Saya tahu tidak ada yang akan menulis kode seperti yang kedua. Aku hanya ingin tahu kenapa.

Dan bagaimana dengan hubungan penahanan tag lain?

html xhtml Henry H Miao
sumber
9
Karena <p>adalah elemen level blok, dan (seharusnya) digunakan untuk menampilkan teks, itu tidak akan mengizinkan elemen level blok lain di dalamnya, tetapi hanya yang inline seperti <span>dan <strong>.
Bojangles
22
JamWaffles: Itu pelemen level blok tidak ada hubungannya dengan itu. divjuga satu dan memungkinkan blok lainnya.
Joey
kemungkinan duplikat: stackoverflow.com/questions/4967976/… (tidak berbintang): setiap jawaban yang layak untuk itu akan menjawab cara membaca spesifikasi HTML dan karenanya juga menjawab ini.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Mendeklarasikan gaya div sebagai inline juga tidak berfungsi.
Triynko

Jawaban:

198

Tempat yang berwenang untuk mencari hubungan penahanan yang diizinkan adalah spesifikasi HTML. Lihat, misalnya, http://www.w3.org/TR/html4/sgml/dtd.html . Ini menentukan elemen mana yang merupakan elemen blok dan mana yang sebaris. Untuk daftar tersebut, cari bagian yang ditandai "model konten HTML".

Untuk elemen P, ia menetapkan berikut ini, yang menunjukkan bahwa elemen P hanya diperbolehkan mengandung elemen sebaris.

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

Ini konsisten dengan http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 , yang mengatakan bahwa elemen P "tidak dapat mengandung elemen level blok (termasuk P sendiri)."

Colin Campbell
sumber
74
Saya memiliki kebiasaan menghindari spesifikasi, dokumen paling otoritatif yang kami miliki untuk hal-hal seperti ini, karena tidak menyenangkan untuk dibaca. +1 untuk benar-benar membacanya, memahaminya, dan menggunakannya untuk menjawab pertanyaan.
Stoutie
3
Apakah ini masih berlaku untuk HTML 5? Spec yang ditautkan secara spesifik mereferensikan HTML 4, dan HTML 5 tidak memiliki definisi tipe dokumen .
Ajedi32
2
@ Ajedi32 Ya, di sini . HTML5 telah berganti nama menjadi banyak terminologi, tetapi "Konten yang diizinkan: konten ungkapan" artinya sama dengan %inlinebit di atas. Lihat juga jawaban Oriol.
Tn. Lister
@Stoutie Benar denganmu, itu sebabnya Stack Overflow ada.
Kapten Hypertext
69

Singkatnya, tidak mungkin untuk menempatkan <div>elemen di dalam a <p>di DOM karena <div>tag pembuka akan secara otomatis menutup <p>elemen.

defau1t
sumber
2
Ah, ini menjelaskan mengapa ada ruang besar sebelum div di dalam ap, karena p sebenarnya berakhir tepat sebelum div.
AaronLS
2
Anda dapat menempatkan divelemen di dalam a p di DOM , misalnya myP.appendChild(myDiv). Tapi pengurai HTML tidak akan melakukannya.
Oriol
1
Jangan lakukan itu. Anda tidak tahu bagaimana itu akan merespons di browser masa depan. Teknologi terus berubah. Mungkin ada parser html dinamis yang akan membuat itu tidak valid suatu hari. Tujuan dalam web dev adalah untuk menciptakan hal-hal yang memiliki kemampuan untuk diinginkan dan agak kompatibel. Jika Anda dapat mem-bypass apa yang diizinkan oleh browser, aman untuk mengatakan bahwa Anda tidak dapat memastikan itu akan berfungsi selamanya. Cukup gunakan span span ... Jika Anda membutuhkan div, berhentilah menggunakan tag p.
39

Menurut HTML5, model konten dari divelemen adalah konten aliran

Sebagian besar elemen yang digunakan dalam tubuh dokumen dan aplikasi dikategorikan sebagai konten aliran.

Itu termasuk pelemen, yang hanya dapat digunakan di mana konten mengalir diharapkan.

Karena itu, divelemen dapat mengandung pelemen.

Namun, model konten dari pelemen adalah konten kalimat

Isi frasa adalah teks dokumen, serta elemen yang menandai teks itu pada tingkat intra-paragraf. Menjalankan frasa bentuk paragraf konten .

Itu tidak termasuk divelemen, yang hanya dapat digunakan di mana konten mengalir diharapkan.

Karenanya, pelemen tidak dapat mengandung divelemen.

Sejak tag akhir dari pelemen dapat dihilangkan ketika pelemen segera diikuti oleh divelemen (antara lain), berikut ini

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

diuraikan sebagai

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

dan yang terakhir </p>adalah kesalahan.

Oriol
sumber
Tetapi jika dalam CSS jika saya menetapkan div menjadi sebaris mengapa itu tidak menghormati itu?
Sanjay
Karena nilai-nilai CSS diterapkan setelah Dom Parsing ... bahkan jika kita membuatnya div as inline in CSStidak ada gunanya, karena struktur parsing baru adalah <p>Text</p> <div>some words</div> <p></p> apakah pemahaman saya benar?
Sanjay
@ Sanjay Ya, sepertinya Anda benar. Dan lebih lagi, selama pengamatan saya, jika Anda meletakkan <span> di dalam <p> dan kemudian mengatur tampilan span ke "blok", itu akan dirender sebagai elemen blok khas tanpa efek seperti itu.
Andrii Naumovych
-1

Setelah X HTML, konvensi telah diubah, dan sekarang ini merupakan campuran dari konvensi XML dan HTML, jadi itu sebabnya pendekatan kedua salah dan validator W3C menerima hal-hal yang benar yang sesuai dengan standar dan konvensi.

geekdev786
sumber
XHTML tidak banyak berubah. Elemen p tidak pernah diizinkan mengandung elemen div.
Quentin
-7

Karena divtag memiliki prioritas lebih tinggi daripada ptag. The ptag merupakan tag paragraf sedangkan divtag merupakan tag dokumen.

Anda dapat menulis banyak paragraf dalam tag dokumen, tetapi Anda tidak bisa menulis dokumen dalam paragraf. Sama seperti file DOC.

Gaurav Agrawal
sumber
2
Sebenarnya, ini pembagian. Kalau tidak, itu akan menjadi <doc>: D
Kyle
6
Precedence bukan konsep yang berlaku untuk elemen html, dan div mewakili divisi, seperti kata @KyleSevenoaks :)
SimplGy
Apa itu file DOC? File Microsoft Word ?
Peter Mortensen