<P> और <div> में क्या अंतर है?

187

क्या उनका परस्पर उपयोग किया जा सकता है? एप्लिकेशन क्या हैं?

html

— एल --''''''--------- '' '' '' '' '' ''
स्रोत

31

किसी भी मान्य HTML / XHTML, संक्रमणकालीन या सख्त में, आप <p> को किसी अन्य <p> के अंदर घोंसला नहीं बना सकते, इसलिए <div> और <p> इंटरचेंज नहीं हैं।

— बायरन ज़ॉगग

3

बायरन - आप इन "अर्थ" के जवाब के साथ आवश्यक मुद्दे को मारा है। समस्या यह है कि HTML कृत्रिम रूप से बाधा डालता है <p> इसलिए वे अलग तरह से व्यवहार करते हैं। यदि वे सिर्फ ब्लॉक तत्व प्लस अर्थ अर्थ होते हैं जो ठीक होगा। लेकिन आपको एक परिच्छेद में चित्रण एम्बेड करने वाले उदाहरण से क्यों रोका जाए?

— dkretz

2

@ 117700 क्या आपने स्वीकार किए गए उत्तर को बदलने पर विचार किया है?

— कार्ल रिक्टर

ध्यान रखें कि <div></div>खुले और समापन टैग की आवश्यकता होती है, <p>विशिष्ट परिस्थितियों में नहीं होती है

— मार्क शुल्त्स

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

यह आसान तय था। और उपरोक्त कोड के लिए सीएसएस है

.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 को ऐसा करने के लिए मजबूर नहीं किया जाना चाहिए।

— काज़ी टी अहसन
स्रोत

3

मैं वास्तव में नहीं जानता कि आपका क्या मतलब है। "साइट में": कौन सी साइट? "... इसे काम करने के लिए": 'काम' का क्या मतलब है? क्या है प्रतिपादन?

— मार्सेल कोर्पल

4

पूरी तरह से मेरे लिए विसंगत यह लगता है: pतत्व कर सकते हैं अन्य इनलाइन तत्वों (एचटीएमएल 5 की कल्पना वार्ता शामिल phrasing तत्वों (7.3 देखें) ), जिनमें से spanउनमें से एक है, कई अन्य लोगों के अलावा। इसके अलावा, यह ओपी के सवाल का जवाब नहीं है: यह pऔर के बीच के अंतर के बारे में कुछ भी नहीं बताता है div। और कृपया पढ़ें कि टिप्पणी कैसे काम करती है?

— Marcel Korpel

@MarcelKorpel यह क्यों स्वीकार किया गया जवाब है? विवाद नहीं, सिर्फ यह सोचकर कि असंगति क्यों है।

— अंशुल

3

@ अंशुल ने स्पष्ट रूप से ओपी के लिए कुछ काम किया, लेकिन यह सवाल का जवाब नहीं देता है। इस उत्तर के स्कोर को भी देखें: -16 इस समय। मामले में आप नहीं जानते: ओपी केवल एक ही है जो एक उत्तर को स्वीकार कर सकता है, जबकि समुदाय में हर कोई एक उत्तर या नीचे वोट कर सकता है।

— मार्सेल कोर्पल

नफरत करने वाली पार्टी के लिए देर से, लेकिन: <p>टैग में अक्सर अन्य तत्व शामिल होते हैं, जैसे <strong>या <em>आदि। एक <p>टैग की सामग्री होनी चाहिए कि इसका नाम क्या है: पाठ का एक पैराग्राफ। पाठ के अनुच्छेदों में अक्सर अतिरिक्त मार्कअप होते हैं। वहाँ भी दूरस्थ रूप से असामान्य या उसके साथ कुछ भी गलत नहीं है।

— डेव न्यूटन

296

उनके पास शब्दार्थ अंतर है - एक <div>तत्व को डेटा के कंटेनर का वर्णन करने के लिए डिज़ाइन किया गया है जबकि एक <p>तत्व सामग्री के एक पैरा का वर्णन करने के लिए डिज़ाइन किया गया है।

