Apa perbedaan antara <p> dan <div>?

188

Bisakah mereka digunakan secara bergantian? Apa saja aplikasinya?

html

— l --''''''---------------- '' '' '' '' '' '' '
sumber

32

Dalam HTML / XHTML yang valid, transisi atau ketat, Anda tidak dapat membuat <p> di dalam <p> lain sehingga <div> dan <p> tidak saling dipertukarkan.

— Byran Zaugg

3

Byran - Anda telah menemukan masalah penting dengan jawaban "semantik" ini. Masalahnya adalah HTML secara buatan membatasi <p> sehingga mereka berperilaku berbeda. Jika mereka hanya memblokir elemen plus makna semantik itu tidak masalah. Tetapi mengapa mencegah Anda dari misalnya menanamkan ilustrasi dalam paragraf?

— dkretz

2

@ 117700 sudahkah Anda mempertimbangkan untuk mengubah jawaban yang diterima?

— Karl Richter

Perlu diingat <div></div>membutuhkan tag buka dan tutup, <p>tidak dalam keadaan tertentu

— Mark Schultheiss

-26

Kode sebelumnya adalah

<p class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></p>

Jadi saya harus mengubahnya menjadi

<div class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></div>

Itu adalah perbaikan yang mudah. Dan CSS untuk kode di atas adalah

.item {
    position: relative;
    border: 1px solid green;
    height: 30px;
}

.item .name {
    position: absolute;
    top: 0px;
    left: 0px;
}

