खोज…


परिचय

HTML में div एलिमेंट एक कंटेनर एलिमेंट है जो अन्य एलिमेंट्स को एनकैप्सुलेट करता है और वेबपेज के अलग-अलग हिस्सों को ग्रुप और अलग-अलग करने के लिए इस्तेमाल किया जा सकता है। अपने आप में एक div स्वाभाविक रूप से किसी चीज़ का प्रतिनिधित्व नहीं करता है, लेकिन वेब डिज़ाइन में एक शक्तिशाली उपकरण है। यह विषय div तत्व के उद्देश्य और अनुप्रयोगों को कवर करता है।

वाक्य - विन्यास

  • <div>example div</div>

घोंसला करने की क्रिया

बहु <div> को दूसरे <div> अंदर रखना एक आम बात है। इसे आमतौर पर "नेस्टिंग" तत्वों के रूप में संदर्भित किया जाता है और सीएसएस स्टाइल के साथ उपखंड या सहायता डेवलपर्स में तत्वों को विभाजित करने की अनुमति देता है।

<div class="outer-div"> का प्रयोग दो <div class="inner-div"> तत्वों को एक साथ करने के लिए किया जाता है; प्रत्येक में एक <p> तत्व है।

<div class="outer-div">
  <div class="inner-div">
    <p>This is a paragraph</p>
  </div>
  <div class="inner-div">
    <p>This is another paragraph</p>
  </div>
</div>

यह निम्नलिखित परिणाम देगा (सीएसएस शैलियों स्पष्टता के लिए लागू):

यहाँ छवि विवरण दर्ज करें

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

गहरी <div> घोंसले से बचें

एक गहरी और अक्सर उपयोग किए जाने वाले नेस्टेड कंटेनर लेआउट एक खराब कोडिंग शैली को दर्शाता है।

गोल कोनों या इसी तरह के कुछ कार्य अक्सर ऐसा HTML कोड बनाते हैं। पिछली पीढ़ी के अधिकांश ब्राउज़रों के लिए CSS3 के समकक्ष हैं। कंटेंट को टैग अनुपात में बढ़ाने और पेज लोड को कम करने के लिए यथासंभव कम से कम एचटीएमएल तत्वों का उपयोग करने का प्रयास करें, जिसके परिणामस्वरूप खोज इंजन में बेहतर रैंकिंग होती है।

div सेक्शन एलिमेंट को 6 लेयर्स से ज्यादा नेस्टेड नहीं होना चाहिए।

मूल उपयोग

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

<div>
  <p>Hello! This is a paragraph.</p>
</div>

div तत्व आम तौर पर एक ब्लॉक-स्तरीय तत्व है , जिसका अर्थ है कि यह HTML दस्तावेज़ के एक ब्लॉक को अलग करता है और पृष्ठ की अधिकतम चौड़ाई पर कब्जा करता है। ब्राउज़रों में आमतौर पर निम्नलिखित सीएसएस नियम होते हैं:

div {
  display: block;
}

द वर्ल्ड वाइड वेब कंसोर्टियम (W3C) द्वारा डिव तत्व को अंतिम उपाय के एक तत्व के रूप में देखने के लिए दृढ़ता से प्रोत्साहित किया जाता है, जब कोई अन्य तत्व उपयुक्त न हो। Div तत्व के बजाय अधिक उपयुक्त तत्वों का उपयोग पाठकों के लिए बेहतर पहुंच और लेखकों के लिए आसान रखरखाव की ओर जाता है।

उदाहरण के लिए, एक ब्लॉग पोस्ट को <article> , एक अध्याय <section> , एक पृष्ठ के नेविगेशन एड्स का उपयोग करके चिह्नित किया जाएगा जिसका उपयोग <nav> , और फ़ॉर्म नियंत्रण का एक समूह <fieldset> का उपयोग करके किया जाएगा।

डिव तत्व शैलीगत उद्देश्यों के लिए या एक खंड के भीतर कई पैराग्राफ लपेटने के लिए उपयोगी हो सकते हैं जो सभी को समान तरीके से एनोटेट किया जाना है।



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow