क्या HTML5 में गैर-शून्य) स्व-समापन टैग मान्य हैं?


669

W3C मान्य स्वतः बंद होने वाले टैग (के साथ उन है कि अंत "की तरह नहीं है />पर") गैर शून्य तत्व। (शून्य तत्व वे हैं जिनमें कभी कोई सामग्री नहीं हो सकती है।) क्या वे अभी भी HTML5 में मान्य हैं?

स्वीकृत शून्य तत्वों के कुछ उदाहरण :

<br />
<img src="" />
<input type="text" name="username" />

अस्वीकृत गैर-शून्य तत्वों के कुछ उदाहरण :

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

नोट: W3C सत्यापनकर्ता वास्तव में शून्य स्व-समापन टैग को स्वीकार करता है: लेखक को मूल रूप से एक सरल टाइपो (\>इसके बजाय/>) के कारण समस्या थी ; हालाँकि, स्व-समापन टैग एचटीएमएल 5 में सामान्य रूप से 100% मान्य नहीं हैं, और उत्तर विभिन्न एचटीएमएल फ्लेवर में स्व-समापन टैग के मुद्दे पर विस्तृत हैं।


2
@ बान: ओह, माफ करना, मुझे लगता है कि तुम सही हो। इस मामले में, मैंने मूल प्रश्न को गलत समझा, मैंने सोचा कि ओपी यह जानना चाहता है कि क्या HTML5 में सेल्फ-क्लोजिंग टैग सभी मान्य हैं। लेकिन इसका मतलब है कि उसने अपने कोड में सिर्फ टाइपो बनाया है, या वह स्वयं-समापन टैग को उचित रूप से लिखना नहीं जानता है, जिससे समझ में आता है कि W3C सत्यापनकर्ता ने अपने कोड को अमान्य के रूप में चिह्नित किया है।
Sk8erPeter

16
भविष्य के पाठकों के लिए समय बचाने के लिए: हां, प्रश्न में वाक्य रचना गलत है, और नहीं, आपको इसे नहीं बदलना चाहिए। ओपी ने स्पष्ट रूप से और उचित रूप से समझाया है कि क्यों । चूंकि इसने इस सवाल को प्रेरित करने वाले सत्यापन त्रुटियों को जन्म दिया, वाक्यविन्यास को ठीक नहीं किया जाना चाहिए।
जॉर्डन ग्रे

2
क्या आप लोग अभी भी लड़ रहे हैं कि स्लैश का सामना किस दिशा में होना चाहिए? आ जाओ।
BoltClock

3
@BoltClock युप, अभी भी लड़ रहा है। दोस्तों: यदि यह प्रश्न के बारे में पूछ रहा था \>, तो इसे बेकार फिक्स-माय-टाइपो प्रश्न के रूप में बंद किया जाना चाहिए। जवाब सभी पते />/>संस्करण केवल उपयोगी है। होने दो.
गिल्स एसओ- बुराई को रोकना '19

1
फिर प्रश्न को फिर से शुरू करना होगा, क्योंकि W3C सत्यापनकर्ता वास्तव में स्वयं-समापन टैग को स्वीकार करता है। मूल अभिप्राय के संबंध में अपनी सत्यनिष्ठा से समझौता किए बिना इस तरह से प्रश्न को पुन: प्रस्तुत करना कठिन है। इसलिए, यदि हम SO के नियमों का पालन करना चाहते हैं, तो हमें इस तरह के प्रश्नों में स्पष्टता का त्याग करना पड़ सकता है, भले ही ऐसा लगता है कि प्रश्न को संपादित करना केवल समझदारी का काम है, जो कि अधिक अच्छे के लिए है औसत। हम मेटा पर एक और चर्चा शुरू कर सकते हैं, अगर कई अन्य प्रश्न समान मुद्दे हैं।
osa

जवाबों:


