<Img> टैग को ठीक से कैसे बंद करें?


122
<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

उनमें से कौन सा सही है?


6
सवाल यह है कि "<img> टैग को ठीक से कैसे बंद करें?" जो एक वास्तविक प्रश्न है, और उत्तर उपयोगी हैं। यह सवाल बंद नहीं होना चाहिए था।

3
सवाल, वर्तमान में, ठीक है। यह है नहीं अधूरा, व्यापक, या rhetorial,, अस्पष्ट अस्पष्ट। नीचे एक महान जवाब भी है।
डेविड जे।

मुझे नहीं पता कि निम्नलिखित में से कौन सा उत्तर सही है, लेकिन दिलचस्प बात यह है कि फ़ायरफ़ॉक्स के कोड इंस्पेक्टर टैग के अंत में </ img> जोड़ता है यदि आप इसे वहां नहीं डालते हैं। और IE नहीं करता है। यह मेरे ब्रह्मांड में महत्वपूर्ण है।
चिवड़ा

PS Dreamweaver /> XHTML टैग सम्मिलित करता है।
चिवड़ा

जवाबों:


50
<img src='stackoverflow.png' />

ठीक काम करता है और टैग को ठीक से बंद कर देता है। altदृष्टिहीन लोगों के लिए विशेषता जोड़ने के लिए सबसे अच्छा है ।


4
यह सही है कि <img />[X] HTML / XML में मान्य है, हालाँकि आजकल XHTML का उपयोग बहुत कम होता है और यदि आपका सर्वर उन पृष्ठों की सेवा कर रहा है, जिनके text/htmlबारे में आपको चिंता करने की ज़रूरत है, तो मान्य HTML लिख रहा है। HTML ऐप को XHTML पर माइग्रेट करने की बाधा शून्य के करीब है।
फेब्रीको मैटे

1
4.01 ट्रांस्फ़ॉर्म और उच्चतर लक्ष्यीकरण करने पर उपरोक्त उत्तर W3C के HTML चेकर के साथ मान्य नहीं होगा। W3C मार्कअप सत्यापन सेवा भी देखें । मेरा मानना ​​है कि उपरोक्त उत्तर के लिए HTML5 या XHTML की आवश्यकता है। सत्यापन विफलताओं से बचने के लिए, आपको एक का उपयोग करने की आवश्यकता है <img src='stackoverflow.png'>(यदि यह आपके लिए मायने रखता है)।
jww

1
@ FabrícioMatté आप वास्तविक उपयोग में xhtml को गंभीर रूप से कम आंकते हैं। जितनी बड़ी कंपनी है, उतनी ही अधिक संभावना है कि वे html से अधिक html के साथ काम करते हैं, या html5 xhtml (आसान / तेज पार्सिंग के लिए) की तरह स्वरूपित होते हैं, या आप माइक्रोडाटा, या ixbrl जैसे उन्नत मार्कअप जैसी अन्य चीजों के साथ काम करते हैं।
रॉबर्ट मैककी

"ठीक काम करता है" और "निर्दिष्ट" के बीच एक बड़ा अंतर है और आपको उस टैग पर बंद स्लैश के उपयोग से कॉल करने वाला कोई HTML विनिर्देश नहीं मिलेगा। जैसा कि दूसरों ने उल्लेख किया है, यह अनुमति दी जाती है कि मूल रूप से XHTML / XML का उपयोग करने के लिए लिखी गई वेब साइटों को न तोड़ें, लेकिन कहीं भी आपको ऐसा कोई शब्द या उदाहरण नहीं मिलेगा, जिसमें कहा गया हो कि इसके उपयोग की आवश्यकता है। वास्तव में, आपको पता चल जाएगा कि इसका कोई अर्थ नहीं है और ब्राउज़रों को इसे अनदेखा करने के निर्देश दिए गए हैं!
रॉब

रोब - 6 साल पहले एक समस्या थी। इसने इसे ठीक कर दिया। अब लगता है कि ब्राउज़र बेहतर हैं
एड हील

163

यह HTML5 वैध है और इसे बंद किए बिना यह बिल्कुल ठीक है। यह एक तथाकथित शून्य तत्व है:

<img src='stackoverflow.png'>

निम्नलिखित XHTML टैग मान्य हैं। उन्हें बंद करना होगा। HTML 5 में बाद वाला भी ठीक है:

<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

5
यह न केवल मान्य HTML5 है, बल्कि HTML4 में भी मान्य है। जैसा कि आपने कहा कि HTML को स्व-समापन "शून्य" तत्वों की आवश्यकता नहीं है। सुसंगत उत्तर के लिए +1।
फेब्रीसियो मैटे

