एक HTML element को एक start tag, some content और एक end tag द्वारा परिभाषित किया गया है:
<tagname>Any Content</tagname>
HTML element start tag से end tag तक सब कुछ है जैसे की <tagname> Any Content </tagname>
| Start Tag | Element Content | End Tag |
|---|---|---|
| <h1> | This is My First Heading | </h1> |
| <p> | This is My first paragraph | </p> |
| <li> | This is My first list | </li> |
| <br> | none | none |
Nested HTML Elements
Nested HTML Elements का मतलब है कि किसी elements के अंदर एक और elements. जिसे हम नीचे उदाहरण से समझने की कोशिश करते हैं।
<!DOCTYPE html><html>
<body>
<h1>My First Heading</h1> <p>My first paragraph.</p>
</body>
</html>
उद्धारण को समझते हैं
ऊपर दिए गए उदाहरण में सबसे पहली लाइन है <!DOCTYPE html> जो की पेज के प्रकार को
डिफाइन करता है
यानी कि यह पेज html पेज है।
उसके बाद है <html> टैग और सबसे नीचे अंत में है </html> end टैग।
अब इस <html> element के अंदर है एक <body> element.
<body>
<h1>My First Heading</h1> <p>My first paragraph.</p>
</body>
जैसा कि हमने पिछले चैप्टर में देखा था HTML डॉक्यूमेंट में जो भी हमें
दिखाई देता है किसी ब्राउजर की सहायता से वह <body> और </body> के
बीच में होता है।
और अब इस <body> element के अंदर हमारा दो टैग <h1> और
<p> टैग हैं।
ऊपर दिए गए उदाहरण से आप समझ गए होंगे, जैसे कि हमारे केस में सबसे बाहरी एलिमेंट है
<html> और <html> के अंदर है <body> एलिमेंट यानी
कि <html> का नेस्टेड हो गया <body> एलिमेंट।
और फिर से <body> एलिमेंट के अंदर हमारा दो tags है <h1> टैग और
<p> टैग यानी की <body> का नेस्टेड हो गया <h1>
और <p> टैग।
Empty HTML Elements
कुछ HTML elements में कोई content नहीं होती है (जैसे <br> element) । इन element को
empty elements कहा जाता
है। empty elements का कोई end टैग नहीं होता!
<p>The details of student <br> Name: Brajlal <br> Age: 15 </p>
The details of student
Name: Brajlal
Age: 15
<P> और
<p> दोनों एक समान ही है। परंतु HTML के सारे टैग लोअर केस में ही लिखे जाने के चलन है,
और सारे डेवलपर lowercase को ही recommends करते हैं।
Never Skip the End Tag
इसका यह मतलब है कि हमें कभी भी किसी टैग को शुरू किया है तो उसे खत्म करना ही है end टैग के मदद से परंतु कभी-कभी हम end tag मिस भी कर देते हैं तो भी अच्छे से एलिमेंट्स डिस्प्ले हो जाता है लेकिन यह हर बार नहीं होता नीचे हम दो उदाहरण से समझते हैं।
<html>
<body>
<p>This is a paragraph <p>This is a paragraph
</body>
</html>
This is a paragraph
This is a paragraph
<html>
<body>
<p>This is a paragraph <h1>This is a Heading <p>This is second paragraph</p> <p>This is third paragraph</p>
</body>
</html>
This is a paragraph
This is a Heading
This is second paragraph
This is third paragraph
उद्धारण को समझते हैं
पहले उद्धारण में हमने <p> का end tag छोड़ दिया था फिर भी वह कोड अच्छे से डिस्प्ले
हुआ।
परंतु दूसरे उदाहरण में देखेंगे तो हमने <h1> का end tag मिस कर दिया उसके बाद आने
वाले दूसरे <p> टैग को हमने अच्छी तरह से क्लोज किया </p> tag की
सहायता से फिर भी हमें पैराग्राफ को हेडिंग की तरह ही दिखाया जा रहा है, इसका मतलब है कि यह पेज अच्छे
से एग्जीक्यूट नहीं हो रहा है इसका कारण है कि हमने <h1> टैग end tag मिस कर दिया
है, जिससे <h1> के बाद आने वाले हर कंटेंट को HTML हेडिंग ही समझ रहा हैं।
इसलिए end tag को मिस करने से हमें बचाना चाहिए ताकि इस तरह के गड़बड़ियां हमारे पेज में ना हो पाए, इससे भी बड़ी गड़बड़ियां हो सकती है इसी से बचने के लिए हमें इंड टैग लगाना जरूरी हो जाता हैं।