HTML में वॉइड एलिमेंट

संक्षिप्त जवाब: वॉइड एलिमेंट क्या है?

HTML में वॉइड एलिमेंट एक ऐसा टैग है जिसका कोई क्लोज़िंग टैग नहीं होता और जो किसी कंटेंट या चाइल्ड एलिमेंट को अपने अंदर नहीं रख सकता। इसमें सिर्फ़ स्टार्ट टैग होता है, जैसे <br> या <img src=”photo.jpg”>। HTML5 में 14 वॉइड एलिमेंट हैं: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, <wbr>, और अप्रचलित <param>। इन्हें कभी-कभी एम्प्टी एलिमेंट भी कहा जाता है, क्योंकि इनमें कोई टेक्स्ट कंटेंट नहीं होता।

HTML5 में वॉइड एलिमेंट की पूरी सूची

बाकी सभी HTML एलिमेंट (जैसे <div>,<p>,<span>) के लिए स्टार्ट और एंड टैग दोनों ज़रूरी हैं। अगर आप किसी वॉइड एलिमेंट के साथ एंड टैग इस्तेमाल करने की कोशिश करते हैं, जैसे <input></input>, तो ब्राउज़र इसे अमान्य HTML मानेगा।

क्या ये वॉइड एलिमेंट हैं?

क्या <img>,<input>,<img><img> या वॉइड एलिमेंट है?

HTML सीखते समय कई डेवलपर के सामने यही सवाल आते हैं। यहां छोटे जवाब दिए गए हैं — चारों HTML5 में वॉइड एलिमेंट हैं।

क्या <img> एक वॉइड एलिमेंट है?

हां। <img> टैग का कोई क्लोज़िंग टैग नहीं होता और यह किसी कंटेंट को अपने अंदर नहीं ले सकता। इसका इस्तेमाल <img src=”photo.jpg” alt=”A photo”> की तरह करें।

क्या <input> एक वॉइड एलिमेंट है?

हां। <input></input> लिखना अमान्य HTML है, पार्सर फिर भी फ़ील्ड को रेंडर करेगा, लेकिन क्लोज़िंग टैग को नज़रअंदाज़ कर दिया जाता है। सही रूप <input type=”text” name=”email”> है।

क्या <link> एक वॉइड एलिमेंट है?

हां। <link> टैग स्टाइलशीट जैसे बाहरी संसाधनों को जोड़ता है और हमेशा अपने आप में पूरा होता है: <link rel=”stylesheet” href=”styles.css”>

क्या <meta> एक वॉइड एलिमेंट है?

हां। <meta charset=”UTF-8″>, <meta name=”viewport” content=”width=device-width”> जैसे मेटाडेटा टैग में कभी कोई कंटेंट या क्लोज़िंग टैग नहीं होता।

क्या <audio> और <video> वॉइड एलिमेंट हैं?

नहीं। दोनों वॉइड नहीं हैं, ये <source> और <track> एलिमेंट को अपने अंदर लेते हैं (जो वॉइड हैं) और इनके लिए क्लोज़िंग टैग ज़रूरी है।

वॉइड एलिमेंट और सेल्फ़-क्लोज़िंग टैग: दोनों में अंतर

यह सबसे आम उलझनों में से एक है। तकनीकी रूप से, HTML5 में सेल्फ़-क्लोज़िंग टैग जैसी कोई चीज़ नहीं है। XML, XHTML और SVG में सेल्फ़-क्लोज़िंग टैग के अंत में स्लैश लगता है, जैसे <circle r=”10″ />, और यह स्लैश ज़रूरी है। HTML में पार्सर वॉइड एलिमेंट पर उस स्लैश को बस नज़रअंदाज़ कर देता है।

इसका मतलब है कि ब्राउज़र <br> और <br /> को एक ही तरह से लेता है। कई कोड फ़ॉर्मैटर अब भी स्लैश जोड़ते हैं, ताकि HTML, XHTML-कंपैटिबल दिखे, और इससे कोई नुकसान नहीं होता, लेकिन एलिमेंट को “वॉइड” यह स्लैश नहीं बनाता। एलिमेंट वॉइड इसलिए होता है क्योंकि HTML स्पेसिफ़िकेशन ऐसा कहता है, स्लैश की वजह से नहीं।