2
यदि 4.01 संक्रमणकालीन और उच्चतर लक्ष्यीकरण किया गया है, तो HTML5 या XHTML W3C के HTML चेकर के साथ मान्य करने में विफल रहेगा। W3C मार्कअप सत्यापन सेवा भी देखें । आपको एक का उपयोग करने की आवश्यकता है <img src='stackoverflow.png'>(यदि यह आपके लिए मायने रखता है)।
jww

कई सालों के बाद टिप्पणी ... <img src="about:logo" alt="about:logo">फ़ायरफ़ॉक्स 76 के about:logoपेज में टैग देखकर उलझन हुई ! हालांकि document.body.innerHTMLदिखाता है <img src=\"about:logo\" alt=\"about:logo\">... बहुत अच्छा जवाब ...
एस। गोस्वामी

4

दरअसल, HTML5 में केवल पहला ही वैध है

<img src='stackoverflow.png'>  

XHTML में केवल अंतिम दो ही मान्य हैं

<img src='stackoverflow.png'></img>  
<img src='stackoverflow.png' />

(हालांकि altसख्त आवश्यकता नहीं है, एक विशेषता _usually_ को भी शामिल किया जाना चाहिए)।

उस ने कहा, आपका एचटीएमएल 5 पेज संभवतः के रूप में प्रदर्शित करेगा क्योंकि ब्राउज़र आपके एचटीएमएल को फिर से लिखेंगे या व्याख्या करेंगे कि यह आपको क्या मतलब है। यही कारण है कि हो सकता है मतलब है कि यह से उदाहरण के लिए, एक टैग बदल जाता है,
<div />में <div></div>। या शायद यह सिर्फ अंतिम स्लैश पर ध्यान नहीं देता है <img ... />
देखें 2016: विरासत सत्यापन के लिए HTML5 को XHTML 5.0 के रूप में परोसें।
देखें: 2011 की चर्चा और यहां अतिरिक्त लिंक, हालांकि समय के साथ कुछ बिट्स बदल गए होंगे

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

इसलिए, जब आप संभवतः तीन विकल्पों में से किसी के साथ दूर हो सकते हैं, तो
केवल पहले HTML5 मानक का पालन करता है, और HTML5 सत्यापनकर्ता को पास करने की गारंटी है।

एक ध्वनि रणनीति निम्नलिखित हो सकती है:

  • बंद स्लैश के बिना नया कोड लिखें।
  • जब पुन: फैक्टरिंग कोड, आस-पास की छवि टैग अपडेट करें, जैसा कि आप उन पर चलाते हैं।
  • जब तक कोई विशेष आवश्यकता न हो, तब तक आप उन लीगेसी फ़ाइलों के टैग के बारे में चिंता न करें जिन्हें आप स्पर्श नहीं करते हैं।

यहां उन टैगों की एक सूची दी गई है, जिन्हें एचटीएमएल 5 में बंद नहीं किया जाना चाहिए :

 <br>    <hr>    <input>       
 <img>  <link>   <source>  
 <col>  <area>   <base>
 <meta> <embed>  <param>  
<track>  <wbr>   <keygen> (HTML 5.2 Draft removed)

1
यह तकनीकी रूप से गलत है। एक स्व-समापन शून्य तत्व HTML 5 में पूरी तरह से मान्य है। HTML.spec.whatwg.org/#start-tags देखें जो कि <img src='stackoverflow.png' />XHTML और HTML 5 के किसी भी संस्करण में मान्य होगा ।
रॉबर्ट McKee

1
@RobertMcKee नहीं, यह तकनीकी रूप से सही है। समापन स्लैश का उपयोग करने की अनुमति है, और इसे त्रुटि के रूप में चिह्नित नहीं किया जाएगा, कहीं भी किसी भी एचटीएमएल विनिर्देश में आप यह नहीं देखेंगे कि इसका उपयोग किया जाना है। इसे उन पुरानी वेब साइटों को न तोड़ने की अनुमति है, जो XHTML / XML पर आधारित थीं, लेकिन कहीं भी आपको कोई HTML युक्ति दिख रही होगी, शब्दों या उदाहरण के द्वारा, उन टैगों पर क्लोज़िंग स्लैश का उपयोग जहां वे W3C द्वारा निर्दिष्ट हैं। या WHATWG।
रॉब