शब्दार्थ सभी अंतर बनाते हैं। HTML एक मार्कअप भाषा है जिसका अर्थ है कि यह सामग्री को "मार्क अप" करने के लिए डिज़ाइन किया गया है जो मार्कअप के उपभोक्ता के लिए सार्थक है। अधिकांश डेवलपर्स का मानना है कि दस्तावेज़ के शब्दार्थ डिफ़ॉल्ट शैली और प्रतिपादन हैं जो ब्राउज़र इन तत्वों पर लागू होते हैं लेकिन ऐसा नहीं है।

आपकी सामग्री को चिह्नित करने के लिए आपके द्वारा चुने गए तत्व सामग्री का वर्णन करना चाहिए । यह कैसे दिखना चाहिए, इसके आधार पर अपने दस्तावेज़ को चिह्नित न करें - यह जो है उसके आधार पर इसे चिह्नित करें।

अगर आपको जेनेरिक कंटेनर चाहिए ~~विशुद्ध रूप से लेआउट प्रयोजनों के लिए~~तो एक का उपयोग करें <div>। यदि आपको सामग्री के एक पैरा का वर्णन करने के लिए एक तत्व की आवश्यकता है, तो एक का उपयोग करें <p>।

नोट: यह महत्वपूर्ण है समझने के लिए कि दोनों <div>और <p>कर रहे हैं ब्लॉक स्तर तत्वों जिसका अर्थ है कि अधिकांश ब्राउज़र इसी तरह से उन्हें व्यवहार करेगा।

— एंड्रयू हरे
स्रोत

मेरा अनुभव यह रहा है कि यदि आप किसी सामग्री को किसी अन्य सामग्री के टुकड़े से अलग तरह से लेआउट करना चाहते हैं, तो वे दोनों शब्दार्थ से अलग हैं और इस प्रकार वैसे भी अनिश्चित काल तक चिह्नित किए जाने चाहिए । यदि ओटीओएच, वे शब्दार्थ से अलग नहीं हैं , तो उन्हें संभवतः एक साथ रखा जाना चाहिए। किसी भी मामले में, लेआउट उद्देश्यों के लिए एक तत्व जोड़ने की आवश्यकता नहीं है, क्योंकि पहले मामले में यह पहले से ही शुरू होना चाहिए था और दूसरे मामले में कोई लेआउट नहीं चल रहा है। लेकिन फिर, मैं एक शुद्धतावादी हूं और मेरी साइटें हमेशा 1995 में फ्लैशबैक की तरह दिखती हैं।

— जोर्ग डब्ल्यू मित्तग

5

जब आप <p>"सामग्री के पैराग्राफ" के लिए उपयोग करने के लिए कहते हैं , तो क्या सामग्री को अक्षरों और शब्दों के रूप में होना चाहिए? क्या आप कभी <p>छवियों जैसे कुछ अन्य प्रकार की सामग्री का वर्णन करने के लिए उपयोग करेंगे ?

— 11:11

1

@ डीआरएस: <p> के लिए अनुमत सामग्री "फ़्रेसिंग सामग्री" है, जिसमें सामान्य चरित्र डेटा के साथ इंटरमिक्स किए गए तत्वों को शामिल करना शामिल है। Btw, चित्र तत्वों को फिर से बनाने के हैं ताकि आप उन्हें <p> के अंदर उपयोग कर सकें। संदर्भ: w3.org/TR/html-markup/p.html और w3.org/TR/html-markup/common-models.html#common.elem.phrasing । HTH

— पाओलो

2

आप यह उल्लेख करना भूल गए कि आप div के साथ होने पर p का घोंसला नहीं बना सकते। जैसा कि "html में लेआउट की जानकारी शामिल नहीं है" के लिए दृष्टिकोण: यह कैसे दिखना चाहिए के साथ परेशान किए बिना एक html फ़ाइल लिखना संभव नहीं है। जब तक आप अपने पेज को अलग करने और उसे पुनर्गठन करने के लिए कुछ जावास्क्रिप्ट नहीं लिखते हैं, तब तक आपकी पसंद और डिवेंसिंग के घोंसले के शिकार का प्रभाव हमेशा रहेगा। इस प्रकार div को " लेआउट उद्देश्यों के लिए एक सामान्य कंटेनर के रूप में देखना " सही शब्द है।

— मास्टरएक्सिलो

