HTML Block & Inline
जब हम HTML में कोई भी content बनाते हैं — जैसे heading, paragraph, image, link, table आदि — तो हर element का एक “display behavior” होता है। यह तय करता है कि वह element पेज पर कैसे दिखाई देगा और कितना space लेगा। यही behavior हमें दो मुख्य categories में बांटता है
- Block-level Elements
- Inline Elements
आइए इन दोनों को step by step गहराई से समझते हैं।
Block-level Elements क्या होते हैं?
Block elements वो HTML elements होते हैं जो:
- पूरी लाइन को occupy (भर) लेते हैं।
- अपने बाद आने वाले element को नई लाइन (new line) से शुरू करते हैं।
- एक तरह से “ब्लॉक” की तरह behave करते हैं।
इनका काम है content को एक अलग section की तरह दिखाना।
Examples of Block Elements
<h1>Heading Tag</h1>
<p>This is a paragraph.</p>
<div>This is a div section.</div>
<section>This is a section.</section>
<article>This is an article.</article>
<header>This is header area.</header>
<footer>This is footer area.</footer>
<nav>This is navigation area.</nav>
<main>This is main content area.</main>इनमें से हर element अपने ऊपर और नीचे space बनाता है और पूरी width (by default) लेता है।
Visual Example:
<div style="background: lightblue;">Block Element 1</div>
<div style="background: lightgreen;">Block Element 2</div>Output:
दोनों elements अलग-अलग lines में दिखाई देंगे क्योंकि ये block elements हैं।
Inline Elements क्या होते हैं?
Inline elements वो होते हैं जो: सिर्फ उतनी ही चौड़ाई (width) लेते हैं जितना content जरूरी है। नई लाइन शुरू नहीं करते। एक ही लाइन में कई inline elements रह सकते हैं।
Examples of Inline Elements
<span>This is a span text.</span>
<a href="#">This is a link</a>
<strong>Strong text</strong>
<em>Italic text</em>
<b>Bold text</b>
<i>Italic</i>
<img src="image.jpg" alt="image">
<small>Small text</small>
<sub>Subscript</sub>
<sup>Superscript</sup>Visual Example:
<p>This is <b>bold</b> and <i>italic</i> and <a href="#">a link</a>.</p>This is bold and italic and a link.
सब एक ही लाइन में हैं, क्योंकि ये inline elements हैं।
Block vs Inline Elements (Comparison Table)
| Feature (विशेषता) | Block Element (ब्लॉक एलिमेंट) | Inline Element (इनलाइन एलिमेंट) |
|---|---|---|
| Occupies (जगह घेरना) | Full width (**पूरी लाइन**) | केवल content जितनी जगह |
| Starts on new line (नई लाइन से शुरू) | ✅ **हां** | ❌ **नहीं** |
| Height & Width set कर सकते हैं? (ऊंचाई और चौड़ाई) | ✅ **हां** | ⚠️ **नहीं** (limit तक / CSS की मदद से सीमित) |
| Common examples (सामान्य उदाहरण) | <div>,<p>,<h1> |
<span>,<a>,<b> |
| Use case (उपयोग का मामला) | Structure बनाना (वेबपेज की संरचना) | Text formatting (टेक्स्ट को फॉर्मेट करना) |
Inline Elements को Block में बदलना (CSS के ज़रिए)
Example:
अब दोनों links एक-एक नई लाइन में आएंगे।
Block Elements को Inline में बदलना
अगर आप चाहते हैं कि block element एक ही लाइन में दिखे, तो:
<div style="display: inline; background: lightcoral;">Div 1</div>
<div style="display: inline; background: lightblue;">Div 2</div>Display: Inline-block (Hybrid Behaviour)
inline-block एक hybrid mode है जो दोनों का best combination देता है।
- यह एक ही लाइन में रहता है (inline behavior)
- लेकिन आप इसकी width और height set कर सकते हैं (block behavior)
<div style="display: inline-block; width: 120px; height: 60px; background: orange; margin: 5px;">
Box 1
</div>
<div style="display: inline-block; width: 120px; height: 60px; background: green; margin: 5px;">
Box 2
</div>Output: दोनों box एक ही लाइन में दिखेंगे और उनके height-width पर control रहेगा।
Commonly Used Elements
| Element (तत्व) | Type (प्रकार) | Description (विवरण) |
|---|---|---|
| <div> | Block | Layout/Container (लेआउट/कंटेनर) |
| <p> | Block | Paragraph text (पैराग्राफ पाठ) |
| <span> | Inline | Short text styling (छोटा पाठ स्टाइलिंग) |
| <a> | Inline | Link (लिंक) |
| <img> | Inline | Image (छवि) |
| <ul> | Block | Unordered List (अनऑर्डर्ड सूची) |
| <li> | Block | List item (सूची वस्तु) |
| <form> | Block | Form container (फॉर्म कंटेनर) |
Practice Exercise
Try this small HTML code:
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<title>Block vs Inline Example</title>
</head>
<body>
<h2>Block Elements</h2>
<div style="background: lightblue;">This is a block div</div>
<p>This is a paragraph block.</p>
<h2>Inline Elements</h2>
<span style="background: yellow;">This is inline span</span>
<a href="#">Inline link</a>
<b>Bold text</b>
<h2>Inline-Block Elements</h2>
<div style="display: inline-block; width: 100px; background: pink;">Box 1</div>
<div style="display: inline-block; width: 100px; background: orange;">Box 2</div>
</body>
</html>- Block elements पेज का structure बनाते हैं।
- Inline elements text या content को format करते हैं।
- CSS के ज़रिए आप किसी भी element का display type बदल सकते हैं
- ।inline-block दोनों का best mix है।