Apa perbedaan antara <p> dan <div>?

Apa perbedaan antara <p> dan <div>?

Bisakah mereka digunakan secara bergantian? Apa saja aplikasinya?

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.

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 letaklalu 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.

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.

<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 -->

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

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).

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.

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

Padahal "p"hanya untuk membuat paragraf baru.

<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.

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

<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.