<div> एक सामान्य कंटेनर है जिसका उपयोग HTML में एलिमेंट्स को एक साथ ग्रुप करने के लिए किया जाता है ताकि CSS का उपयोग करके उन पर स्टाइल लागू की जा सके; डिव एलिमेंट्स डिफ़ॉल्ट रूप से खाली होते हैं और काम करने के लिए HTML एलिमेंट्स से भरे जाने की आवश्यकता होती है। <div> टैग्स जोड़े में आते हैं, एक ओपन टैग और एक क्लोजिंग टैग: 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; font-size: large; } .first { width: 500px; border: 1px solid black; padding: 20px } .square { width: 100%; height: 250px; color: white; border: none; } .blue { background-color: royalblue; border: none; } .purple { background-color: purple; border: none; } </style> </head> <body> <div class="first"> <h4>मैं एक डिव हूँ जो दो छोटे डिव्स को धारण कर रहा हूँ।</h4> <div class="square blue">1</div> <div class="square purple">2</div> </div> </body> </html>

<div> टैग के बारे में ध्यान देने वाली सबसे बड़ी बात यह है कि यह नहीं एक सेमेंटिक HTML एलिमेंट है। इसका मतलब है कि टैग को देखकर यह स्पष्ट रूप से स्पष्ट नहीं है कि <div> क्या करता है (के विपरीत <caption>, <address>, <section>, आदि)। 

यदि बहुत अधिक उपयोग किया जाता है, तो यह स्क्रीन रीडर्स के संबंध में एक्सेसिबिलिटी मुद्दों को जन्म दे सकता है। <div> टैग्स का उपयोग अंतिम उपाय के रूप में करना सुनिश्चित करें जब कोई सेमेंटिक HTML एलिमेंट नहीं है जो संभवतः बेहतर विकल्प हो। 

<div> कंटेनर एक ब्लॉक-लेवल एलिमेंट है। यह व्यूपोर्ट की पूरी चौड़ाई ले लेगा जब तक कि इसे CSS या इंलाइन-स्टाइलिंग का उपयोग करके डेवलपर द्वारा नियंत्रित नहीं किया जाता। इसके अलावा, इसके पहले और बाद में एक लाइन ब्रेक होता है जब तक कि डिस्प्ले प्रॉपर्टी को किसी प्रकार के इंलाइन मान या फ्लेक्स में नहीं बदला जाता। 

लेआउट के संदर्भ में, डिव्स काफी लचीले हैं। उन्हें एक दूसरे के अंदर नेस्ट किया जा सकता है। उस ने कहा, <div> कंटेनर्स पैराग्राफ को तोड़ देंगे - इसलिए <div> टैग को <p> टैग के अंदर नेस्ट न करें। इसके अलावा, जब आप हेडलाइन टैग्स (

,

, आदि) के अंदर <div> कंटेनर्स डालते हैं तो अजीब विसंगतियाँ होती हैं क्योंकि ऐसा लगता है कि <h1> जीत जाता है और <div> को नजरअंदाज कर दिया जाता है। 

विशेषताएँ (Attributes)

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

इन HTML विशेषताओं की पूरी सूची मोज़िला डेवलपर नेटवर्क वेबसाइट पर पाई जा सकती है।

स्टाइल कैसे करें (How to Style)

<div> को स्टाइल करना काफी सीधा है और इसे कई तरीकों से किया जा सकता है। इंलाइन स्टाइलिंग को <div> में स्टाइल विशेषता जोड़कर किया जा सकता है जिसमें स्टाइल प्रॉपर्टीज और मान एक स्ट्रिंग के रूप में जोड़े जाते हैं: 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>इंलाइन स्टाइलिंग</title> <body> <div style="width:500px;border: 3px solid black; padding: 20px;"> <h4>मैं एक डिव हूँ जो दो छोटे डिव्स को धारण कर रहा हूँ।</h4> <div style="background-color: royalblue; border: none;">1</div> <div style="background-color: purple; border: none;">2</div> </div> </body> </html>

स्टाइलिंग को <style> टैग में HTML दस्तावेज़ के <head> में या एक एक्सटर्नल स्टाइलशीट पर भी किया जा सकता है। यहीं <div> क्लास या id विशेषता काम आएगी। 

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।

औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; font-size: large; } .first { width: 500px; border: 3px solid black; padding: 20px } .square { width: 100%; height: 250px; color: white; border: none; } #blue { background-color: royalblue; border: none; } #purple { background-color: purple; border: none; } </style> </head> <body> <div class="first"> <h4>मैं एक डिव हूँ जो दो छोटे डिव्स को धारण कर रहा हूँ।</h4> <div id="blue" class="square">1</div> <div id="purple" class="square">2</div> </div> </body> </html>

क्लास विशेषता और id विशेषता का उपयोग एक ही समय में एक <div> पर किया जा सकता है। id को क्लास विशेषता से अधिक विशिष्ट माना जाता है, इसलिए उस विशेष <div> के लिए विशिष्ट कोई भी स्टाइलिंग id विशेषता का उपयोग कर सकती है ताकि यह किसी भी क्लास स्टाइलिंग को ओवरराइड कर सके। 

निष्कर्ष

आज हमने सीखा कि <div> क्या है, इसकी विशेषताएँ क्या हैं और एलिमेंट को कैसे स्टाइल किया जाता है। <div> कंटेनर्स पर डिस्प्ले प्रॉपर्टी कैसे प्रभाव डालती है, इस बारे में अधिक जानकारी के लिए, करियरकर्मा के बॉक्स मॉडल और फ्लेक्सबॉक्स मॉडल पर लेख देखें।