อะไรคือความแตกต่างระหว่าง <p> และ <div>

188

พวกเขาสามารถใช้แทนกันได้? แอปพลิเคชันคืออะไร

html

— L --''''''--------- '' '' '' '' '' ''
แหล่งที่มา

32

ใน HTML / XHTML ที่ถูกต้องการเปลี่ยนผ่านหรือเข้มงวดคุณไม่สามารถซ้อน <p> ภายใน <p> อื่นได้ดังนั้น <div> และ <p> จะไม่แลกเปลี่ยน

— Byran Zaugg

3

บายรัน - คุณพบปัญหาที่สำคัญด้วยคำตอบ "ความหมาย" เหล่านี้ ปัญหาคือว่า HTML ปลอมแปลงข้อ จำกัด <p> s เพื่อให้พวกเขาทำงานแตกต่างกัน หากพวกเขาเป็นเพียงองค์ประกอบของบล็อกบวกกับความหมายทางความหมายที่จะตกลง แต่ทำไมป้องกันคุณจากการฝังภาพประกอบไว้ในย่อหน้า?

— dkretz

2

@ 117700 คุณคิดว่าจะเปลี่ยนคำตอบที่ยอมรับหรือไม่?

— Karl Richter

โปรดทราบว่า<div></div>ต้องเปิดและปิดแท็ก<p>ไม่ได้อยู่ในสถานการณ์ที่เฉพาะเจาะจง

— Mark Schultheiss

-26

รหัสก่อนหน้าคือ

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

ดังนั้นฉันต้องเปลี่ยนมันเป็น

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

มันเป็นการแก้ไขที่ง่าย และ CSS สำหรับโค้ดด้านบนคือ

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

ดังนั้นแท็ก div สามารถมีองค์ประกอบอื่น ๆ P ไม่ควรถูกบังคับให้ทำเช่นนั้น

— Kazi T Ahsan
แหล่งที่มา

3

ฉันไม่รู้จริงๆว่าคุณหมายถึงอะไร “ ในเว็บไซต์”: เว็บไซต์ไหน “ …เพื่อให้ทำงานได้”: 'ทำงาน' หมายถึงอะไร การแสดงผลที่ตั้งใจคืออะไร?

— Marcel Korpel

4

สิ่งนี้ฟังดูไร้เหตุผลสำหรับฉัน: pองค์ประกอบสามารถมีองค์ประกอบอินไลน์อื่น ๆ (การพูดถึงข้อกำหนด HTML 5 ขององค์ประกอบการใช้ถ้อยคำ (ดู 7.3) ) ซึ่งspanเป็นหนึ่งในองค์ประกอบเหล่านี้และอื่น ๆ อีกมากมาย นอกจากนี้นี้ไม่ได้เป็นคำตอบสำหรับคำถามของ OP: มันไม่ได้บอกอะไรเกี่ยวกับความแตกต่างระหว่างและp divและโปรดอ่านวิธีการตอบความคิดเห็นทำงานอย่างไร

— Marcel Korpel

@MarcelKorpel ทำไมนี่คือคำตอบที่ยอมรับแล้ว ไม่โต้แย้งเพียงแค่สงสัยว่าทำไมมีความไม่สอดคล้องกัน

— Anshul

3

@Anshul เห็นได้ชัดว่ามีบางอย่างที่ใช้งานได้กับ OP แต่ก็ไม่ได้ตอบคำถาม ดูคะแนนคำตอบนี้: -16 ในขณะนี้ ในกรณีที่คุณไม่ทราบ: OP เป็นเพียงคนเดียวที่สามารถยอมรับคำตอบได้ในขณะที่ทุกคนในชุมชนสามารถโหวตคำตอบขึ้นหรือลง

— Marcel Korpel

มาสายฝ่ายเกลียดชัง แต่: <p>แท็กมักจะมีองค์ประกอบอื่น ๆ เช่น<strong>หรือ<em>อื่น ๆ เนื้อหาของ<p>แท็กควรเป็นชื่อที่มีความหมาย: ย่อหน้าของข้อความ ย่อหน้าของข้อความมักจะมีมาร์กอัปเพิ่มเติม ไม่มีอะไรแม้แต่จะผิดปกติหรือผิดปกติจากระยะไกล

— Dave Newton

297

