CodeX Cider Logo
CodeX Cider
HTML टॉपिक्स
HTML मॉड्यूल📖पाठ 6 / 18

ब्लॉक, इनलाइन, Div व Span

आज हम block और inline layout देखते हैं, और div व span — सादे बॉक्स जो ग्रुप या wrap के लिए हैं, बिना extra मतलब जोड़े।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

इस पाठ में आप क्या सीखेंगे

  1. 1Block elements नई लाइन से शुरू होते हैं
  2. 2Inline elements टेक्स्ट की लाइन में बैठते हैं
  3. 3div एक सादा block बॉक्स है
  4. 4span एक सादा inline wrap है
  5. 5मतलब पता हो तो semantic tags बेहतर हैं
  1. 1

    Block बनाम Inline डिस्प्ले के नियम

    HTML में स्क्रीन पर एलिमेंट्स दो बुनियादी तरीकों से दिखते हैं: कुछ tags हमेशा नई लाइन से शुरू होते हैं और अपने parent की पूरी 100% चौड़ाई घेर लेते हैं। इन्हें block elements कहते हैं। वहीं कुछ tags चालू लाइन के अंदर ही बैठते हैं और सिर्फ उतनी जगह लेते हैं जितने उनके शब्द होते हैं। इन्हें inline elements कहते हैं।

    आज इस बुनियादी फ़र्क को गहराई से समझेंगे और दो सबसे काम के जेनेरिक कंटेनर सीखेंगे: <div> (block बॉक्स) और <span> (inline रैपर)।

  2. 2

    समस्या: पूरे लेआउट का डब्बा बनाम लाइन के अंदर के शब्द

    कभी-कभी हमें 3-4 चीज़ों के चारों तरफ एक डिब्बा बनाना होता है ताकि उन सबको एक साथ बैकग्राउंड कलर या बॉर्डर दिया जा सके, लेकिन बिना यह कहे कि “यह हेडर है” या “यह आर्टिकल है।” इसके लिए एक सादा ग्रुपिंग कंटेनर चाहिए।

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

  3. 3

    Browser इन्हें स्क्रीन पर कैसे ड्रा करता है

    Block element स्क्रीन पर एक दीवार की तरह नई लाइन से शुरू होता है और बाईं से दाईं तरफ पूरी चौड़ाई घेर लेता है। Headings (<h1> से <h6>), <p>, और <div> इसी नियम पर चलते हैं।

    Inline element लाइन के बहाव में ही बैठा रहता है। <strong>, <em>, <a>, और <span> नई लाइन नहीं तोड़ते।

    नीचे दिए उदाहरण में <div> हेडिंग और पैराग्राफ को एक कार्ड में बांधता है। <span> सिर्फ “ID card” शब्दों को पैराग्राफ के अंदर रखता है, इसलिए वे उसी लाइन में रहते हैं।

  4. 4

    आज की प्रैक्टिस: Div बॉक्स और Inline Span का नोटिस कार्ड

    नीचे नोटिस का कोड पढ़ो और लाइव एडिटर में देखो। ध्यान दो कि बाहरी div ने कैसे हेडिंग और पैराग्राफ को एक के ऊपर एक रखा, जबकि span लाइन के अंदर ही बैठा रहा।

  5. 5

    सादा बॉक्स बनाम सेमेंटिक अर्थ (Meaning)

    <div> और <span> का खुद का कोई अर्थ नहीं होता। जब आपको पता हो कि यह क्या है, तो सेमेंटिक टैग चुनें (जैसे <article>, <header> या <nav>)। div और span तभी इस्तेमाल करें जब सिर्फ स्टाइलिंग या स्क्रिप्टिंग के लिए खाली कंटेनर चाहिए।

<div> Block Element100% चौड़ाई

हमेशा नई लाइन से शुरू होता है और पूरे कंटेनर में फैल जाता है। मुख्य टैग्स: div, p, h1-h6, section, ul।

<span> Inline ElementAuto चौड़ाई

टेक्स्ट की उसी लाइन के अंदर बैठता है और सिर्फ अपने शब्दों जितनी जगह लेता है। मुख्य टैग्स: span, a, strong, em।

Interactive Live Editor
notice.html
Click & type to editHTML5
Browser

लाइन-बाय-लाइन

  1. <div>

    सादा block container। यह heading और paragraph को ग्रुप करता है। नई लाइन से शुरू होता है और parent की चौड़ाई लेता है। खुद कोई मतलब नहीं जोड़ता।

  2. <h2>Office Notice</h2>

    Div के अंदर एक block heading। बॉक्स की शुरुआत के नीचे अपनी लाइन पर बैठता है।

  3. <p> ... </p>

    Block paragraph। Div के अंदर heading के नीचे नई लाइन से शुरू होता है।

  4. <span>ID card</span>

    कुछ शब्दों के चारों ओर सादा inline wrap। उसी वाक्य में रहता है और उतनी ही चौड़ाई लेता है जितनी उन शब्दों को चाहिए।

खुद ट्राई करो

एक छोटा कार्ड बनाओ जिसमें <div> के अंदर <h2> और <p> हो। Paragraph के अंदर अपना नाम <span> में wrap करो।

हिंट: Span paragraph के अंदर जाता है, heading के चारों ओर नहीं।

💡 समाधान देखें (यदि अटक गए हों)
<div>
  <h2>मेरी प्रोफाइल</h2>
  <p>नमस्ते, मेरा नाम <span style="color: blue; font-weight: bold;">अमित</span> है!</p>
</div>
त्वरित ज्ञान जाँच

अगर आप <span> के अंदर एक <div> टैग डाल दें, तो क्या यह मान्य (valid) HTML है?

गलती कहाँ होती है

  • 1.पेज के हर हिस्से के लिए <div> लगाना। मतलब पता हो तो labelled tags बेहतर हैं।
  • 2.<span> के अंदर <p> या <h2> जैसा block डालना। Span लाइन के शब्दों के लिए है, पूरे ब्लॉकों के लिए नहीं।

इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)

Q: Block और inline में क्या फ़र्क है?▼

Block element नई लाइन से शुरू होता है और parent की पूरी चौड़ाई लेता है। Inline element लाइन के अंदर ही बैठता है और उतनी ही जगह लेता है जितनी शब्दों को चाहिए।

Q: div और span में क्या फ़र्क है?▼

दोनों बिना मतलब के generic containers हैं। <div> block-level होता है और पूरे सेक्शन को घेरता है, जबकि <span> inline होता है और वाक्य के बीच शब्दों को घेरता है।

Q: क्या span के अंदर div डाल सकते हैं?▼

बिल्कुल नहीं! Inline element के अंदर Block element डालना अमान्य (invalid) HTML माना जाता है और ब्राउज़र का लेआउट बिगड़ सकता है।

पिछला लेसनटेक्स्ट फॉर्मेटिंगअगला लेसनलिंक्स और हाइपरलिंक्स