1238
  • में एचटीएमएल 4 , <foo /(हाँ, नहीं के साथ >सब पर) का अर्थ है <foo>(जो करने के लिए सुराग <br />अर्थ <br>>(यानी <br>&gt;) और <title/hello/जिसका अर्थ है <title>hello</title>)। यह एक एसजीएमएल नियम है कि ब्राउज़रों ने समर्थन का बहुत खराब काम किया, और युक्ति लेखकों को वाक्य रचना से बचने की सलाह देती है

  • में एक्सएचटीएमएल , <foo />इसका मतलब है<foo></foo> । यह एक XML नियम है जो सभी XML दस्तावेजों पर लागू होता है। उस ने कहा, एक्सएचटीएमएल को अक्सर text/html(ऐतिहासिक रूप से कम से कम) ब्राउज़रों द्वारा संसाधित किए गए दस्तावेजों की तुलना में एक अलग पार्सर का उपयोग करके संसाधित किया जाता है application/xhtml+xml। W3C XHTML के रूप में अनुसरण करने के लिए अनुकूलता दिशानिर्देश प्रदान करता है text/html। (अनिवार्य रूप से: केवल आत्म-समापन टैग सिंटैक्स का उपयोग करें जब तत्व को ईएमपीटीवाई के रूप में परिभाषित किया गया है (और HTML टैग में अंतिम टैग निषिद्ध था)।

  • में एचटीएमएल 5 , के अर्थ <foo /> तत्व के प्रकार पर निर्भर करता है

    • HTML तत्वों पर जो शून्य तत्व के रूप में निर्दिष्ट हैं (अनिवार्य रूप से "एक तत्व जो HTML5 से पहले अस्तित्व में था और जिसे किसी भी सामग्री के लिए मना किया गया था"), अंतिम टैग बस निषिद्ध हैं। प्रारंभ टैग के अंत में स्लैश की अनुमति है, लेकिन इसका कोई अर्थ नहीं है। यह सिर्फ लोगों के लिए (और सिंटेक्स हाइलाइटर्स) सिंटैक्टिक शुगर है जो एक्सएमएल के आदी हैं।
    • अन्य HTML तत्वों पर, स्लैश एक त्रुटि है, लेकिन त्रुटि पुनर्प्राप्ति के कारण ब्राउज़र इसे अनदेखा कर देंगे और टैग को नियमित प्रारंभ टैग के रूप में मानेंगे। यह आमतौर पर एक लापता अंत टैग के साथ समाप्त हो जाएगा, जिससे बाद के तत्व भाई-बहन के बजाय बच्चे होंगे।
    • विदेशी तत्व (XML अनुप्रयोगों जैसे कि एसवीजी से आयातित) इसे स्व-समापन सिंटैक्स के रूप में मानते हैं।

24
" ... जो XML के आदी हैं। " आप सुझाव देते हैं कि XML अनुपालन खराब है। फिर भी, एचटीएमएल 5 में अंतिम परिणाम यह प्रतीत होता है कि हमें अभी भी एंगल्ड कोष्ठक से निपटना है (अर्थात एक्सएमएल की अधिकांश असुविधाओं के साथ कुछ), जबकि एक्सएमएल-आधारित टूल (जैसे टेम्प्लेट टूल या विभिन्न प्रोसेसर) का उपयोग करना कठिन हो जाता है )। यहां तक ​​कि एक पीढ़ी के दृष्टिकोण से, यह प्रतीत होता है कि <object data="..." />और <img src="..."></src>ठीक नहीं है, जबकि <object data="..."></object>और <img src="..." />हैं, जो उपकरण स्थिरता के लिए कठिन बनाता है। यह हार-हार की स्थिति जैसा लगता है।
ब्रूनो

7
@Bruno - HTML XML से पूर्ववर्ती है। लोगों को XHTML में ले जाने के प्रयास विफल रहे। इसके साथ text/html, ब्राउज़र स्लैश को कोई विशेष अर्थ नहीं देता है, इसलिए इसमें कोई व्यावहारिक उद्देश्य नहीं है। यह केवल उन लोगों के लिए एक्सएमएल की तरह दिखने के लिए है जो आदत से बाहर नहीं निकल सकते हैं।
क्वेंटिन

