What is div tag in HTML in Hindi: HTML में <div> टैग एक बॉक्स की तरह होता है जो वेबपेज पर सामग्री को व्यवस्थित करने में मदद करता है। इसका अपने आप में कोई विशिष्ट उद्देश्य नहीं है, लेकिन यह अन्य तत्वों (elements) को एक साथ समूहीकृत करने के लिए अत्यंत उपयोगी है।
सीएसएस के साथ, इसका उपयोग वेबपेज के अनुभागों को स्टाइल और व्यवस्थित करने के लिए किया जाता है, जिससे सामग्री को साफ और तार्किक रूप से डिजाइन और व्यवस्थित करना आसान हो जाता है।
इस लेख “div tag in HTML in Hindi” में, आप सीखेंगे कि HTML में div टैग क्या है, सिंटैक्स, उदाहरण और उपयोग के साथ। लेकिन इससे पहले कि आप div टैग सीखना शुरू करें, जानें कि HTML टैग क्या है, और HTML तत्व (elements) क्या होता है।
Table of Contents
div टैग क्या है (What is <div> tag in HTML in Hindi)?
HTML में <div> टैग एक मूलभूत तत्व है जिसका उपयोग वेब पेज के भीतर डिवीजन या सेक्शन बनाने के लिए किया जाता है।
“विभाजन” के लिए खड़े, <div> का अपने आप में कोई अंतर्निहित अर्थ या विशिष्ट स्टाइल नहीं है, लेकिन यह अन्य HTML तत्वों को समूहित करने और व्यवस्थित करने के लिए एक कंटेनर के रूप में कार्य करता है, जिससे डेवलपर्स को सामग्री को अधिक कुशलता से संरचना और स्टाइल करने की अनुमति मिलती है।
मूल रूप से, यह एक ब्लॉक-स्तरीय कंटेनर के रूप में कार्य करता है, जिसका उपयोग आमतौर पर सीएसएस के साथ फ़ॉर्मेटिंग, लेआउट या स्टाइल लागू करने और सामग्री को तार्किक अनुभागों में व्यवस्थित करने के लिए किया जाता है।
<div> तत्व को एक ID या class निर्दिष्ट करके, डेवलपर्स एक साथ कई तत्वों को लक्षित और स्टाइल कर सकते हैं, जिससे एक वेबसाइट पर डिज़ाइन और लेआउट प्रक्रिया अधिक प्रबंधनीय और सुसंगत हो जाती है।
उदाहरण के लिए, डेवलपर्स आमतौर पर हेडर, फ़ुटर, साइडबार, सामग्री अनुभाग और बहुत कुछ बनाने के लिए <div> तत्वों का उपयोग करते हैं।
इसकी बहुमुखी प्रतिभा और सामग्री को एक साथ समूहित करने की क्षमता इसे अच्छी तरह से संरचित और देखने में आकर्षक वेब पेज बनाने के लिए एक महत्वपूर्ण बिल्डिंग ब्लॉक बनाती है।
- यह भी पढ़े: HTML में table कैसे बनाए
<div> टैग का सिंटैक्स (Syntax of <div> Tag in Hindi)
HTML में <div> टैग का सिंटैक्स सीधा है। इसमें एक प्रारंभिक (opening) <div> टैग होता है जिसके बाद टैग के भीतर वैकल्पिक attributes होती हैं और एक </div> टैग के साथ समापन (close) होता है।
यहाँ एक उदाहरण है:
<div class="container" id="mainSection">
<!-- Content goes here -->
</div>
आप CSS या जावास्क्रिप्ट का उपयोग करके <div> तत्व को लक्षित और स्टाइल करने के लिए शुरुआती टैग के भीतर विभिन्न attributes, जैसे class, id, style, इत्यादि को शामिल कर सकते हैं।
Opening और closing होने वाले <div> टैग के बीच रखी गई सामग्री (content) को एक साथ समूहीकृत (group) किया जाता है और इसे एक unit के रूप में स्टाइल या हेरफेर किया जा सकता है।
Get Complete HTML5 with 7 Projects in Hindi PDF Notes
यदि आप HTML5 Basic to Advanced साथ में 7 Projects चाहते हैं तो आप केबल ₹59 रुपये में हमारे संपूर्ण HTML5 नोट्स अभी इस नम्बर “8178180070” पे WP करके खरीद सकते हैं। पहले 50 उपयोगकर्ताओं के लिए केवल ₹59 रुपये है बाद में इसका price ₹149 रुपये हो जाएगा।
HTML में Div टैग का उदाहरण (Example of Div tag in HTML)
आइए HTML div टैग का उदाहरण को कोड के सहित समझें:
<!DOCTYPE html>
<html>
<head>
<title>Div Example</title>
<style>
/* CSS for styling */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.header {
text-align: center;
font-size: 24px;
color: #333;
}
.content {
margin-top: 15px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
Welcome to TutorialinHindi.com
</div>
<div class="content">
<p>This is a simple example of using the <div> tag in HTML.</p>
<p><div> tags help in structuring and styling content on web pages.</p>
<p>They allow for better organization and layout of elements.</p>
</div>
</div>
</body>
</html>
कोड Explanation:
इस उदाहरण में, एक <div> क्लास कंटेनर के साथ अन्य <div> तत्वों को लपेटता है, जिसमें हेडर (<div class=’header’>) और सामग्री (<div class=’content’>) शामिल हैं।
<style> टैग के भीतर परिभाषित CSS शैलियाँ इन <div> तत्वों की उपस्थिति को नियंत्रित करती हैं, यह दर्शाती हैं कि कैसे <div> टैग का उपयोग सामग्री को संरचित करने और एक सुव्यवस्थित वेबपेज बनाने के लिए स्टाइल लागू करने के लिए किया जाता है।
Output:
- यह भी पढ़े: HTML में Form कैसे बनाए
Usage and Features of <div> tag in HTML in Hindi
HTML में <div> टैग का बड़े पैमाने पर उपयोग किया जाता है:
- सामग्री की संरचना करना: यह किसी वेबपेज पर सामग्री को तार्किक अनुभागों में संरचना और व्यवस्थित करने का एक तरीका प्रदान करता है।
- लेआउट डिज़ाइन: यह एक लेआउट ब्लॉक के रूप में कार्य करता है, जो वेबपेज पर columns, rows या grids में तत्वों की व्यवस्था को सक्षम बनाता है।
- सीएसएस के साथ स्टाइलिंग: डेवलपर्स सीएसएस शैलियों को लागू करने के लिए <div> टैग का उपयोग करते हैं, जिससे सामग्री की अनुकूलित उपस्थिति, स्वरूपण और स्थिति की अनुमति मिलती है।
- तत्वों को समूहीकृत करना: यह कई HTML तत्वों को एक साथ समूहित करता है, जिससे उन्हें एक ही पहचानकर्ता, जैसे कि क्लास या आईडी का उपयोग करके सामूहिक रूप से स्टाइल या हेरफेर किया जा सकता है।
- पहुंच और SEO: <div> टैग का उचित उपयोग एक अच्छी तरह से संरचित लेआउट प्रदान करके वेबसाइट की पहुंच और SEO में सुधार कर सकता है जिसे सर्च इंजन आसानी से क्रॉल और व्याख्या कर सकते हैं।
आइए div टैग के कुछ सामान्य attributes को समझें।
Common Attributes of <div> Tag in Hindi
HTML में <div> टैग विभिन्न attributes का समर्थन करता है जो इसके व्यवहार और स्वरूप (appearance) को नियंत्रित करने में मदद करता है।
यहां कुछ सामान्य attributes दी गई हैं:
| Attribute | विवरण |
|---|---|
| id | <div> तत्व के लिए एक अद्वितीय पहचानकर्ता प्रदान करता है, जो सीएसएस या जावास्क्रिप्ट के लिए विशिष्ट लक्ष्यीकरण की अनुमति देता है। |
| class | <div> को एक या अधिक कक्षाएं निर्दिष्ट करता है, जिससे एक ही कक्षा को साझा करने वाले कई तत्वों की स्टाइलिंग या हेरफेर सक्षम हो जाता है। |
| style | इनलाइन सीएसएस स्टाइल को सीधे <div> टैग के भीतर इसकी उपस्थिति, जैसे कि रंग, मार्जिन, बॉर्डर आदि को नियंत्रित करने की अनुमति देता है। |
| title | एक शीर्षक या टूलटिप टेक्स्ट निर्दिष्ट करता है जो तब दिखाई देता है जब उपयोगकर्ता <div> तत्व पर होवर करते हैं। |
| aria-attributes | सहायक प्रौद्योगिकियों के लिए अतिरिक्त जानकारी प्रदान करके, विकलांग उपयोगकर्ताओं की सहायता करके पहुंच को बढ़ाता है। |
| data-attributes | अतिरिक्त जानकारी संग्रहीत करने के लिए कस्टम डेटा attributes को शामिल करने में सक्षम बनाता है, जिसका उपयोग अक्सर कार्यक्षमता या स्टाइलिंग उद्देश्यों के लिए जावास्क्रिप्ट द्वारा किया जाता है। |
व्यक्तिगत रूप से या संयोजन में उपयोग की जाने वाली ये attributes HTML दस्तावेज़ों के भीतर <div> तत्वों के लिए बेहतर स्टाइलिंग, स्क्रिप्टिंग, पहुंच और डेटा प्रबंधन की सुविधा प्रदान करती हैं।
Free HTML Course in Hindi
यदि आप संपूर्ण HTML course in Hindi free में सीखना चाहते हैं, तो यहां HTML ट्यूटोरियल पर हमारा पूरा विवरण है, अभी सीखना शुरू करने के लिए नीचे दिए गए लिंक पर क्लिक करें:
निष्कर्ष
<div> टैग एक बॉक्स की तरह काम करता है, जो HTML तत्वों को एक साथ रखता है। यह एक खाली कैनवास की तरह है जिसे आप सीएसएस का उपयोग करके स्टाइल कर सकते हैं या जावास्क्रिप्ट का उपयोग करके संशोधित कर सकते हैं।
आप क्लास या आईडी (ID) जोड़कर इसे आसानी से स्टाइल कर सकते हैं। <div> के अंदर, आप किसी भी प्रकार की सामग्री – text, images, forms – डाल सकते हैं, जिससे यह वेबपेज पर सामग्री को व्यवस्थित करने के लिए अत्यधिक लचीला हो जाता है।