क्या होगा यदि मैं नहीं बल्कि का उपयोग करेंगे divके बजाय p?

— मेलब

66

सभी अच्छे उत्तर, लेकिन एक अंतर है जिसका मैंने अभी तक उल्लेख नहीं किया है, और वह यह है कि ब्राउज़र उन्हें कैसे डिफ़ॉल्ट रूप से प्रस्तुत करते हैं। प्रमुख वेब ब्राउज़र <p>पैराग्राफ के ऊपर और नीचे मार्जिन के साथ एक टैग प्रदान करेंगे । एक <div>टैग को बिना किसी मार्जिन के प्रदान किया जाएगा।

— ceejayoz
स्रोत

10

यदि आप रेंडरिंग को नियंत्रित करना चाहते हैं, तो आपको CSS का उपयोग करना चाहिए। ब्राउज़रों की वर्तमान चूक पर भरोसा न करें।

— मैकेनिकल घोंघा

15

प्रश्न पूछा गया कि DIV और P टैग्स में क्या अंतर हैं। यह किसी के लिए एक सीएसएस रीसेट का उपयोग नहीं करने के लिए एक महत्वपूर्ण है, खासकर जब यह सिर्फ एक ब्राउज़र का उपयोग कर किसी के लिए गैर-स्पष्ट हो सकता है।

— ceejayoz

3

स्पष्टीकरण के लिए धन्यवाद। मैं इस सटीक अंतर की तलाश कर रहा था क्योंकि पी टैग का उपयोग करने से पाठ शीर्ष पर (और नीचे शायद) मार्जिन के साथ दिखाई दे रहा था, इसलिए सोच रहा था कि वह स्थान कहां से आ रहा है। जगह खाली कराने की जरूरत है।

— WhatsInAName

@ceejayoz मार्जिन? हम उसे कैसे देख सकते हैं?

— जेएवीए

57

<p> एक पैराग्राफ इंगित करता है और अर्थ अर्थ है।

<div> अन्य सामग्री के लिए बस एक ब्लॉक कंटेनर है।

जो कुछ भी एक कैन में <p>जा सकता है <div>लेकिन रिवर्स में सच नहीं है। <div>टैग में बच्चों के रूप में ब्लॉक-स्तरीय तत्व हो सकते हैं। <p>तत्व नहीं कर सकते।

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
स्रोत

3

तो आपके पास <h> में <h1> नहीं हो सकता है?

— कोरे तुगे

8

दोनों तत्वों के बीच एकमात्र अंतर शब्दार्थ है। दोनों तत्व, डिफ़ॉल्ट रूप से, सीएसएस नियम प्रदर्शन है: उन पर लागू ब्लॉक (इसलिए ब्लॉक-स्तर); कुछ और नहीं (कुछ उदाहरणों में कुछ अतिरिक्त मार्जिन को छोड़कर)। हालाँकि, जैसा कि पूर्वोक्त, वे दोनों शब्दार्थ के संदर्भ में बहुत भिन्न हैं।

<p>तत्व, जैसा कि इसके नाम पर कुछ हद तक निकलता है, अनुच्छेदों के लिए है। इस प्रकार, <p>का उपयोग किया जाना चाहिए जब आप पैराग्राफ पाठ के ब्लॉक बनाना चाहते हैं।

<div>सबसे अधिक लोगों को यह लेआउट के भीतर उपयोग करें, क्योंकि यह अर्थ की दृष्टि से कोई मतलब नहीं है और आम तौर पर कुछ भी आप एक block- आवश्यकता हो सकती है के लिए इस्तेमाल किया जा सकता है - तत्व, हालांकि, थोड़ा कोई अर्थ की दृष्टि से जिसका अर्थ है और इसलिए एक सामान्य ब्लॉक स्तर तत्व के रूप में इस्तेमाल किया जा सकता करने के लिए है के लिए स्तर तत्व।

अधिक विस्तार के लिए लिंक

— आशीष अग्रवाल
स्रोत

3

उस अंतिम वाक्य की कोई आवश्यकता नहीं है। इस साइट पर लगभग सभी सवालों के लिए जाना जा सकता है, लेकिन यह बात नहीं है। यह बिंदु भविष्य में उन्हीं सवालों के साथ डेवलपर्स के लिए एक संसाधन बनाने का है।