6
@ क्वेंटिन मैं पूरी तरह से असहमत नहीं हूं। मुझे बस यह थोड़ी शर्म की बात है कि एक वैध XML समकक्ष आवश्यक HTML5 (जैसे या <img ...></img>इसके बजाय ) मान्य नहीं है । चूंकि HTML5 प्रभावी रूप से सामान्य रूप से कम कठोर है (संभवतः एक्सएचटीएमएल विफल क्यों हुआ), यह बहुत अच्छी तरह से कुछ सहन कर सकता था । दुर्भाग्य से, यह नहीं है, इसलिए XML- आधारित टेम्पलेट जनरेटर को यह जानना होगा कि शून्य तत्वों या स्वयं-समापन तत्वों के उत्पादन को कैसे अलग किया जाए: आपके पास सभी खाली तत्वों को लिखने के लिए एक नियम भी नहीं हो सकता है । <img ...><img ... /><img ...></img><tag></tag>
ब्रूनो

3
एक्सएचटीएमएल में विफल रहा है इससे पहले कि एचटीएमएल 5 भी क्षितिज पर था, और आप लंबे समय क्योंकि ब्राउज़र त्रुटि सुधार कि predated एक्सएचटीएमएल इलाज करने जैसी चीज़ें हैं खाली तत्वों के लिए फार्म नहीं कर सकते हैं </br>के रूप में <br>तो <br></br>एक डबल लाइन ब्रेक होगा। (और वास्तविक दुनिया खराब मार्कअप के साथ (पीछे की ओर संगतता </br>) HTML 5 के डिजाइन लक्ष्यों में से एक है)।
क्वेंटिन

1
W3C से: शून्य तत्व: क्षेत्र, आधार, br, कर्नल, एम्बेड, hr, img, input, keygen, लिंक, मेटा, परम, स्रोत, ट्रैक, wbr "शून्य तत्वों में केवल एक प्रारंभ टैग होता है; अंतिम टैग निर्दिष्ट नहीं किए जाने चाहिए; शून्य तत्वों के लिए। " w3.org/TR/html5/syntax.html#void-elements
फैबियो

406

जैसा कि निकिता स्कोवर्त्सोव ने बताया, एक स्व-समापन तलाक मान्य नहीं होगा। ऐसा इसलिए है क्योंकि एक div एक सामान्य तत्व है , एक शून्य तत्व नहीं है ।

HTML5 कल्पना के अनुसार , ऐसे टैग जिनमें कोई भी सामग्री नहीं हो सकती है ( शून्य तत्व के रूप में जाना जाता है ) सेल्फ-क्लोजिंग * हो सकता है। इसमें निम्नलिखित टैग शामिल हैं:

area, base, br, col, embed, hr, img, input, 
keygen, link, meta, param, source, track, wbr

उपरोक्त टैग पर "/" पूरी तरह से वैकल्पिक है, हालांकि, इससे <img/>अलग नहीं है <img>, लेकिन <img></img>अमान्य है।

* नोट: विदेशी तत्व भी स्वयं-बंद हो सकते हैं, लेकिन मुझे नहीं लगता कि इस उत्तर के लिए गुंजाइश है।


1
IE10 का डेवलपर टूल मुझे "HTML1500: टैग स्व-समापन नहीं दे सकता है। एक स्पष्ट क्लोजिंग टैग का उपयोग करें।" लाइन पर <meta charset = "UTF-8" /> किसी भी विचार कि ऐसा क्यों होगा?
जेम्स Indy

ठीक है, मुझे पता चला कि स्वयं समापन टैग में स्लैश नहीं होना चाहिए (और इसे हटाने से मेरी त्रुटि ठीक हो जाती है)। हवाला: tiffanybbrown.com/2011/03/23/…
Indy

युक्ति बदल गई है। अब, "शून्य" या "स्व-समापन" तत्वों में स्लैश शामिल नहीं होना चाहिए , जब एचटीएमएल 5 सिद्धांत के रूप में सेवा की जाती है। हालाँकि, यदि इसे XHTML के रूप में परोसा जा रहा है, तो समापन स्लैश की आवश्यकता हो सकती है (इस मामले में डॉक्स की जाँच करें)। व्यावहारिक उपयोग में, पृष्ठ आमतौर पर उम्मीद के मुताबिक प्रदर्शित करेंगे, भले ही समापन /को शामिल किया गया हो, लेकिन यह कोई जियंटेड नहीं है (यह ब्राउज़र पर निर्भर है जो प्रभावी रूप से आपके लिए कोड को फिर से लिख रहा है, और आपकी इच्छानुसार व्याख्या कर रहा है।) इसके अलावा, यदि। किसी कारण से आपके पृष्ठ को HTML 5 सत्यापन पास करना आवश्यक है, यदि आप शून्य तत्वों के लिए टैग बंद करते हैं तो यह पास नहीं हो सकता है।
शेरलहोमन

