HTML Elements

एक 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
नोट: कुछ HTML elements में कोई content नहीं होती है (जैसे <br> element)। इन element को empty elements कहा जाता है। empty elements का कोई end टैग नहीं होता!

Nested HTML Elements

Nested HTML Elements का मतलब है कि किसी elements के अंदर एक और elements. जिसे हम नीचे उदाहरण से समझने की कोशिश करते हैं।

उदाहरण: HTML Headings
<!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 टैग नहीं होता!

उदाहरण: Empty HTML Elements
<p>The details of student <br> Name: Brajlal <br> Age: 15 </p>
Result

The details of student
Name: Brajlal
Age: 15

नोट: HTML टैग case sensitive नहीं होता हैं जिसका मतलन <P> और <p> दोनों एक समान ही है। परंतु HTML के सारे टैग लोअर केस में ही लिखे जाने के चलन है, और सारे डेवलपर lowercase को ही recommends करते हैं।

Never Skip the End Tag

इसका यह मतलब है कि हमें कभी भी किसी टैग को शुरू किया है तो उसे खत्म करना ही है end टैग के मदद से परंतु कभी-कभी हम end tag मिस भी कर देते हैं तो भी अच्छे से एलिमेंट्स डिस्प्ले हो जाता है लेकिन यह हर बार नहीं होता नीचे हम दो उदाहरण से समझते हैं।

उदाहरण 1: End Tag missed
<html>

<body>

    <p>This is a paragraph
    <p>This is a paragraph

</body>

</html>
Result

This is a paragraph

This is a paragraph

उदाहरण 2: End Tag missed
<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>
Result

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 को मिस करने से हमें बचाना चाहिए ताकि इस तरह के गड़बड़ियां हमारे पेज में ना हो पाए, इससे भी बड़ी गड़बड़ियां हो सकती है इसी से बचने के लिए हमें इंड टैग लगाना जरूरी हो जाता हैं।

HTML में उपलब्ध सारे HTML टैग्स को जानने के लिए HTML Tag Reference पेज पर जा सकते हैं
Article By: Nilesh
Created on: 03 Nov 2023  377  Views
 Print Article
Report Error

If you want to report an error, or any suggestion please send us an email to [email protected]