एचटीएमएल <div> टैग

  • पिछला पृष्ठ <dir>
  • अगला पृष्ठ <dl>

परिभाषा और उपयोग

<div> टैग एचटीएमएल दस्तावेज़ में विभाजन या भाग (विभाजन या खंड, division/section) को परिभाषित करता है।

<div> टैग को दस्तावेज़ को स्वतंत्र और भिन्न भागों में विभाजित करने के लिए इस्तेमाल किया जा सकता है। यह एक सख्त संगठन और किसी भी फॉर्मेट से जुड़ा हुआ नहीं है।

किसी भी प्रकार की सामग्री को रख सकते हैं <div> भीतर!<div> टैग का इस्तेमाल किया जा सकता है, तो इस टैग का काम अधिक प्रभावी होता है।

यदि id या class लेबल करने <div>का इस्तेमाल करके class या id प्रतियोगिता के लिए <div> टैग रूप में शैली सेट करता है।

ध्यान दें:डिफ़ॉल्ट में, ब्राउज़र हमेशा <div> तत्व के बाद और बाद में एक ब्रेक लाइन रखना है।

उपयोग

<div> ब्लॉक स्ट्रीम तत्व है। इसका मतलब है कि इसकी सामग्री स्वयंचालित रूप से एक नई पंक्ति से शुरू होती है। वास्तव में, ब्रेक लाइन <div> पूर्वी रूप से अर्थवानी प्रदर्शन के लिए। इसे <div> के class या id अतिरिक्त शैली लागू करने की जरूरत नहीं है।

हर एक <div> को वर्ग या id जोड़ सकते हैं, हालांकि इससे भी कुछ लाभ होते हैं।

समान तत्व पर <div> तत्व अनुप्रयोग class या id प्रतियोगिता के लिए एट्रिब्यूट, लेकिन अधिक सामान्य स्थिति में केवल एक का इस्तेमाल किया जाता है। इन दोनों के मुख्य अंतर का प्रयोग class किस्म के तत्व (अभिजात तत्व, या इसे किसी किस्म के तत्व के रूप में समझा जा सकता है) के लिए किया जाता है, जबकि id एक अलग से अलग तत्व को पहचानने के लिए इस्तेमाल किया जाता है।

और देखें:

HTML ट्यूटोरियल:HTML के ब्लॉक एलिमेंट और इनलाइन एलिमेंट

HTML ट्यूटोरियल:HTML लेआउट

HTML DOM रेफरेंस मैनुअल:Div ऑब्जेक्ट

उदाहरण

दस्तावेज़ में CSS सेटिंग के लिए वापसी करने वाले <div> भाग:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>यह div तत्व में शीर्षक है</h2>
  <p>यह div तत्व में कुछ लेख है。</p>
</div>
</body>
</html>

स्वयं प्रयोग करें

केस स्टडी

<body>
 <h1>नई वेबसाइट</h1>
  <p>कुछ लेख। कुछ लेख। कुछ लेख...</p>
  ...
 <div class="news">
  <h2>समाचार शीर्षक 1</h2>
  <p>कुछ लेख। कुछ लेख। कुछ लेख...</p>
  ...
</div>
 <div class="news">
  <h2>समाचार शीर्षक 2</h2>
  <p>कुछ लेख। कुछ लेख। कुछ लेख...</p>
  ...
 </div>
 ...
</body>

उदाहरण का वर्णन

जैसा कि आप देखते हैं, ऊपर इस HTML में समाचार वेबसाइट की संरचना का सिमुलेशन किया गया है। इसमें हर एक div एक खबर के शीर्षक और सारांश को एक साथ जोड़ता है, अर्थात, div ने दस्तावेज़ को अतिरिक्त संरचना जोड़ी है। साथ ही, इन div के एक ही किस्म के तत्व होने के कारण, इन div को class="news" के रूप में पहचाना जा सकता है, इससे div को उचित अर्थवानी प्रदान की जाती है और इसके लिए इसे दस्तावेज़ पर फार्मेटिंग करने के लिए शैली का इस्तेमाल करना आसान हो जाता है, यह एक ही काम के लिए दो काम करता है।

सूचना:class और id के उपयोग के बारे में और गहरी जानकारी के लिए, 'W3school के संरचनात्मक टैग' इस चापर्टर में div, id और अन्य सहायक इस अनुच्छेद को पढ़ें

वैश्विक प्रोपर्टी

<div> टैग इवेंट प्रोपर्टी का समर्थन करता है HTML में वैश्विक प्रोपर्टी。

इवेंट प्रोपर्टी

<div> टैग इवेंट प्रोपर्टी का समर्थन करता है HTML में इवेंट प्रोपर्टी。

डिफ़ॉल्ट CSS सेटिंग

अधिकांश ब्राउज़र निम्नलिखित डिफ़ॉल्ट मूल्यों के साथ प्रदर्शित करेंगे <div> एलिमेंट:

div {
  display: block;
}

स्वयं प्रयोग करें

ब्राउज़र सहायता

च्रोम एज फायरफॉक्स सफारी ऑपेरा
च्रोम एज फायरफॉक्स सफारी ऑपेरा
सहायता सहायता सहायता सहायता सहायता
  • पिछला पृष्ठ <dir>
  • अगला पृष्ठ <dl>