HTML Div

HTML में <div> tag सबसे ज्यादा इस्तेमाल किया जाने वाला element है। चाहे आप कोई webpage design कर रहे हों या web app layout बना रहे हों — div के बिना HTML अधूरा है। इस लेसन में हम step by step सीखेंगे कि div क्या है, क्यों जरूरी है, और इसे कैसे CSS के साथ layout design में use किया जाता है।

<div> क्या होता है?

<div> का मतलब है — Division (या Section). यह एक container tag है जो webpage के अलग-अलग हिस्सों (parts) को group करने के लिए use किया जाता है।

Simple words में:

<div> का काम है — elements को एक साथ “wrap” करना ताकि हम उन पर CSS या JavaScript apply कर सकें।

Example 1: Basic Div Example

<div>
  <h2>Welcome to My Website</h2>
  <p>This is a simple paragraph inside a div.</p>
</div>

यहाँ <div> एक container की तरह काम कर रहा है जिसमें heading और paragraph दोनों शामिल हैं।

Div एक Block-Level Element है

मतलब <div> अपने आप एक नई लाइन से शुरू होता है और पूरी width लेता है।

<div style="background: lightblue;">First Div</div>
<div style="background: lightgreen;">Second Div</div>

Output:

First Div

Second Div

दोनों अलग-अलग लाइन में दिखाई देंगे।

Div का Use क्यों किया जाता है?

उपयोग और विवरण
उपयोग	विवरण
Layout बनाना	Website के अलग-अलग हिस्सों को divide करने के लिए
Grouping Elements	एक जैसे content को एक साथ wrap करने के लिए
CSS Styling के लिए	किसी particular section पर background, padding, margin आदि लगाने के लिए
JavaScript Control	किसी section को dynamically hide/show करने के लिए

Example: Div से Layout बनाना

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Div Layout Example</title>
  <style>
    .header { background: #ffcc00; padding: 20px; text-align: center; }
    .menu { background: #333; color: white; padding: 10px; }
    .content { background: #f2f2f2; padding: 20px; }
    .footer { background: #222; color: white; text-align: center; padding: 15px; }
  </style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
</div>

<div class="menu">
  <a href="#" style="color:white; margin-right:15px;">Home</a>
  <a href="#" style="color:white; margin-right:15px;">About</a>
  <a href="#" style="color:white;">Contact</a>
</div>

<div class="content">
  <h2>Welcome!</h2>
  <p>This is the main content area.</p>
</div>

<div class="footer">
  <p>© 2025 MyWebsite | All Rights Reserved</p>
</div>

</body>
</html>

Output: आपको एक simple लेकिन सुंदर webpage layout दिखेगा — Header, Menu, Content और Footer section के साथ।

Div में Class और Id का इस्तेमाल

क्योंकि एक webpage में कई div होते हैं, इसलिए हमें उन्हें पहचानने के लिए class और id देना जरूरी होता है।

<div id="main-section">
  <div class="left-box">Left Box</div>
  <div class="right-box">Right Box</div>
</div>

CSS में इन्हें इस तरह target किया जा सकता है:

#main-section { background: lightgray; padding: 20px; }
.left-box { background: pink; width: 45%; float: left; }
.right-box { background: lightgreen; width: 45%; float: right; }

Output: दोनों box एक साथ side-by-side दिखाई देंगे।

Div को Styling देने के Common Properties

Property	काम (Function)
background	Div का background color या image सेट करता है।
padding	अंदर की spacing (तत्व के कंटेंट और बॉर्डर के बीच) सेट करता है।
margin	बाहर की spacing (तत्व के बॉर्डर और दूसरे तत्वों के बीच) सेट करता है।
border	बॉर्डर बनाता है।
width / height	Size (चौड़ाई / ऊंचाई) control करता है।
text-align	Text को center, left, right align करता है।
display	Inline, block या flex layout define करता है।

Modern Web Layout में Div + CSS का Magic

आज के समय में <div> को सबसे ज़्यादा Flexbox और Grid layout systems में use किया जाता है। Example: Flexbox Layout with Div

<style>
.container {
  display: flex;
  gap: 10px;
}
.box {
  background: tomato;
  color: white;
  padding: 20px;
  flex: 1;
  text-align: center;
}
</style>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

Output: तीनों box एक लाइन में बराबर space के साथ दिखाई देंगे।

Nested Divs (Div के अंदर Div)

कई बार हमें एक div के अंदर दूसरे div डालने पड़ते हैं — इससे nested structure बनता है।

<div style="background: lightgray; padding: 20px;">
  <div style="background: white; padding: 10px;">
    <h3>Inner Div</h3>
    <p>This div is inside another div.</p>
  </div>
</div>

Responsive Layout Example (Div + CSS)

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.box {
  background: skyblue;
  flex: 1 1 300px;
  padding: 20px;
  text-align: center;
}
</style>

<div class="container">
  <div class="box">Section 1</div>
  <div class="box">Section 2</div>
  <div class="box">Section 3</div>
</div>

Output: Desktop पर तीन box एक लाइन में और mobile पर vertically stack हो जाएंगे।

Div vs Span

Feature (विशेषता)	<div>	<span>
Type (प्रकार)	Block element (ब्लॉक तत्व)	Inline element (इनलाइन तत्व)
Use (उपयोग)	Layout या Section (खंड) बनाना	Text (पाठ) के छोटे हिस्से को style (शैली) देना
Line Break (लाइन ब्रेक)	हमेशा नई लाइन से शुरू होता है और अपनी पूरी चौड़ाई घेरता है।	उसी लाइन में रहता है और केवल ज़रूरी चौड़ाई घेरता है।
Example (उदाहरण)	`<div><p>Content</p></div>`	`<p>Hello<span>world</span></p>`

Summary (सारांश)

<div> का मतलब है division — यानी किसी webpage के section को अलग करना।
यह एक block-level container है।
Layout design में इसका उपयोग बहुत जरूरी है।
CSS के साथ <div> का जादू दिखता है — padding, margin, background, flexbox, grid आदि से।
हर modern website में सैकड़ों <div> tag होते हैं।

Practice Task:

एक webpage बनाइए जिसमें 4 sections हों:

Header
Navigation
Main Content
Footer

हर section को अलग color दीजिए और उसमें एक-एक heading डालिए। इससे आपको div structure और CSS का perfect feel मिलेगा।

Property	काम (Function)
background	Div का background color या image सेट करता है।
padding	अंदर की spacing (तत्व के कंटेंट और बॉर्डर के बीच) सेट करता है।
margin	बाहर की spacing (तत्व के बॉर्डर और दूसरे तत्वों के बीच) सेट करता है।
border	बॉर्डर बनाता है।
width / height	Size (चौड़ाई / ऊंचाई) control करता है।
text-align	Text को center, left, right align करता है।
display	Inline, block या flex layout define करता है।