— nickf

हां, लेकिन वह कुछ प्रासंगिक जानकारी के साथ चर्चा शुरू कर सकता था, किसी भी तरह से इसे संपादित करेगा

— आशीष अग्रवाल

1

चूँकि p और div दोनों ब्लॉक एलिमेंट हैं, ऐसा क्यों है कि जब h1 एलिमेंट को div के भीतर नेस्ट किया जाता है, तो यह स्टाइल्स को इनहेरिट करेगा, लेकिन एप में नेस्टेड वॉन्ट नहीं होगा? धन्यवाद

— रिटर्न -1

@ रिटर्न -1 मुझे नहीं पता कि आपके मामले में वास्तव में क्या होता है, लेकिन एक एच 1 हेडर है, जो सामग्री को फिर से तैयार नहीं कर रहा है और इसलिए एक पैराग्राफ के अंदर इसकी अनुमति नहीं है। मुद्रित पाठ पर विचार करें - इसमें हेडर और पैराग्राफ शामिल हैं, लेकिन हेडर पैराग्राफ का हिस्सा नहीं हैं।

— Oskar Berggren

7

DIV एक सामान्य ब्लॉक स्तर का कंटेनर है जिसमें अन्य DIV तत्वों सहित कोई भी अन्य ब्लॉक या इनलाइन तत्व शामिल हो सकते हैं, जबकि P को पैराग्राफ (पाठ) को लपेटना है।

— बीडीएल
स्रोत

7

W3.org द्वारा डिजाइन किए गए मानक को देखना बेहतर हो सकता है। यहाँ पता है: http://www.w3.org/

एक "DIV" टैग "P" टैग को लपेट सकता है जबकि, एक "P" टैग "DIV" टैग को लपेट नहीं सकता है-अब तक मैं इस अंतर को जानता हूं। और भी कई अंतर हो सकते हैं।

— नजमुल
स्रोत

5

DIVएक समूह तत्व के रूप में सोचो । आप तत्वों को एक DIV तत्व में रखते हैं ताकि आप उनके संरेखण सेट कर सकें

जबकि "p"बस एक नया पैराग्राफ बनाना है।

— सूरज चंद्रन
स्रोत

3

<p> एक पैराग्राफ का प्रतिनिधित्व करता है और <div> एक 'डिवीजन' का प्रतिनिधित्व करता है, मुझे लगता है कि मुख्य अंतर यह है कि divs शब्दार्थ 'अर्थहीन' हैं, जहां <p> के रूप में पाठ से संबंधित कुछ का प्रतिनिधित्व करना चाहिए।

आप उदाहरण के लिए नेस्टेड <p> नहीं चाहते हैं, क्योंकि यह बहुत अर्थपूर्ण अर्थ नहीं होगा (उद्धरण के अर्थ को छोड़कर) जहां लोग पृष्ठ लेआउट के लिए नेस्टेड <div> s का उपयोग करते हैं।

विकिपीडिया के अनुसार

HTML में, स्पैन और डिव एलिमेंट्स का उपयोग किया जाता है, जहाँ डॉक्यूमेंट के कुछ हिस्सों को अन्य एचटीएमएल एलिमेंट्स द्वारा शब्दार्थ रूप से वर्णित नहीं किया जा सकता है।

— चाड ओकेरे
स्रोत

2

एक pटैग एक पैराग्राफ के लिए है, आम तौर पर पाठ के लिए उपयोग किया जाता है। एक divटैग विभाजन के लिए है, और आम तौर पर पाठ के अनुभाग बनाने के लिए उपयोग किया जाता है।

— डैनियल ए व्हाइट
स्रोत

2

<p> आमतौर पर पाठ, अनुच्छेदों के लिए आमतौर पर उपयोग किया जाता है।

<div>एक वेबपेज में एक ब्लॉक या क्षेत्र के लिए प्रयोग किया जाता है। उदाहरण के लिए इसका उपयोग हेडर के क्षेत्र को बनाने के लिए किया जा सकता है।

वे शायद एक दूसरे का उपयोग कर सकते हैं , लेकिन आपको नहीं करना चाहिए।

— vectran
स्रोत