HTML <div> element एक generic container होता है जिसका उपयोग content को group करने और layout बनाने के लिए किया जाता है।
यह अपने आप में कोई meaning नहीं रखता, लेकिन CSS और JavaScript के साथ मिलकर बहुत powerful बन जाता है।
Div Element क्या होता है
<div> का मतलब है division।
यह block-level element होता है और पूरी width ले लेता है।
Div का मुख्य काम:
Content को group करना
Layout structure बनाना
CSS styling apply करना
JavaScript से manipulation
Basic Div Syntax
<div>
Content here
</div>
Div हमेशा नई line से start होता है।
Simple Div Example
<div>
<h2>Welcome</h2>
<p>This is a paragraph inside div.</p>
</div>
यह heading और paragraph को एक single block में group करता है।
Div के साथ CSS Styling
Div का सबसे common use styling के लिए होता है।
<style>
.box {
background-color: lightblue;
padding: 15px;
}
</style>
<div class="box">
This is a styled div.
</div>
Class और ID के साथ div को easily style किया जा सकता है।
Div as Layout Container
Modern layouts divs से बनाए जाते हैं।
<div class="header">Header</div>
<div class="content">Main Content</div>
<div class="footer">Footer</div>
यह page structure define करता है।
Div और Width Control
<style>
.container {
width: 50%;
}
</style>
<div class="container">
Half width div
</div>
Div width को percentage या pixels में control किया जा सकता है।
Div को Center में लाना
<style>
.center {
width: 300px;
margin: auto;
}
</style>
<div class="center">
Centered div
</div>
यह layout designing में बहुत common है।
Nested Divs
Div के अंदर div रखे जा सकते हैं।
<div class="parent">
<div class="child">Child Div</div>
</div>
Complex layouts के लिए nested divs जरूरी होती हैं।
Div और Flexbox
Flexbox layouts में div का बहुत use होता है।
<style>
.flex {
display: flex;
}
</style>
<div class="flex">
<div>Item 1</div>
<div>Item 2</div>
</div>
Responsive layouts के लिए यह best approach है।
Div और Grid Layout
<style>
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>
<div class="grid">
<div>Left</div>
<div>Right</div>
</div>
Modern CSS Grid भी div-based होता है।
Div vs Semantic Elements
Div generic होता है जबकि semantic elements meaningful होते हैं।
Examples:<header><nav><section><article>
जहाँ possible हो semantic tags prefer करें।
Div के साथ JavaScript
Div को JavaScript से target करके content change किया जा सकता है।
<div id="demo">Hello</div>
<script>
document.getElementById("demo").innerHTML = "Welcome";
</script>
Common Mistakes
हर जगह unnecessary div use करना
Semantic tags ignore करना
Deep nesting करना
CSS classes के बिना div use करना
Best Practices
Div को container की तरह use करें
Layout के लिए meaningful class names रखें
जहाँ possible हो semantic elements use करें
Clean और readable structure रखें
Summary
HTML <div> element content grouping और layout का base है।
यह block-level container है जो CSS और JavaScript के साथ powerful बनता है।
Proper use से clean, flexible और responsive layouts बनाए जा सकते हैं।