@ रॉट WHWWG डॉक्यूमेंट के अनुसार मैं ऊपर सेक्शन 12.1.2.1.6 से जुड़ा हुआ हूं - Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.img एक वॉयल एलिमेंट है प्रति सेक्शन 12.1.2
रॉबर्ट मैककी

1
@RobertMcKee हाँ। यह है कि स्लैश को अनुमति क्यों दी गई है (यह उन कारणों के लिए है जो मैंने अपनी पिछली टिप्पणी में दिए हैं) के विनिर्देशन का एक हिस्सा है। हालांकि, आपको उस तत्व के लिए वास्तविक विनिर्देश को देखना चाहिए - इस मामले में img - जो स्पष्ट रूप से शब्दों और उदाहरणों से दिखाता है, कि कोई समापन स्लैश की आवश्यकता या निर्दिष्ट नहीं है। वास्तव में, इसे देखे बिना, उस अनुभाग में आगे पढ़ने से यह पता चलेगा कि समापन स्लैश का कोई मतलब नहीं है, कुछ भी नहीं करता है और इसे अनदेखा करने के लिए ब्राउज़र की आवश्यकता होती है। इसलिए यह बेकार और व्यर्थ है और हमें मेरी मूल टिप्पणी पर वापस लाता है: समापन स्लैश का उपयोग नहीं किया जाता है।
रोब

1
@Rob हाँ, यह वैकल्पिक है, लेकिन ऐसा करने के लिए पूरी तरह से मान्य है। जो बयान को Actually, only the first one is valid in HTML5तकनीकी रूप से गलत बनाता है। दूसरा HTML5 में भी मान्य है। आवश्यकता नहीं है, लेकिन मान्य है। कोई यह तर्क दे रहा है कि इसकी आवश्यकता है। केवल उन विनिर्देशों के अनुसार, टैग के स्व-समापन रूप का उपयोग करना XHTML और HTML के सभी वर्तमान रूपों में मान्य है।
रॉबर्ट मैककी

2

आपके द्वारा उपयोग किए जाने वाले टैग का सबसे अच्छा उपयोग:

<img src="" alt=""/>

इसके अलावा आप HTML5 में उपयोग कर सकते हैं:

<img src="" alt="">

ये दोनों HTML5 में पूरी तरह से मान्य हैं, उनमें से एक को चुनें और उसी के साथ रहें।


पहला यह सबसे अच्छा नहीं है कि यह किसी भी HTML मानक में निर्दिष्ट नहीं है जबकि दूसरा है। पहले केवल ऐतिहासिक कारणों के लिए अनुमति दी जाती है! (पुराने वेब साइटों में एक्सएचटीएमएल / एक्सएमएल उपयोग के साथ सुसंगतता जो ब्राउज़र को तोड़ देगी, उसे अस्वीकार कर देना चाहिए।)
रोब

यकीन नहीं है कि रोब यहाँ क्या कहना चाह रहा है, लेकिन HTML कल्पना यह निर्दिष्ट करती है कि पहला वैध है।
रॉबर्ट मैककी

2

दोनों सही जवाब। HTML5 सख्त नियमों का पालन करता है और HTML5 में हम सभी टैग बंद कर सकते हैं। तो, यह आप पर निर्भर करता है कि आप HTML5 या HTML का उपयोग करें और एक उचित उत्तर का पालन करें।

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

दूसरी संपत्ति अधिक उपयुक्त है।


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

1

-यह टैग खाली है और इसमें केवल विशेषता है। -इस टैग में 'क्लोजिंग' टैग नहीं है।

इसलिए,

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

दोनों HTML5 में भी सही हैं।


पहले सही है! दूसरे को केवल ऐतिहासिक कारणों से अनुमति दी जाती है। (पुराने वेब साइटों में एक्सएचटीएमएल / एक्सएमएल उपयोग के साथ सुसंगतता जो ब्राउज़रों को तोड़ना चाहिए, उसे अस्वीकार कर सकती है।)
रॉब

1

यदि आप कभी भी इसे एक एक्सएचटीएमएल पार्सर के साथ पढ़ने की कोशिश करेंगे तो समापन टैग होना मददगार है। एक किनारे का मामला हो सकता है लेकिन मैं हर समय ऐसा करता हूं। यह होने में कोई बुराई नहीं है, और इसका मतलब है कि मुझे पता है कि हम एक्सएमएल पाठकों की एक सरणी का उपयोग कर सकते हैं, जब वे एक अस्पष्ट टैग को मारते हैं, तो उन्हें उलटना नहीं पड़ेगा।

यदि आप सामग्री को पार्स करने की कोशिश करने वाले नहीं हैं, तो समापन को अनदेखा करें।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.