ध्यान रखने वाली एक बात: बिना कोट वाली एट्रिब्यूट वैल्यू के तुरंत बाद स्लैश कभी न लगाएं। <img src=https://example.com/logo.svg/> जैसे मार्कअप में src की वैल्यू /> पर समाप्त हो जाती है, जिससे URL टूट जाता है। अपने एट्रिब्यूट को हमेशा कोट में रखें, या स्लैश से पहले एक स्पेस दें।

अंत का स्लैश असल में कैसे काम करता है, यह और गहराई से समझने के लिए सेल्फ़-क्लोज़िंग टैग देखें।

वॉइड एलिमेंट के साथ आम गलतियां

अनुभवी डेवलपर भी वॉइड एलिमेंट पर चूक जाते हैं। सबसे आम गलतियां इस तरह दिखती हैं:

• क्लोज़िंग टैग जोड़ना। <input type=”text”></input> या <br></br> लिखना अमान्य HTML है। ब्राउज़र एलिमेंट को रेंडर कर देगा, लेकिन क्लोज़िंग टैग चुपचाप नज़रअंदाज़ हो जाता है। सिर्फ़ स्टार्ट टैग इस्तेमाल करें।
• अंदर कंटेंट नेस्ट करने की कोशिश करना। <img src=”photo.jpg”>caption</img> जैसा कोड कोई कैप्शन नहीं बनाएगा — “caption” टेक्स्ट चाइल्ड नहीं, बल्कि सिबलिंग बन जाता है। इसकी जगह <figure> और <figcaption> इस्तेमाल करें।
• <input> को उन फ़ॉर्म एलिमेंट के साथ मिला देना जो वॉइड नहीं हैं। <input> वॉइड है, लेकिन <select>, <textarea> और <button> सभी के लिए क्लोज़िंग टैग ज़रूरी है। ये एक जैसे दिखते हैं, पर इनके नियम अलग हैं।
• किसी एलिमेंट को इसलिए वॉइड मान लेना कि वह “खाली दिखता है”। <div></div> या <span></span> जैसे टैग खाली रेंडर हो सकते हैं, लेकिन वे वॉइड नहीं हैं, उनके लिए हमेशा क्लोज़िंग टैग ज़रूरी है। वॉइड होना HTML5 स्पेसिफ़िकेशन से तय होता है, इससे नहीं कि पेज पर एलिमेंट में कंटेंट है या नहीं।

React और JSX में वॉइड एलिमेंट

अगर आपने React के साथ काम किया है, तो आपने यह एरर शायद देखा होगा:

img is a void element tag and must neither have ‘children’ nor use ‘dangerouslySetInnerHTML’.

HTML स्पेसिफ़िकेशन को React सख़्ती से लागू करता है। <img>, <input>, <br>, <hr> या <link> जैसे किसी वॉइड एलिमेंट को आप children या ‘dangerouslySetInnerHTML’ पास नहीं कर सकते। वही एरर <input> और <link> के साथ भी आता है — HTML में जो वॉइड है, वह JSX में भी वॉइड है।

JSX में वॉइड एलिमेंट को अंत में स्लैश के साथ लिखना अनिवार्य है: <img src=”photo.jpg” />, <br />, <input type=”text” />। HTML की तुलना में JSX ज़्यादा XML के करीब है, इसलिए स्लैश ज़रूरी है, हालांकि सादे HTML में इसकी ज़रूरत नहीं होती।

अगर आपको “वॉइड एलिमेंट टैग” एरर मिलता है, तो जांच लें कि आपने गलती से टैग के अंदर कंटेंट तो नहीं रख दिया या उसे किसी कंपोनेंट प्रॉप के ज़रिए चाइल्ड के रूप में पास तो नहीं कर दिया।

