span और div एलिमेंट
स्टाइलिंग हुक के लिए सामान्य इनलाइन और ब्लॉक कंटेनर का उपयोग करें।
span और div एलिमेंट, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
सामान्य कंटेनर
HTML में दो सामान्य, अर्थ की दृष्टि से तटस्थ कंटेनर तत्व होते हैं:
<div>— ब्लॉक-स्तरीय कंटेनर<span>— इनलाइन कंटेनर
इनका अपना कोई अर्थ नहीं होता — ये केवल शैली और स्क्रिप्टिंग के लिए हुक के रूप में मौजूद होते हैं।
div तत्व
<div> एक ब्लॉक-स्तरीय कंटेनर है — यह अपने पहले और बाद में नई पंक्ति बनाता है:
<div class="card">
<h2>Card Title</h2>
<p>Card content here.</p>
</div>
<div class="sidebar">
<p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->span तत्व
<span> एक इनलाइन कंटेनर है — यह पाठ के भीतर प्रवाहित होता है:
<p>The price is <span class="price">$29.99</span> per month.</p>
<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>
<!-- span targets a part of text for styling or scripting
without adding block-level line breaks -->div बनाम अर्थपूर्ण तत्वों का उपयोग कब करें
<div> का उपयोग करने से पहले जाँच लें कि कोई अर्थपूर्ण तत्व उपयुक्त है या नहीं:
- पृष्ठ का शीर्ष भाग →
<header> - नेविगेशन →
<nav> - मुख्य सामग्री →
<main> - ब्लॉग पोस्ट →
<article> - साइडबार →
<aside> - पृष्ठ का निचला भाग →
<footer>
<div> का उपयोग तभी करें जब कोई अर्थपूर्ण तत्व लागू न हो।
Divitis
Divitis — हर चीज़ के लिए <div> का अत्यधिक उपयोग:
<!-- Divitis: meaningless nesting -->
<div class="header">
<div class="nav">
<div class="nav-item"><a href="/">Home</a></div>
</div>
</div>
<!-- Better: semantic HTML -->
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>class और id के साथ CSS हुक
CSS के लिए लक्ष्य निर्धारित करने हेतु <div> और <span> दोनों का उपयोग class या id एट्रिब्यूट के साथ किया जाता है:
<div class="hero-section">
<h1>Welcome</h1>
<p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>
<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->JavaScript लक्ष्यीकरण
<div> और <span> JavaScript के लक्ष्य भी हो सकते हैं:
<span id="counter">0</span>
<script>
const counter = document.getElementById('counter');
let count = 0;
setInterval(() => {
count++;
counter.textContent = count;
}, 1000);
</script>नेस्टिंग के नियम
सामान्य कंटेनरों की नेस्टिंग के नियम:
<div>में<div>और<span>रखे जा सकते हैं<span>में केवल<span>और इनलाइन सामग्री रखी जा सकती है<span>के अंदर<div>न रखें
<span>
Inline text
<span>Nested span OK</span>
<!-- <div> inside span: INVALID -->
</span>लेआउट के लिए div
div का उपयोग करने वाला सामान्य लेआउट पैटर्न:
<div class="layout">
<div class="sidebar"><!-- sidebar --></div>
<div class="content"><!-- main content --></div>
</div>
<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->इनलाइन शैली के लिए span
इनलाइन शैली बनाने के सामान्य पैटर्न:
<p>Status: <span class="badge badge-success">Active</span></p>
<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
<span style="color: green; font-weight: bold;">$30</span></p>div और span अदृश्य होते हैं
डिफ़ॉल्ट रूप से <div> और <span> अदृश्य आवरण होते हैं:
<div>ब्लॉक प्रदर्शन के अलावा कोई दृश्य शैली नहीं जोड़ता<span>कोई भी शैली नहीं जोड़ता- सारा रूप-रंग आपके द्वारा लागू किए गए CSS से आता है
- इसी कारण ये तटस्थ कंटेनर के लिए बिल्कुल उपयुक्त हैं
त्वरित जाँच
पैराग्राफ़ के भीतर किसी एक शब्द की शैली बदलने के लिए किस तत्व का उपयोग करना चाहिए?
पुनरावृत्ति: span और div
सामान्य कंटेनरों के आवश्यक बिंदु:
<div>— ब्लॉक-स्तरीय, लेआउट के लिए तत्वों को समूहित करता है<span>— इनलाइन, शैली बदलने के लिए पाठ के हिस्सों को लक्ष्य बनाता है- दोनों अर्थ की दृष्टि से तटस्थ हैं — ये कोई अर्थ नहीं जोड़ते
- जहाँ उपयुक्त हों, वहाँ अर्थपूर्ण HTML5 तत्वों को प्राथमिकता दें
- उन्हें CSS और JavaScript से जोड़ने के लिए
classऔरidका उपयोग करें
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “span और div एलिमेंट” पाठ निःशुल्क है?
हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “span और div एलिमेंट” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“span और div एलिमेंट” में मैं क्या सीखूँगा?
स्टाइलिंग हुक के लिए सामान्य इनलाइन और ब्लॉक कंटेनर का उपयोग करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“span और div एलिमेंट” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।