HTML Div Tag: कंटेंट जोड़ना और लेआउट बनाना
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
<div> tag web design में सबसे ज़्यादा इस्तेमाल होने वाला element है। यह एक सामान्य block-level container है: इसका अपना कोई अर्थ नहीं है, यह खुद कोई styling नहीं जोड़ता, और यह सिर्फ दूसरे elements को एक साथ group करता है ताकि आप उन्हें एक unit के रूप में style कर सकें या हिला सकें।
Div किस काम के हैं
- Layout: पेज को header, sidebar, main content और footer क्षेत्रों में बाँटना।
- Grouping: heading, paragraph और button को एक साथ लपेटना जो एक साथ जुड़े हैं — उदाहरण के लिए, एक course card।
- Styling: किसी group को class के ज़रिए background, border, padding या width देना।
- JavaScript: किसी group को id देना ताकि script उसे दिखा सके, छिपा सके या बदल सके।
Div और अर्थ
क्योंकि div का कोई अर्थ नहीं है, इसलिए उसे तभी इस्तेमाल करें जब कोई बेहतर tag न हो। पेज का header <header> होना चाहिए, navigation menu <nav>, मुख्य content <main>, और article <article>। ये semantic tags (आप उन्हें Semantics वाले पाठ में सीखेंगे) search engines और screen readers को आपका पेज समझने में मदद करते हैं। Div उनके बीच की खाली जगह भरते हैं।
Div क्या है
<div> एक सामान्य box है। इसका खुद कोई अर्थ नहीं है — यह सिर्फ एक container है जिसे आप दूसरे elements को एक साथ group करने के लिए इस्तेमाल करते हैं ताकि उन्हें style कर सकें या एक unit के रूप में हिला सकें। पेज ज़्यादातर divs से बना होता है: header के लिए एक div, main content के लिए एक div, हर card के लिए एक div। Div खुद कुछ दिखाई नहीं देता; जो CSS आप उससे जोड़ते हैं, वही काम करता है।
याद रखने की तरकीब: div = खाली डिब्बा — इसका अपना कोई अर्थ नहीं, यह सिर्फ चीज़ों को एक साथ रखता है।
सिंटैक्स
<div class="card"> <h2>HTML Course</h2> <p>Learn HTML from scratch.</p> <a href="course.html">Start learning</a> </div>
यहाँ div heading, paragraph और link को एक card में group करता है। .card के लिए एक CSS rule से आप तीनों को एक साथ border, padding और background दे सकते हैं।
<header>, <nav>, <footer>। Divs को उन groups के लिए बचाकर रखें जिनका कोई बेहतर नाम नहीं है।class="course-card" या class="sidebar"। box1 नाम का class अगले व्यक्ति को (या तीन महीने बाद आपको) कुछ नहीं बताता।आम गलतियाँ
- हर चीज़ के लिए div इस्तेमाल करना — header, nav और footer के अपने tags हैं, इसलिए उनका इस्तेमाल करें।
- div बंद करना भूल जाना — एक
</div>छूटने से बाकी पूरा पेज हिल सकता है। - Divs को दस levels तक nest करना — अगर आप अपनी nesting को खुद नहीं समझ पा रहे, तो structure को सीधा करें।
- हर जगह
<div style="...">से style करना, बजाय div को एक बार class देने के।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Div</title>
<style>
.card { border: 1px solid #ccc; padding: 16px; border-radius: 8px; }
</style>
</head>
<body>
<div class="card">
<h2>HTML Course</h2>
<p>Learn HTML from scratch, free.</p>
<button>Start Learning</button>
</div>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. div क्या होता है?
यह एक सामान्य ब्लॉक कंटेनर है जिसका अपना कोई अर्थ नहीं होता; यह एलिमेंट को एक साथ समूहबद्ध करता है ताकि उन्हें एक इकाई की तरह स्टाइल या हिलाया जा सके।
2. div का इस्तेमाल कब नहीं करना चाहिए?
जब कोई बेहतर टैग मौजूद हो, जैसे हेडर के लिए header, नेविगेशन के लिए nav, मुख्य कंटेंट के लिए main या फ़ुटर के लिए footer।
3. div soup किसे कहते हैं?
सिर्फ़ div से बनी पेज को; यह चल तो जाती है, पर पढ़ना मुश्किल होता है और SEO के लिए खराब होती है।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
