div/span vs Semantic Tags

Kab Kaunsa Use Karo

💡 <div>/<span> generic cardboard boxes hain — kisi bhi cheez ke liye use ho sakte hain, koi label nahi. Semantic tags labeled, purpose-built boxes hain. Dono ki apni jagah hai — sabhi boxes ko labeled banana zaroori nahi (kuch cheezein genuinely generic hoti hain), lekin jaha meaningful label available hai, use karna chahiye.

<div> ek block-level generic container hai. <span> ek inline generic container hai. Dono bilkul valid hain — jab koi semantic tag content ko accurately describe NAHI karta (jaise ek purely CSS-styling ke liye wrapper), div/span sahi choice hai.

Common mistake: HAR div ko semantic tag se replace karne ki koshish karna, chahe fit na ho. Dusra common mistake: HAR jagah div use karna, jabki header/nav/article clearly fit karte the.

<!-- Sahi use of div — purely styling wrapper, koi semantic meaning nahi: -->
<div class="card-container">
  <div class="card">
    <img src="pic.jpg" alt="Product">
    <p>Product Name</p>
  </div>
</div>

<!-- Sahi use of span — inline styling, jaise ek word highlight karna: -->
<p>Price: <span class="highlight-price">₹999</span></p>

<!-- Sahi semantic use — clear meaning available hai: -->
<article class="card">
  <header><h3>Product Name</h3></header>
  <img src="pic.jpg" alt="Product">
</article>

⚖️

<div>/<span> generic cardboard boxes hain — kisi bhi cheez ke liye use ho sakte hain, koi label nahi. Semantic tags labeled, purpose-built boxes hain. Dono ki apni jagah hai — sabhi boxes ko labeled banana zaroori nahi (kuch cheezein genuinely generic hoti hain), lekin jaha meaningful label available hai, use karna chahiye.

1 / 2

⚡ Quick Recap

div/span = generic containers, jab koi semantic tag fit na ho
"Divitis" = har jagah div use karna, semantic opportunities miss karna
Balance: meaningful content → semantic tags, pure styling → div/span

Is page mein (2 subtopics)

Purana code jo saara div se bana hai, use gradually semantic tags mein migrate karna common refactoring task hai — class names often hint dete hain kaunsa semantic tag fit karega.

<!-- Before (old, div-heavy): -->
<div class="header">...</div>
<div class="navigation">...</div>
<div class="main-content">...</div>
<div class="sidebar">...</div>
<div class="footer">...</div>

<!-- After (semantic): -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

💡Tip: Migration karte waqt, class names (jaise class="header") usually clear hints dete hain — lekin blindly rename mat karo, actual CONTENT check karo ki semantic meaning genuinely match karta hai ya nahi.

span ka sabse common use hai text ke ek chhote hisse ko style/target karna — jaise ek word ko highlight karna, ek icon insert karna, ya JavaScript se ek specific text-piece ko update karna.

<p>Status: <span class="badge badge-success">Active</span></p>
<p><span class="icon">⭐</span> Featured Product</p>
<p>Count: <span id="counter">0</span> items</p>

💡Tip: span ka use almost hamesha CSS class ya JavaScript targeting (id) ke saath hota hai — akela span (bina class/id ke) usually kisi purpose ko serve nahi karta, wahan plain text hi kaafi hota.

← Previous📰 article, section, aside, main Next →🖼️ Advanced Images

Code10x

div/span vs Semantic Tags

Migrating Old div-based Code to Semantic HTML

span for Inline Styling — Common Use Cases