📘 Lesson · Lesson 13

div vs span – Block vs Inline

Two Invisible Containers

<div>I am a div — I take the WHOLE line.</div>
<div>Next div — I start on a NEW line.</div>

<p>Marks: <span style="color:red">92</span> out of 100.</p>

I am a div — I take the WHOLE line. Next div — I start on a NEW line. Marks: 92 out of 100. ← only "92" turned red; sentence unbroken

div is a cardboard BOX — you group whole things in it (a card, a header, a section), and each box sits on its own shelf line. span is a highlighter stroke — you mark a few words INSIDE a line without disturbing the line. Both are invisible by themselves and carry no meaning; they exist purely as handles for CSS and JavaScript to grab.

Block vs Inline — the actual concept underneath

Behaviour	Block elements (div family)	Inline elements (span family)
Starts on new line	✅ Always	❌ Flows within the line
Width	Full available width	Only as wide as its content
width/height via CSS	✅ Respected	❌ Ignored (until display changes)
Can contain	Blocks AND inlines	Only inlines/text

<span><div>WRONG</div></span>     ❌ block inside inline - invalid
<div><span>Right</span></div>     ✅ inline inside block - normal
<p><div>Also wrong!</div></p>     ❌ p can hold only inline content -
                                      browser force-closes the p, layout breaks mysteriously

That last one is a real debugging classic: a div inside a p makes the browser silently split your paragraph, and CSS applied to the p stops "working". If styles behave weirdly, check for a block element trapped inside a p.

Which Elements are Which — the reference lists

BLOCK (own line, full width)	INLINE (flows in text)
div, p, h1–h6, ul, ol, li, table, form, section, article, header, footer, nav	span, a, b, strong, i, em, img, code, sub, sup, label, input

*img and input are technically "inline-block": they flow in the line like inline elements BUT accept width/height like blocks — the best of both, which is why an image sits inside a sentence yet can be resized.

When to Use What — the honest rules

Grouping a whole area (a student card, a pricing box) → div.
Styling words inside a sentence (price in red, one term highlighted) → span.
BUT: if a semantic tag fits — header, nav, footer, section, article — use IT instead of div. Divs are the fallback, not the first choice. (Full semantic chapter in the HTML5 level.)
"Divitis" — wrapping everything in five layers of divs — is the classic beginner smell. Ask: does this div DO anything (style/script hook)? If not, delete it.

Exam Corner

Q: Difference between div and span? div is block-level (new line, full width, groups sections); span is inline (flows inside a line, styles words). Both are non-semantic containers.

Q: Name 5 block and 5 inline elements. Block: div, p, h1, ul, table. Inline: span, a, b, img, code.

Q: Can a div go inside a p? No — p accepts only inline content; the browser force-closes the p.

Q: Why are img and input special? They are inline-block: flow inline but accept width/height.

दो अदृश्य Containers

<div>Main div hoon — POORI line leta hoon.</div>
<div>Agla div — NAYI line se shuru.</div>

<p>Marks: <span style="color:red">92</span> out of 100.</p>

Main div hoon — POORI line leta hoon. Agla div — NAYI line se shuru. Marks: 92 out of 100. ← sirf "92" laal hua; line nahi tooti

div गत्ते का डिब्बा है — पूरी चीज़ें उसमें group करते हैं (एक card, एक header, एक section), और हर डिब्बा shelf की अपनी line पर बैठता है. span highlighter की लकीर है — line के ANDAR कुछ शब्द mark करते हैं, line तोड़े बिना. दोनों खुद अदृश्य हैं और कोई meaning नहीं रखते; ये सिर्फ CSS और JavaScript के पकड़ने के handles हैं.

Block vs Inline — नीचे छुपा असली concept

Behaviour	Block elements (div परिवार)	Inline elements (span परिवार)
नई line से शुरू	✅ हमेशा	❌ Line के अंदर बहता है
चौड़ाई	पूरी available width	बस जितना content
CSS से width/height	✅ मानता है	❌ Ignore (जब तक display न बदले)
अंदर रख सकता है	Blocks AUR inlines	सिर्फ inlines/text

<span><div>GALAT</div></span>     ❌ inline के अंदर block - invalid
<div><span>Sahi</span></div>      ✅ block के अंदर inline - normal
<p><div>Yeh bhi galat!</div></p>  ❌ p sirf inline content rakh sakta hai -
                                      browser p ko zabardasti band kar deta hai, layout rahasyamayi tarike se tootta hai

आखिरी वाला असली debugging classic है: p के अंदर div डालने पर browser चुपचाप आपका paragraph चीर देता है, और p पर लगी CSS "काम करना बंद" कर देती है. Styles अजीब behave करें तो p के अंदर फंसा block element ढूंढिए.

कौन-सा Element कैसा है — reference lists

BLOCK (अपनी line, पूरी width)	INLINE (text में बहता)
div, p, h1–h6, ul, ol, li, table, form, section, article, header, footer, nav	span, a, b, strong, i, em, img, code, sub, sup, label, input

*img और input technically "inline-block" हैं: line में inline की तरह बहते हैं PAR blocks की तरह width/height मानते हैं — दोनों का best, इसीलिए image वाक्य के अंदर बैठकर भी resize हो जाती है.

कब क्या Use करें — ईमानदार rules

पूरा area group करना (student card, pricing box) → div.
वाक्य के अंदर शब्द style करने (लाल price, एक highlighted term) → span.
PAR: कोई semantic tag fit हो — header, nav, footer, section, article — तो div की जगह WAHI लगाइए. Div fallback है, पहली पसंद नहीं. (HTML5 level में पूरा semantic chapter.)
"Divitis" — हर चीज़ को divs की पांच परतों में लपेटना — classic beginner निशानी. पूछिए: यह div कुछ KARTA है (style/script hook)? नहीं तो delete.

Exam Corner

Q: div और span में अंतर? div block-level है (नई line, पूरी width, sections group करता है); span inline है (line के अंदर बहता है, शब्द style करता है). दोनों non-semantic containers.

Q: 5 block और 5 inline elements बताइए. Block: div, p, h1, ul, table. Inline: span, a, b, img, code.

Q: क्या p के अंदर div जा सकता है? नहीं — p सिर्फ inline content लेता है; browser p को force-close कर देता है.

Q: img और input special क्यों? ये inline-block हैं: inline बहते हैं पर width/height मानते हैं.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.