พวกเขามีความแตกต่างทางความหมาย - <div>องค์ประกอบถูกออกแบบมาเพื่ออธิบายที่เก็บข้อมูลในขณะที่<p>องค์ประกอบนั้นถูกออกแบบมาเพื่ออธิบายเนื้อหาหนึ่งย่อหน้า

ความหมายสร้างความแตกต่างทั้งหมด HTML เป็นภาษามาร์กอัปซึ่งหมายความว่ามันถูกออกแบบมาเพื่อ "มาร์กอัป" เนื้อหาในลักษณะที่มีความหมายต่อผู้บริโภคของมาร์กอัป นักพัฒนาส่วนใหญ่เชื่อว่าความหมายของเอกสารเป็นสไตล์เริ่มต้นและการแสดงผลที่เบราว์เซอร์ใช้กับองค์ประกอบเหล่านี้ แต่ไม่ใช่กรณี

องค์ประกอบที่คุณเลือกเพื่อทำเครื่องหมายเนื้อหาของคุณควรอธิบายถึงเนื้อหา อย่าทำเครื่องหมายเอกสารตามลักษณะที่ปรากฏ - ทำเครื่องหมายตามเอกสาร

หากคุณต้องการภาชนะทั่วไป ~~เพื่อวัตถุประสงค์ในการจัดวางอย่างหมดจด~~<div>แล้วใช้ <p>หากคุณต้องการองค์ประกอบที่จะอธิบายวรรคของเนื้อหาแล้วใช้

หมายเหตุ: มันเป็นสิ่งสำคัญที่จะเข้าใจว่าทั้งสอง<div>และ<p>เป็นองค์ประกอบระดับบล็อกซึ่งหมายความว่าเบราว์เซอร์ส่วนใหญ่จะปฏิบัติต่อพวกเขาในลักษณะที่คล้ายกัน

— Andrew Hare
แหล่งที่มา

ประสบการณ์ของผมได้ว่าถ้าคุณต้องการที่จะจัดวางชิ้นส่วนของเนื้อหาบางส่วนที่แตกต่างกว่าชิ้นอื่น ๆ บางส่วนของเนื้อหาทั้งสองมีความแตกต่างความหมายจึงควรจะทำเครื่องหมายขึ้น indepedently อยู่แล้ว หาก OTOH พวกเขาไม่ได้มีความหมายแตกต่างกันดังนั้นพวกเขาควรจะอยู่ด้วยกัน ไม่ว่าในกรณีใดไม่จำเป็นต้องเพิ่มองค์ประกอบสำหรับวัตถุประสงค์เลย์เอาต์เพราะในกรณีแรกมันควรจะอยู่ที่นั่นเพื่อเริ่มต้นด้วยและในกรณีที่สองไม่มีโครงร่างเกิดขึ้น แต่แล้วอีกครั้งฉันเป็นคนเจ้าระเบียบและไซต์ของฉันมักจะดูเหมือนย้อนหลังถึงปี 1995

— Jörg W Mittag

5

เมื่อคุณพูดว่าใช้<p>สำหรับ "ย่อหน้าเนื้อหา" เนื้อหานั้นจะต้องอยู่ในรูปแบบของตัวอักษรและคำศัพท์หรือไม่? คุณเคยใช้<p>อธิบายเนื้อหาประเภทอื่นเช่นภาพหรือไม่

— drs

1

@drs: เนื้อหาที่อนุญาตสำหรับ <p> คือ "เนื้อหาการวลี" ซึ่งประกอบด้วยองค์ประกอบการใช้ถ้อยคำที่ผสมกับข้อมูลอักขระปกติ Btw รูปภาพเป็นขององค์ประกอบการใช้ถ้อยคำเพื่อให้คุณสามารถใช้ภายใน <p> อ้างอิง: w3.org/TR/html-markup/p.htmlและw3.org/TR/html-markup/common-models.html#common.elem.phrasing HTH

— เปาโล

2

คุณลืมที่จะพูดถึงว่าคุณไม่สามารถซ้อน p ในขณะที่คุณเล่นกับ div ได้ ในส่วนของทัศนคติ "ไม่รวมข้อมูลเลย์เอาต์ในรูปแบบ html": ไม่สามารถเขียนไฟล์ html ได้โดยไม่ต้องสนใจว่ามันควรจะมีหน้าตาอย่างไร ทางเลือกของคุณในการสั่งซื้อและการซ้อนของ div นั้นจะมีอิทธิพลเสมอ - เว้นแต่คุณจะเขียนจาวาสคริปต์ที่ฉีกหน้าของคุณออกจากกันและปรับโครงสร้างใหม่ ดังนั้นการมอง div เป็น "คอนเทนเนอร์ทั่วไปอย่างหมดจดเพื่อวัตถุประสงค์เลย์เอาต์ " เป็นถ้อยคำที่ถูกต้อง

