Theory
Portfolio Layout की आपदा
कल्पना कीजिए आप अपने college portfolio के 'About Me' page को code कर रहे हैं। आप अपना नाम लिखते हैं, फिर एक छोटी bio, और फिर आप एक profile photo insert करना चाहते हैं। पर जब आप browser में देखते हैं, सब कुछ एक अकेली अस्त-व्यस्त line में पिस गया है! आपका नाम, आपकी bio, और आपकी photo Mumbai की भीड़ भरी bus की तरह एक-दूसरे से टकरा रहे हैं। HTML आपके साफ़ paragraphs और line breaks को क्यों नज़रअंदाज़ करता है, और आप इसे कैसे ठीक करते हैं?
Theory
Bricks बनाम Stickers
HTML elements को दो तरह की चीज़ों की तरह सोचिए: bricks और stickers। कुछ elements भारी concrete bricks की तरह काम करते हैं। जब आप एक brick रखते हैं, यह wall की पूरी width घेरता है, बाक़ी सब कुछ को इसके ऊपर या नीचे बैठने पर मजबूर करते हुए। दूसरे elements छोटे stickers की तरह काम करते हैं। आप कई stickers एक ही line पर अगल-बगल चिपका सकते हैं जब तक कोई जगह न बचे। कौन सा tag brick है और कौन sticker यह जानना आपकी layout structure को पूरी तरह नियंत्रित करता है।
Theory
Block बनाम Inline और Container बनाम Non-Container
web architecture में, tags display behavior और structural role के आधार पर वर्गीकृत होते हैं:
- Block-level elements एक नई line पर शुरू होते हैं और पूरी उपलब्ध width घेरते हैं। उदाहरणों में
<div>(generic division) और<p>(paragraph) शामिल हैं।
- Inline elements एक नई line पर शुरू नहीं होते और केवल उतनी ही width घेरते हैं जितनी ज़रूरी है। एक उदाहरण
<span>है।
- Non-container tags (empty या self-closing tags भी कहलाते हैं) content को लपेटते नहीं और उनका कोई closing tag नहीं होता। उदाहरणों में
<br>(line break),<hr>(horizontal rule), और<img>(image) शामिल हैं।
At a glance
मुख्य HTML layout और structural elements की तुलना।
| Tag Type | Tags | नई Line शुरू करता है? | बंद होता है? |
|---|---|---|---|
| Block Container | div, p | हाँ | हाँ, closing tag के साथ |
| Inline Container | span | नहीं | हाँ, closing tag के साथ |
| Non-Container (Empty) | br, hr | br: force break, hr: full width line | नहीं, self-closing |
| Non-Container (Asset) | img | नहीं (Inline flow) | नहीं, src attribute चाहिए |
Practical
सही Portfolio Structure
<div>
<h2>My Portfolio</h2>
<hr>
<p>
Hello! I am a <span>BCA student</span> specializing in web development.
<br>
Check out my profile below:
</p>
<img src="profile.jpg" alt="My Photo">
</div>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
Layout का विश्लेषण
आइए तोड़ें कि browser इस example को कैसे render करता है:
<div>एक बड़ा block container बनाता है जो पूरे section को साथ रखता है।
<hr>heading के नीचे एक full-width line खींचता है, एक block-जैसे structural break के रूप में काम करते हुए।
<p>block text को समूहित करता है और अपने-आप text को एक ताज़ा line पर नीचे धकेलता है।
<span>'BCA student' शब्दों पर custom grouping लागू करता है बिना line तोड़े।
<br>उसी paragraph के भीतर 'Check out my profile' को एक नई line पर मजबूर करता है।
<img>text के ठीक बाद inline image insert करता है।
Quiz
एक exam question आपसे दो portfolio sections के बीच एक horizontal line divider insert करने को कहता है। कौन सा code fragment structurally valid और सटीक है?
- Section 1 <hr></hr> Section 2
- <hr>Section 2, writing the next section as the hr tag's content
- Section 1 <div></div> Section 2
- Section 1 <hr> Section 2
Show the answer
Section 1 <hr> Section 2
<hr> एक non-container tag है: इसका कोई closing tag नहीं है और यह text नहीं रख सकता। </hr> लिखना university exams में एक गंभीर syntax error है। इसे content रखता एक open tag मानना भी बराबर ग़लत है, और एक ख़ाली div एक generic container है, एक horizontal line divider नहीं। sections के बीच रखा नंगा <hr> ही एकमात्र structurally valid रूप है।
Think first
Inline और Block Behavior का अनुमान
output मन में अनुमान कीजिए: अगर आप लगातार दो <div> blocks लिखते हैं, और फिर लगातार दो <span> blocks, screen पर कितनी lines बनेंगी? tap करने से पहले सोचिए।
Show the answer
तीन lines बनेंगी। पहला <div> line 1 लेता है। दूसरा <div> एक block element है, इसलिए यह ख़ुद को line 2 पर मजबूर करता है। पहला <span> line 3 पर बैठता है। क्योंकि <span> एक inline element है, दूसरा <span> इसके ठीक बगल में line 3 पर भी बैठता है। कुल: 3 lines।
Watch out
Paragraph और Break के दुरुपयोग का जाल
university students में एक बहुत आम ग़लती vertical spacing बनाने के लिए <br><br><br> tags की एक विशाल chain इस्तेमाल करना, या एक <p> tag के अंदर एक <div> nest करना है। HTML5 नियमों में, एक paragraph <p> केवल phrasing content (inline elements) रख सकता है। एक <p> के अंदर <div> जैसा एक block element nest करना browser को अपने-आप आपका paragraph जल्दी बंद करने का कारण बनाता है, टूटे layouts और invalid HTML पैदा करते हुए। spacing के लिए, बाद में CSS margins पर निर्भर कीजिए, <br> text hacks पर नहीं!
Formula
Exam Answer Recipe: Block बनाम Inline को अलग करना
जब अपनी semester exam में Block और Inline tags के बीच अंतर करने को कहा जाए, अधिकतम marks के लिए ये 3 points लिखिए:
- 1. Line behavior: Block elements हमेशा एक नई line पर शुरू होते हैं: Inline elements मौजूदा flow के भीतर रहते हैं।
- 2. Dimensions: Block elements अपने container की 100% width तक फैलते हैं: Inline elements content के इर्द-गिर्द कसकर लपेटते हैं।
- 3. Content limits: Block elements अन्य block या inline elements रख सकते हैं: Inline elements केवल अन्य inline elements या text रख सकते हैं।
Summary
Key takeaways
- div और p जैसे Block elements हमेशा एक ताज़ा line पर शुरू होते हैं और पूरी उपलब्ध width भर फैलते हैं।
- span जैसे Inline elements मौजूदा lines के अंदर रहते हैं और अपने text content की बिल्कुल width घेरते हैं।
- br और hr जैसे Non-container tags में कोई closing tags नहीं हैं और वे children या लपेटता text नहीं रख सकते।
- img tag एक अनोखा non-container tag है जो external visual assets को एक inline flow में load करता है।
- एक p paragraph tag के अंदर कभी div जैसा एक block-level tag nest मत कीजिए क्योंकि यह HTML validation नियम तोड़ता है।
- Block tags को layout bricks और inline tags को text stickers की तरह सोचिए।