व्यवहार में वॉइड एलिमेंट के उदाहरण

असली HTML में सबसे आम वॉइड एलिमेंट ऐसे दिखते हैं:

html<!-- Line break inside a paragraph --> <p>First line.<br>Second line.</p> <!-- Horizontal rule between sections --> <hr> <!-- Image with alt text --> <img src="logo.png" alt="Company logo" width="120" height="40"> <!-- Form input --> <input type="email" name="user_email" placeholder="you@example.com" required> <!-- Stylesheet link in <head> --> <link rel="stylesheet" href="/styles/main.css"> <!-- Metadata in <head> --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

इनमें से हर टैग स्लैश के बिना और अलग क्लोज़िंग टैग के बिना समाप्त होता है। एट्रिब्यूट (src, alt, type, href आदि) में वह सारी जानकारी होती है जो ब्राउज़र को एलिमेंट रेंडर करने के लिए चाहिए।

वॉइड एलिमेंट का उदाहरण

कुछ आम वॉइड एलिमेंट ये हैं— <br>, <hr>, <img>, <input>, <meta> और <link>। ये HTML डॉक्यूमेंट में टेक्स्ट नोड, लाइन ब्रेक, इमेज, फ़ॉर्म और दूसरी एट्रिब्यूट वैल्यू जोड़ने का एक तेज़ तरीका हैं। HTML के वॉइड एलिमेंट का इस्तेमाल वेब पेज को तेज़ी से लोड होने और सही दिखने में मदद करता है। HTML टैग को सही तरीके से लिखना अनिवार्य है, और ऐसे एलिमेंट के लिए ये बहुत महत्वपूर्ण हैं जिनमें कोई कंटेंट नहीं होता।

अक्सर पूछे जाने वाले सवाल

HTML5 में कितने वॉइड एलिमेंट हैं?

HTML5 में 14 वॉइड एलिमेंट हैं, जिनमें अप्रचलित <param> भी शामिल है। पूरी सूची यह है: area, base, br, col, embed, hr, img, input, link, meta, param, source, track और wbr।

क्या वॉइड एलिमेंट और एम्प्टी एलिमेंट एक ही चीज़ हैं?

हां, HTML की शब्दावली में “वॉइड एलिमेंट” और “एम्प्टी एलिमेंट” एक ही चीज़ बताते हैं — ऐसे टैग जो कोई कंटेंट अपने अंदर नहीं रख सकते। HTML5 स्पेसिफ़िकेशन आधिकारिक रूप से “वॉइड एलिमेंट” शब्द का इस्तेमाल करता है, लेकिन कई ट्यूटोरियल और पुराने डॉक्यूमेंट अब भी “एम्प्टी एलिमेंट” कहते हैं।

क्या वॉइड एलिमेंट को क्लोज़िंग ब्रैकेट से पहले स्लैश की ज़रूरत होती है?

नहीं। HTML5 में <br /> का स्लैश वैकल्पिक है और पार्सर इसे नज़रअंदाज़ कर देता है। XHTML, JSX और SVG में स्लैश ज़रूरी है।

क्या वॉइड एलिमेंट में एट्रिब्यूट हो सकते हैं?

हां। वॉइड एलिमेंट में कोई कंटेंट नहीं होता, लेकिन उनमें कितने भी एट्रिब्यूट हो सकते हैं — उदाहरण के लिए <img> टैग में src, alt, width, height, loading और ऐसे कई एट्रिब्यूट स्वीकार किए जाते हैं।

वॉइड एलिमेंट को क्लोज़िंग टैग की ज़रूरत क्यों नहीं होती?

क्योंकि HTML5 स्पेसिफ़िकेशन उन्हें ऐसे एलिमेंट के रूप में परिभाषित करता है जिनमें कोई कंटेंट संभव ही नहीं है। अपने अंदर लेने के लिए कुछ नहीं होता, इसलिए क्लोज़िंग टैग का कोई मतलब नहीं होगा। इसे जोड़ने की कोशिश करने पर अमान्य HTML बनता है।