.item .price {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

Jadi tag div dapat mengandung elemen lain. P tidak boleh dipaksa untuk melakukan itu.

— Kazi T Ahsan
sumber

3

Aku benar-benar tidak tahu apa maksudmu. “Di situs”: situs mana? "... untuk membuatnya bekerja": apa artinya 'bekerja'? Apa render yang dimaksud?

— Marcel Korpel

4

Ini kedengarannya benar-benar tidak masuk akal bagi saya: pelemen dapat mengandung elemen inline lainnya (HTML 5 spec berbicara tentang elemen frase (lihat 7.3) ), di antaranya spanadalah salah satunya, di antara banyak lainnya. Selain itu, ini bukan jawaban untuk pertanyaan OP: itu tidak memberi tahu apa-apa tentang perbedaan antara pdan div. Dan tolong baca Bagaimana cara kerja balasan komentar?

— Marcel Korpel

@MarcelKorpel Mengapa ini jawaban yang diterima? Tidak berselisih, hanya bertanya-tanya mengapa ada ketidakkonsistenan.

— Anshul

3

@ Anshul Tampaknya ada yang berhasil untuk OP, tetapi tidak menjawab pertanyaan. Lihat juga skor jawaban ini: -16 saat ini. Jika Anda tidak tahu: OP adalah satu-satunya yang dapat menerima jawaban, sementara semua orang di komunitas dapat memilih jawaban naik atau turun.

— Marcel Korpel

Terlambat ke pesta kebencian, tetapi: <p>tag sangat sering mengandung elemen-elemen lain, seperti <strong>atau <em>dll. Konten dari <p>tag harus sesuai dengan namanya: paragraf teks. Paragraf teks sering mengandung markup tambahan. Tidak ada yang bahkan tidak biasa atau salah dengan itu.

— Dave Newton

298

Mereka memiliki perbedaan semantik - <div>elemen dirancang untuk menggambarkan wadah data sedangkan <p>elemen dirancang untuk menggambarkan paragraf konten.

Semantik membuat semua perbedaan. HTML adalah bahasa markup yang berarti dirancang untuk "menandai" konten dengan cara yang berarti bagi konsumen markup. Sebagian besar pengembang percaya bahwa semantik dokumen adalah gaya default dan rendering yang diterapkan browser ke elemen-elemen ini, tetapi bukan itu masalahnya.

Elemen yang Anda pilih untuk menandai konten Anda harus menggambarkan konten tersebut. Jangan menandai dokumen Anda berdasarkan bagaimana seharusnya terlihat - tandai berdasarkan apa itu.

Jika Anda membutuhkan wadah generik ~~murni untuk keperluan tata letak~~lalu gunakan a <div>. Jika Anda memerlukan elemen untuk menjelaskan paragraf konten, gunakan a <p>.

Catatan: Penting untuk memahami bahwa kedua <div>dan <p>merupakan unsur blok-tingkat yang berarti bahwa kebanyakan browser akan memperlakukan mereka dengan cara yang sama.

— Andrew Hare
sumber

Pengalaman saya bahwa jika Anda ingin tata letak beberapa bagian dari konten berbeda dari beberapa bagian lain dari konten, kedua semantik yang berbeda dan dengan demikian harus ditandai indepedently pula . Jika OTOH, mereka tidak berbeda secara semantik, maka mereka mungkin harus diletakkan bersama. Dalam kedua kasus, tidak perlu menambahkan elemen untuk keperluan tata letak, karena dalam kasus pertama seharusnya sudah ada di sana untuk memulai dan dalam kasus kedua tidak ada tata letak yang terjadi. Tapi sekali lagi, saya seorang purist dan situs saya selalu terlihat seperti kilas balik ke tahun 1995.

— Jörg W Mittag

5

Ketika Anda mengatakan untuk menggunakan <p>untuk "paragraf konten", apakah konten harus dalam bentuk huruf dan kata-kata? Apakah Anda pernah menggunakan <p>untuk menggambarkan beberapa jenis konten lain, seperti gambar?

— drs

1

@ drs: Konten yang diizinkan untuk <p> adalah "Konten frasa", yang terdiri dari elemen frasa yang dicampur dengan data karakter normal. Btw, gambar milik elemen frase sehingga Anda bisa menggunakannya di dalam <p>. Referensi: w3.org/TR/html-markup/p.html dan w3.org/TR/html-markup/common-models.html#common.elem.phrasing . HTH

— Paolo

2

Anda lupa menyebutkan bahwa Anda tidak dapat membuat sarang saat Anda dapat dengan div. Adapun jenis sikap "jangan sertakan informasi tata letak dalam html": tidak mungkin menulis file html tanpa repot-repot dengan bagaimana tampilannya. Pilihan urutan dan penumpukan div akan selalu memiliki pengaruh - kecuali jika Anda menulis beberapa javascript yang merobek halaman Anda dan merestrukturisasinya. Jadi melihat div sebagai "wadah generik murni untuk keperluan tata letak " adalah kata-kata yang tepat.

— masterxilo

Bagaimana jika saya lebih suka menggunakan divbukan p?

— Melab

66

Semua jawaban bagus, tapi ada satu perbedaan yang belum saya lihat disebutkan, dan itulah cara browser merendernya secara default. Browser web utama akan membuat <p>tag dengan margin di atas dan di bawah paragraf. Sebuah <div>tag akan diberikan tanpa marjin sama sekali.

— ceejayoz
sumber

10

Jika Anda ingin mengontrol rendering, Anda harus menggunakan CSS. Jangan mengandalkan default browser saat ini.

— Siput mekanik

15

Pertanyaannya menanyakan perbedaan apa yang ada antara tag DIV dan P. Ini penting bagi siapa pun yang tidak menggunakan reset CSS, terutama karena mungkin tidak jelas bagi seseorang yang hanya menggunakan satu browser.

— ceejayoz

3

Terimakasih atas klarifikasinya. Saya mencari perbedaan yang tepat ini karena menggunakan tag P menyebabkan teks muncul dengan margin di bagian atas (dan mungkin bagian bawah), jadi bertanya-tanya dari mana ruang itu berasal. Diperlukan untuk menyingkirkan ruang.

— WhatsInaname

@ceejayoz margin? bagaimana kita bisa melihatnya?

— JAVA

58

<p> menunjukkan paragraf dan memiliki makna semantik.

<div> hanyalah sebuah wadah blok untuk konten lain.

Apa pun yang bisa masuk dalam <p>bisa masuk <div>tetapi sebaliknya tidak benar. <div>tag dapat memiliki elemen tingkat blok sebagai anak-anak. <p>elemen tidak bisa.

Lihatlah HTML DTD .

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ELEMENT P - O (%inline;)*            -- paragraph -->

— cletus
sumber

3

Jadi, Anda tidak dapat memiliki <h1> dalam <p>?

— Koray Tugay

8

Satu-satunya perbedaan antara dua elemen adalah semantik. Kedua elemen, secara default, memiliki tampilan aturan CSS: blok (karenanya tingkat blok) diterapkan padanya; tidak lebih (kecuali margin agak ekstra dalam beberapa kasus). Namun, sebagaimana disebutkan di atas, keduanya sangat berbeda dalam hal semantik.

The <p>elemen, seperti namanya agak menyiratkan, adalah untuk paragraf. Dengan demikian, <p>harus digunakan ketika Anda ingin membuat blok teks paragraf.

The <div>elemen, bagaimanapun, memiliki sedikit atau tidak ada artinya semantik dan karena itu dapat digunakan sebagai elemen blok-tingkat generik - yang paling umum, orang menggunakannya dalam layout karena berarti semantik dan dapat digunakan untuk umum apa pun yang Anda mungkin memerlukan blok- elemen level untuk.

Tautan untuk lebih detail

— Ashish Agarwal
sumber

3

Tidak perlu untuk kalimat terakhir itu. Hampir semua pertanyaan di situs ini mungkin bisa di-google-kan, tapi bukan itu intinya. Intinya adalah membuat sumber daya untuk pengembang dengan pertanyaan yang sama di masa depan.

— nickf

ya, tapi dia bisa memulai diskusi dengan beberapa info yang relevan, dengan cara apa pun akan mengeditnya

— Ashish Agarwal

1

Karena baik p dan div adalah elemen blok, mengapa ketika elemen h1 bersarang di dalam div, itu akan mewarisi gaya tetapi ketika bersarang di ap itu tidak akan? Terima kasih

— Return-1

@ Return-1 Saya tidak tahu apa yang sebenarnya terjadi dalam kasus Anda, tetapi h1 adalah header, yang bukan merupakan frase konten dan karenanya tidak diperbolehkan di dalam paragraf. Pertimbangkan teks tercetak - ini berisi tajuk dan paragraf, tetapi tajuknya bukan bagian dari paragraf.

— Oskar Berggren

7

DIV adalah wadah level blok generik yang dapat berisi elemen blok atau inline lainnya, termasuk elemen DIV lainnya, sedangkan P adalah untuk membungkus paragraf (teks).

— bdl
sumber

7

Mungkin lebih baik untuk melihat standar yang dirancang oleh W3.org. Ini alamatnya: http://www.w3.org/

Tag "DIV" dapat membungkus tag "P" sedangkan, tag "P" tidak dapat membungkus tag "DIV" - sejauh ini saya tahu perbedaan ini. Mungkin ada lebih banyak perbedaan lainnya.

— Nazmul
sumber

5

Pikirkan DIVsebagai elemen pengelompokan. Anda menempatkan elemen dalam elemen DIV sehingga Anda dapat mengatur keberpihakannya

Padahal "p"hanya untuk membuat paragraf baru.

— Suraj Chandran
sumber

3

<p> mewakili paragraf dan <div> mewakili 'divisi', saya kira perbedaan utamanya adalah bahwa divs secara semantik 'tidak berarti', di mana sebagai <p> seharusnya mewakili sesuatu yang berkaitan dengan teks itu sendiri.

Misalnya Anda tidak ingin memiliki <p> bersarang, karena itu tidak masuk akal semantik (kecuali dalam arti kutipan) Sedangkan orang menggunakan <div> bersarang untuk tata letak halaman.

Menurut Wikipedia

Dalam HTML, elemen span dan div digunakan di mana bagian dari dokumen tidak dapat secara semantik dijelaskan oleh elemen HTML lainnya.

— Chad Okere
sumber

2

Sebuah ptag adalah untuk sebuah paragraf, umumnya digunakan untuk teks. Sebuah divtag adalah untuk divisi, dan umumnya digunakan untuk membuat bagian-bagian dari teks.

— Daniel A. White
sumber

2

<p> biasanya digunakan untuk teks, paragraf biasanya.

<div>digunakan untuk blok atau area di halaman web. Misalnya bisa digunakan untuk membuat area header.

Mereka mungkin bisa digunakan secara bergantian, tetapi Anda seharusnya tidak menggunakannya.

— vektran
sumber