<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>I'm a div that is holding two smaller divs.</h4>
<div class="square blue">1</div>
<div class="square purple">2</div>
</div>
</body>
</html>
<div> . के बारे में ध्यान देने योग्य सबसे बड़ी बात टैग यह है कि यह नहीं है एक अर्थपूर्ण HTML तत्व। इसका मतलब है कि यह स्पष्ट रूप से स्पष्ट नहीं है कि <div> टैग को देखकर करता है (<कैप्शन>, <पता>, <अनुभाग>, आदि के विपरीत)
यदि बहुत अधिक उपयोग किया जाता है, तो इससे स्क्रीन रीडर्स के संबंध में एक्सेसिबिलिटी संबंधी समस्याएं हो सकती हैं। <div> . का उपयोग करना सुनिश्चित करें टैग अंतिम उपाय के रूप में जब कोई अर्थपूर्ण HTML तत्व नहीं है जो संभवतः एक बेहतर विकल्प हो सकता है।
<div> कंटेनर एक ब्लॉक-स्तरीय तत्व है। यह व्यूपोर्ट की पूरी चौड़ाई तक ले जाएगा जब तक कि इसे डेवलपर द्वारा CSS या इनलाइन-स्टाइलिंग का उपयोग करके नियंत्रित नहीं किया जाता है। इसके अलावा, इसके पहले और बाद में एक लाइन ब्रेक होता है जब तक कि डिस्प्ले प्रॉपर्टी को किसी प्रकार के इनलाइन वैल्यू या फ्लेक्स में नहीं बदला जाता है।
लेआउट के संदर्भ में, divs काफी लचीले होते हैं। उन्हें एक दूसरे के अंदर घोंसला बनाया जा सकता है। कहा जा रहा है, <div> कंटेनर पैराग्राफ को तोड़ देंगे - इसलिए एक <div> . को नेस्ट न करें <p> . के अंदर टैग करें उपनाम। इसके अलावा, जब आप <div> . डालते हैं तो अजीब विसंगतियां होती हैं शीर्षक टैग (
, , आदि) के अंदर कंटेनर जैसा कि <h1> लगता है जीतता है और <div> नजरअंदाज किया जाता है।
विशेषताएं
<h1> लगता है जीतता है और <div> नजरअंदाज किया जाता है। विशेषताएं
एचटीएमएल <div> तत्वों की HTML की घटना और वैश्विक विशेषताओं तक पहुंच है। ईवेंट विशेषताएँ वे हैं जिनका उपयोग तब किया जाता है जब कोई उपयोगकर्ता आपके वेब पेज के साथ किसी तरह से इंटरैक्ट करता है - उदाहरण के लिए, एक ऑनक्लिक, जब कोई उपयोगकर्ता किसी छवि पर क्लिक करता है, या एक ऑनमाउसओवर, जब कोई उपयोगकर्ता किसी तत्व पर अपने माउस का मार्गदर्शन करता है। वैश्विक विशेषताएँ वे विशेषताएँ हैं जो सभी HTML तत्वों के लिए उपलब्ध हैं।
इन HTML विशेषताओं की पूरी सूची Mozilla Developer Network वेबसाइट पर पाई जा सकती है।
कैसे स्टाइल करें
एक <div> को स्टाइल करना काफी सीधा है और इसे कई तरीकों से किया जा सकता है। <div> . में स्टाइल एट्रिब्यूट जोड़कर इनलाइन स्टाइलिंग की जा सकती है शैली के गुणों और मूल्यों के साथ एक स्ट्रिंग के रूप में जोड़ा गया:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Styling</title>
<body>
<div style="width:500px;border: 3px solid black; padding: 20px;">
<h4>I'm a div that is holding two smaller divs.</h4>
<div style="background-color: royalblue; border: none;">1</div>
<div style="background-color: purple; border: none;">2</div>
</div>
</body>
</html>
स्टाइलिंग <style> . में भी की जा सकती है <head> . में टैग करें HTML दस्तावेज़ या बाहरी स्टाइलशीट पर। यह वह जगह है जहाँ <div> वर्ग या आईडी विशेषता चलन में आ जाएगी।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
कक्षाओं का उपयोग कई तत्वों पर किया जा सकता है जिन्हें आप उसी तरह स्टाइल करना चाहते हैं। एक 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>I'm a div that is holding two smaller divs.</h4>
<div id="blue" class="square">1</div>
<div id="purple" class="square">2</div>
</div>
</body>
</html>
क्लास एट्रिब्यूट और आईडी एट्रिब्यूट का इस्तेमाल एक ही समय में एक <div> . पर किया जा सकता है . आईडी को वर्ग विशेषता की तुलना में अधिक विशिष्ट माना जाता है, इसलिए उस विशेष के लिए विशिष्ट कोई भी स्टाइल <div> एक आईडी विशेषता का उपयोग कर सकते हैं ताकि यह किसी भी वर्ग स्टाइल को ओवरराइड कर सके।
निष्कर्ष
आज हमने सीखा कि <div> है, इसकी विशेषताएँ क्या हैं और तत्व को कैसे शैलीबद्ध किया जाता है। डिस्प्ले प्रॉपर्टी कैसे प्रभावित करती है, इस बारे में अधिक जानकारी के लिए <div> कंटेनर, बॉक्स मॉडल और फ्लेक्सबॉक्स मॉडल पर करियरकर्मा के लेख देखें।