— masterxilo

เกิดอะไรขึ้นถ้าฉันอยากจะใช้divแทนp?

— Melab

66

ทุกคำตอบที่ดี แต่มีข้อแตกต่างอย่างหนึ่งที่ฉันยังไม่ได้กล่าวถึงและเป็นวิธีที่เบราว์เซอร์แสดงผลตามค่าเริ่มต้น เว็บเบราว์เซอร์หลักจะแสดง<p>แท็กที่มีระยะขอบด้านบนและด้านล่างของย่อหน้า <div>แท็กจะแสดงผลได้โดยไม่ต้องมีอัตรากำไรใด ๆ เลย

— ceejayoz
แหล่งที่มา

10

หากคุณต้องการควบคุมการเรนเดอร์คุณควรใช้ CSS อย่าพึ่งพาค่าเริ่มต้นปัจจุบันของเบราว์เซอร์

— หอยทากเครื่องกล

15

คำถามถามว่าความแตกต่างระหว่างแท็ก DIV และ P อย่างไร นี่เป็นสิ่งสำคัญสำหรับทุกคนที่ไม่ได้ใช้การรีเซ็ต CSS โดยเฉพาะอย่างยิ่งเนื่องจากอาจไม่ชัดเจนสำหรับบางคนที่ใช้เบราว์เซอร์เดียวเท่านั้น

— ceejayoz

3

ขอขอบคุณสำหรับการชี้แจง. ฉันกำลังมองหาความแตกต่างที่แน่นอนนี้เนื่องจากการใช้แท็ก P ทำให้ข้อความปรากฏที่ขอบด้านบน (และด้านล่างอาจ) ดังนั้นจึงสงสัยว่าที่มาของพื้นที่นั้น จำเป็นต้องกำจัดพื้นที่

— WhatsInAName

@ceejayoz margin หรือไม่ เราจะเห็นได้อย่างไร

— JAVA

58

<p> ระบุย่อหน้าและมีความหมายทางตรรก

<div> เป็นเพียงคอนเทนเนอร์บล็อกสำหรับเนื้อหาอื่น

สิ่งใดที่สามารถไปใน<p>สามารถไปใน<div>แต่กลับไม่เป็นความจริง <div>แท็กสามารถมีองค์ประกอบระดับบล็อกเป็นเด็ก ๆ <p>องค์ประกอบไม่สามารถ

Tae ดูที่ที่DTD HTML

<!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
แหล่งที่มา

3

ดังนั้นคุณไม่สามารถมี <h1> ใน <p> ได้หรือไม่

— Koray Tugay

8

ความแตกต่างเพียงอย่างเดียวระหว่างองค์ประกอบทั้งสองคือความหมาย โดยค่าเริ่มต้นองค์ประกอบทั้งสองจะมีการแสดงกฎ CSS: block (ดังนั้นระดับบล็อก) จะถูกนำไปใช้กับพวกเขา ไม่มีอะไรเพิ่มเติม (ยกเว้นบางส่วนเพิ่มพิเศษในบางกรณี) อย่างไรก็ตามดังที่กล่าวมาทั้งสองต่างกันอย่างมากในแง่ของความหมาย

<p>องค์ประกอบเป็นชื่อของมันค่อนข้างมีความหมายสำหรับย่อหน้า ดังนั้น<p>ควรใช้เมื่อคุณต้องการสร้างบล็อกของข้อความในย่อหน้า

อย่างไรก็ตาม<div>องค์ประกอบมีความหมายเพียงเล็กน้อยถึงไม่มีความหมายดังนั้นจึงสามารถใช้เป็นองค์ประกอบระดับบล็อกทั่วไปซึ่งโดยทั่วไปแล้วผู้คนจะใช้มันในเลย์เอาต์เพราะมันไม่มีความหมายทางความหมายและสามารถใช้กับสิ่งใดก็ตามที่คุณอาจต้องการบล็อก องค์ประกอบระดับสำหรับ

ลิงค์เพื่อดูรายละเอียดเพิ่มเติม