@ SherylHohman की टिप्पणी के बारे में, मुझे नहीं लगता कि कल्पना बदल गई है (या यदि यह है, तो यह वापस बदल गई है)। W3.org/TR/html5/syntax.html#start-tags (8.1.2.1.6) देखें - शून्य (या विदेशी) तत्वों में अभी भी स्लैश शामिल हो सकते हैं।
1919

63

व्यवहार में, HTML में स्व-समापन टैग का उपयोग करना ठीक उसी तरह काम करना चाहिए जैसे आप अपेक्षा करते हैं। लेकिन अगर आप वैध एचटीएमएल 5 लिखने के बारे में चिंतित हैं , तो आपको यह समझना चाहिए कि इस तरह के टैग का उपयोग आपके द्वारा उपयोग किए जाने वाले दो अलग-अलग दो सिंटैक्स रूपों के भीतर कैसे होता है। HTML5 एक HTML सिंटैक्स और XHTML सिंटैक्स दोनों को परिभाषित करता है, जो समान हैं लेकिन समान नहीं हैं। किसका उपयोग किया जाता है यह वेब सर्वर द्वारा भेजे गए मीडिया प्रकार पर निर्भर करता है।

संभावना से अधिक, आपके पृष्ठों के रूप में कार्य किया जा रहा है text/html, जो अधिक उदार HTML सिंटैक्स का अनुसरण करता है। इन मामलों में, HTML5 कुछ शुरुआती टैग को वैकल्पिक होने से पहले / समाप्त होने से पहले अनुमति देता है>। इन मामलों में, / वैकल्पिक और नजरअंदाज कर दिया गया है, इसलिए <hr>और <hr />समान हैं। HTML कल्पना इन "शून्य तत्वों" को बुलाती है, और मान्य लोगों की एक सूची देती है। सख्ती से बोलना, वैकल्पिक / केवल इन शून्य तत्वों के प्रारंभ टैग के भीतर मान्य है; उदाहरण के लिए, <br />और <hr />मान्य HTML5 हैं, लेकिन <p />ऐसा नहीं है।

HTML5 कल्पना HTML लेखकों के लिए और वेब ब्राउज़र डेवलपर्स के लिए क्या सही है के बीच एक स्पष्ट अंतर बनाती है, दूसरे समूह के लिए सभी प्रकार के अमान्य "विरासत" वाक्यविन्यास को स्वीकार करने की आवश्यकता होती है। इस मामले में, इसका मतलब है कि HTML5- अनुरूप ब्राउज़र अवैध रूप से स्व-बंद टैग को स्वीकार करेंगे, जैसे <p />कि आप संभवत: उन्हें प्रस्तुत करते हैं और उन्हें प्रस्तुत करते हैं। लेकिन एक लेखक के लिए, वह पेज HTML5 मान्य नहीं होगा । (इससे भी महत्वपूर्ण बात यह है कि इस तरह के अवैध सिंटैक्स का उपयोग करने से आपको मिलने वाला DOM ट्री गंभीर रूप से खराब हो सकता है; <span />उदाहरण के लिए, स्व-बंद टैग, चीजों को बहुत अधिक गड़बड़ करते हैं )।

