HTML एलिमेंट्स
आज हम HTML elements देखते हैं — पेज के पूरे टुकड़े: opening tag, उसके अंदर का content, और closing tag, उसी क्रम में जैसे browser उन्हें पढ़ना चाहता है।
- 1
Tag और element में फ़र्क
पिछले लेसन में हमने कहा था कि HTML signs की एक भाषा है। वे signs tags हैं। आज हम अगला कदम उठाते हैं। Element पूरा टुकड़ा है, अकेला sign नहीं: opening tag, बीच का content, और closing tag।
<p>Hello</p>एक element है। अकेला<p>सिर्फ़ एक tag है।यह फ़र्क इसलिए ज़रूरी है क्योंकि browser अकेले tags से पेज नहीं खींचता। वह पूरे टुकड़े खींचता है, और वे टुकड़े एक-दूसरे के अंदर बैठ सकते हैं, जैसे डब्बे के अंदर डब्बे। जब पेज elements का समूह दिखने लगे, तब बाकी HTML पढ़ना बहुत आसान हो जाता है।
- 2
समस्या: टुकड़ों की सीमा तय करना और Nesting का नियम
जैसे ही तुम शब्दों के चारों ओर signs लगा सकते हो, एक नई समस्या आती है। असली पेज एक heading नहीं होता। उसमें एक टाइटल होता है, एक paragraph होता है, उसी paragraph के अंदर कुछ ज़रूरी शब्द होते हैं, और अक्सर यह सब एक पूरे article के अंदर होता है। अगर सब कुछ सिर्फ़ signs का ढेर हो, जिसका शुरू और अंत साफ़ न हो, तो browser नहीं बता सकता कि एक टुकड़ा कहाँ खत्म हुआ और अगला कहाँ शुरू हुआ।
इसलिए HTML ने तय किया कि पेज का हर साधारण हिस्सा एक element है, एक पूरी इकाई। उसे खोलो, उसके अंदर कुछ रखो, उसे बंद करो। छोटे element को बड़े के अंदर रख सकते हो, जिसे nesting कहते हैं। पहले अंदर वाला बंद होता है, फिर बाहर वाला, जैसे पहले अंदर की ढक्कन बंद करते हो, फिर बाहरी डिब्बा।
- 3
Browser ने Nested Tags और Void Tags को पढ़ना कैसे सीखा
Browser opening tag से पढ़ना शुरू करता है, matching closing tag तक जाता है, और बीच की हर चीज़ को उसी element का content मानता है। अगर किसी paragraph के अंदर
<strong>हो, तो भी browser एक ही paragraph देखता है, बस उसके अंदर का एक वाक्यांश महत्वपूर्ण चिह्नित हो जाता है।कुछ elements के अंदर कोई content नहीं होता, और closing tag भी नहीं होता। ये empty, या void, elements हैं। नीचे वाले उदाहरण में heading के नीचे की लाइन एक
<hr>है। वही एक tag पूरा टुकड़ा है।Browser मतलब भी देखता है।
<article>और<header>सिर्फ़ बॉक्स नहीं हैं। वे browser को बताते हैं कि पेज का वह हिस्सा किस काम का है।<div>बिना नाम का बॉक्स है।<header>नाम वाला बॉक्स है। - 4
आज की प्रैक्टिस: एक नेस्टेड नोटिस कार्ड
नीचे एक छोटा article है, nested elements से बना। कोड एक बार पढ़ो, फिर बगल वाला browser pane देखो। वही फ़ाइल है, बस अब वह पेज बन चुका है।
- 5
Element का सीधा ढांचा: पहले खुला, बाद में बंद
Opening tag, content, closing tag। लगभग हर HTML element यही shape रखता है। उदाहरण में
<article>बाहरी टुकड़ा है। उसके अंदर<header>heading पकड़े हुए है, और<p>वाक्य पकड़े हुए है। उस वाक्य के अंदर<strong>और<em>छोटे elements हैं, जो उसी लाइन में बैठे हैं।Closing tags का क्रम देखो। अंदर वाले पहले बंद होते हैं, बाहर वाले बाद में। अगर तुम
<p><strong>Hello</p></strong>लिखोगे, तो browser को अंदाज़ा लगाना पड़ेगा, और पेज अक्सर टूट जाता है। अगर<p><strong>Hello</strong></p>लिखोगे, तो ढांचा साफ़ है, और browser ठीक-ठीक जानता है कि क्या किसके अंदर है।
यह केवल एक opening या closing सिंबल है जो browser को बताता है कि टुकड़ा कहाँ शुरू या खत्म हुआ। इसमें अकेला कोई कंटेंट नहीं होता।
Opening tag + अंदर का टेक्स्ट/चाइल्ड कंटेंट + closing tag। Browser इस पूरे एलिमेंट को DOM ट्री का हिस्सा बनाता है।
आप क्या सीखेंगे
- 1Element क्या है, और tag से इसका फ़र्क क्या है
- 2पेज signs के ढेर से नहीं, nested टुकड़ों से क्यों बनता है
- 3Browser opening tag से closing tag तक कैसे पढ़ता है
- 4Block elements, inline elements, और empty tags
- 5Semantic tags जैसे article और header
लाइन-बाय-लाइन
<article>यह बाहरी element है, एक पूरा टुकड़ा जो अपने आप में खड़ा हो सकता है — एक notice, एक ब्लॉग पोस्ट, या एक कार्ड। Browser
</article>तक की हर चीज़ को इसी टुकड़े का हिस्सा मानता है।<header>यह article के अंदर ऊपर का नाम वाला हिस्सा है। अक्सर heading यहीं रहती है, और यह browser को बताता है कि आगे जो आएगा उसका परिचय यही है।
<h2>Office Notice</h2>यह एक heading element है: opening tag, बीच के शब्द, और closing tag। h1 पूरे पेज का मुख्य टाइटल है; h2 उसके अंदर सेक्शन का टाइटल है।
<hr>यह एक empty element है: एक horizontal rule। यह खुद ही पूरा टुकड़ा है, इसलिए इसका closing tag नहीं होता और अंदर कोई content भी नहीं होता।
<p> ... </p>यह एक paragraph element है। यह block है, इसलिए नई लाइन से शुरू होता है और अपने parent की चौड़ाई लेता है। उसके अंदर का वाक्य इसी element का content है।
<strong> और <em>ये inline elements हैं, जो paragraph के अंदर बैठे हैं।
<strong>ज़रूरी टेक्स्ट को चिह्नित करता है।<em>ज़ोर देता है। ये उसी वाक्य में रहते हैं और उतनी ही चौड़ाई लेते हैं जितनी शब्दों को चाहिए। यही फ़र्क तुम देख सकते हो: paragraph एक block है, और ये दोनों उसके अंदर बैठे हैं।
खुद ट्राई करो
अब खुद ट्राई करो। <article> से एक छोटा About Me कार्ड बनाओ, उसके अंदर <header> में <h2> हो, और दो <p> हों। पहले paragraph में अपना नाम <strong> में रखो। हर अंदर वाला tag बाहर वाले से पहले बंद करो।
हिंट: जो आखिर में खोला, वह पहले बंद। अगर article, फिर header, फिर h2 खोला, तो पहले h2 बंद, फिर header, फिर article।
गलती कहाँ होती है
- 1.Tags overlap करना, जैसे
<p><strong>Hello</p></strong>। अंदर वाला element बाहर वाले से पहले बंद होना चाहिए, नहीं तो browser को अंदाज़ा लगाना पड़ता है कि टुकड़ा कहाँ खत्म हुआ। - 2.पेज के हर हिस्से के लिए सिर्फ़
<div>इस्तेमाल करना। Div बिना नाम का बॉक्स है।<header>,<nav>,<main>, और<article>बेहतर हैं, ताकि browser और search engines समझ सकें कि प्रत्येक हिस्सा किस काम का है।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: Tag और element में क्या फ़र्क है?↓
Tag सिर्फ़ सिंटेक्स का टोकन या मार्कर है (जैसे <p> या </p>)। Element पूरी इकाई है जिसमें opening tag, उसके अंदर का सारा टेक्स्ट या अन्य tags, और closing tag शामिल होते हैं (जैसे <p>Hello</p>)।
Q: Void या empty tags क्या होते हैं? दो उदाहरण दीजिए।↓
Void elements में कोई आंतरिक कंटेंट या closing tag नहीं होता। उदाहरण: <hr> (horizontal rule), <br> (line break), <img>, और <input>।
Q: HTML में tags की सही nesting क्यों ज़रूरी है?↓
Browser पेज को एक DOM tree की तरह पढ़ता है। जो element पहले शुरू हुआ वह बाद में बंद होना चाहिए (First In, Last Out)। अगर tags एक दूसरे को काटें (overlap हों), तो browser को मनमाना अंदाज़ा लगाना पड़ता है जिससे लेआउट टूट सकता है।