— Ashish Agarwal
แหล่งที่มา

3

ไม่จำเป็นต้องใช้ประโยคสุดท้ายนั้น คำถามเกือบทั้งหมดในเว็บไซต์นี้อาจเป็น googled แต่นั่นไม่ใช่ประเด็น ประเด็นก็คือการสร้างทรัพยากรให้กับนักพัฒนาที่มีคำถามเดียวกันในอนาคต

— nickf

ใช่ แต่เขาสามารถเริ่มต้นการสนทนากับข้อมูลที่เกี่ยวข้องบางวิธีจะแก้ไขได้

— Ashish Agarwal

1

เนื่องจากทั้ง p และ div เป็นองค์ประกอบของบล็อกทำไมเมื่อองค์ประกอบ h1 ซ้อนกันภายใน div มันจะสืบทอดสไตล์ แต่เมื่อซ้อนกันใน ap มันจะไม่? ขอบคุณ

— Return-1

@ Return-1 ฉันไม่รู้ว่าเกิดอะไรขึ้นในกรณีของคุณ แต่ h1 เป็นส่วนหัวซึ่งไม่ใช่เนื้อหาที่เป็นคำพูดและไม่อนุญาตในย่อหน้า พิจารณาข้อความที่พิมพ์ - มันมีส่วนหัวและย่อหน้า แต่ส่วนหัวไม่ได้เป็นส่วนหนึ่งของย่อหน้า

— Oskar Berggren

7

DIVเป็นคอนเทนเนอร์ระดับบล็อกทั่วไปที่สามารถมีองค์ประกอบบล็อกหรืออินไลน์อื่น ๆ รวมถึงองค์ประกอบ DIV อื่น ๆ ในขณะที่Pคือการตัดย่อหน้า (ข้อความ)

— BDL
แหล่งที่มา

7

มันอาจจะดีกว่าที่จะเห็นมาตรฐานที่ออกแบบโดย W3.org นี่คือที่อยู่: http://www.w3.org/

แท็ก "DIV" สามารถใส่แท็ก "P" ในขณะที่แท็ก "P" ไม่สามารถใส่แท็ก "DIV" ได้ฉันรู้ถึงความแตกต่างนี้แล้ว อาจมีความแตกต่างอื่น ๆ เพิ่มเติม

— Nazmul
แหล่งที่มา

5

คิดว่าDIVเป็นองค์ประกอบการจัดกลุ่ม คุณใส่องค์ประกอบในองค์ประกอบ DIV เพื่อให้คุณสามารถตั้งค่าการจัดตำแหน่งของพวกเขา

ในขณะที่"p"เป็นเพียงการสร้างย่อหน้าใหม่

— Suraj Chandran
แหล่งที่มา

3

<p> หมายถึงย่อหน้าและ <div> หมายถึง 'การแบ่งแยก' ฉันคิดว่าความแตกต่างที่สำคัญคือ divs นั้นหมายถึง 'ไร้ความหมาย' โดยที่ <p> ควรจะเป็นตัวแทนของสิ่งที่เกี่ยวข้องกับข้อความนั้นเอง

คุณไม่ต้องการให้มี <p> ซ้อนกันตัวอย่างเช่นเนื่องจากจะไม่มีความหมายมาก (ยกเว้นในแง่ของการอ้างอิง) ในขณะที่ผู้คนใช้ซ้อน <div> s สำหรับเค้าโครงหน้า

ตามที่Wikipedia

ใน HTML องค์ประกอบ span และ div จะถูกใช้โดยที่ส่วนของเอกสารไม่สามารถอธิบายความหมายโดยองค์ประกอบ HTML อื่น ๆ ได้

— ชาด Okere
แหล่งที่มา

2

pแท็กสำหรับย่อหน้าที่ใช้โดยทั่วไปสำหรับข้อความ divแท็กสำหรับการแบ่งและโดยทั่วไปใช้สำหรับการสร้างส่วนของข้อความ

— Daniel A. White
แหล่งที่มา

2

<p> ใช้ความหมายของข้อความย่อหน้าปกติ

<div>ใช้สำหรับบล็อกหรือพื้นที่ในเว็บเพจ ตัวอย่างเช่นมันสามารถใช้ในการทำให้พื้นที่ของส่วนหัว

พวกเขาอาจจะใช้แทนกันได้ แต่คุณไม่ควร

— Vectran
แหล่งที่มา