(असामान्य स्थिति में कि आपका सर्वर एक्सएचटीएमएल फाइल को एक्सएमएल माइम प्रकार के रूप में भेजना जानता है, पेज को एक्सएचटीएमएल डीटीडी और एक्सएमएल सिंटैक्स के अनुरूप होना चाहिए। इसका मतलब है कि उन तत्वों के लिए स्व-समापन टैग आवश्यक हैं ।


31
<p /> एक प्रारंभिक टैग के रूप में माना जाएगा, स्व-बंद टैग नहीं। इसका मतलब है कि दस्तावेज़ के पूरे शेष को पी तत्व के भीतर माना जाएगा। यह वह नहीं है जो मैं "शायद उम्मीद करता हूं", और किसी भी गैर-तुच्छ पृष्ठ पर एक गंभीर गड़बड़ पैदा करेगा।
मुहस्तिथ

12

एचटीएमएल 5 मूल रूप से व्यवहार करता है जैसे कि अनुगामी स्लेश नहीं है। एचटीएमएल 5 सिंटैक्स में स्व-समापन टैग जैसी कोई चीज नहीं है।

  • जैसे गैर-शून्य तत्वों पर स्व-समापन टैग <p/>, <div/>काम नहीं करेगा। पीछे चल रहे स्लैश को नजरअंदाज कर दिया जाएगा, और इन्हें ओपनिंग टैग के रूप में माना जाएगा। इससे घोंसले के शिकार की समस्या होने की संभावना है।

    यह सच है कि क्या स्लैश के सामने व्हॉट्सएप है: <p />और <div />यह भी उसी कारण से काम नहीं करेगा।

  • शून्य तत्वों पर स्व-समापन टैग जैसे <br/>या काम <img src="" alt=""/> करेंगे , लेकिन केवल इसलिए कि अनुगामी स्लेश को अनदेखा किया जाता है, और इस मामले में सही व्यवहार में परिणाम होता है।

इसका परिणाम यह है कि आपके पुराने "एक्सएचटीएमएल 1.0 में टेक्स्ट / एचटीएमएल के रूप में कार्य किया गया" कुछ भी काम करेगा जैसा कि पहले किया था: गैर-शून्य टैग पर अनुगामी स्लैश को वहां स्वीकार नहीं किया गया जबकि शून्य तत्वों पर अनुगामी स्लैश ने काम किया।

एक और ध्यान दें: XML के रूप में HTML5 दस्तावेज़ का प्रतिनिधित्व करना संभव है, और इसे कभी-कभी "XHTML 5.0" कहा जाता है। इस मामले में एक्सएमएल के नियम लागू होते हैं और सेल्फ-क्लोजिंग टैग को हमेशा हैंडल किया जाएगा। इसे हमेशा एक XML माइम प्रकार के साथ परोसा जाना चाहिए।


4

HTML5 में स्व-समापन टैग मान्य हैं, लेकिन आवश्यक नहीं है।

<br>और <br />दोनों ठीक हैं।


12
एचटीएमएल 5 कल्पना के अनुसार, स्व-समापन सिंटैक्स ( />) का उपयोग गैर-शून्य एचटीएमएल तत्व पर नहीं किया जा सकता है।
naXa

2
सवाल गैर-शून्य तत्वों पर स्व-समापन टैग के बारे में था , जैसे <p/>या <div/>
थोमसट्रेटर

2
प्रारंभ में प्रश्न विशेष रूप से गैर-शून्य तत्वों के बारे में नहीं था। यह अधिक पसंद था, क्या आप अभी भी <... />एक्सएचटीएमएल के रूप में उपयोग कर सकते हैं या क्या आपको /एचटीएमएल 5 में निकालना होगा । बाद में कई बार प्रश्न बदला गया।
निक

किसी भी तरह से, इसका उत्तर यह है कि स्लैश को नजरअंदाज कर दिया जाएगा, जो तत्वों को शून्य घोषित नहीं करेगा, लेकिन शून्य तत्वों के साथ संगत होगा।
थोमसट्रेटर

4

मैं स्वयं समापन टैग के साथ बहुत सावधान रहूंगा क्योंकि यह उदाहरण प्रदर्शित करता है:

var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"

मेरी आंत का एहसास <span></span><span></span>इसके बजाय होता


2
यह स्वीकार किए गए उत्तर में वर्णित है:On other [than void] HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.
17'17 बजे Palec

-1

हालांकि रिकॉर्ड के लिए अन्याय-यह अमान्य है:

<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

और यहाँ एक स्लैश इसे फिर से वैध बना देगा:

    <rect width="800" height="400" fill="#000"/>

1
ऐसा इसलिए है क्योंकि svg को xml में लिखा जाता है, html में नहीं। यह अलग-अलग पार्सिंग नियमों का उपयोग करता है
इलेक्ट्रिक कॉफ़ी
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.