क्या मुझे शब्दों को उजागर करने के लिए एक HTML पृष्ठ में गैर-मानक टैग का उपयोग करना चाहिए?


20

मैं यह जानना चाहूंगा कि क्या कुछ कस्टम उद्देश्यों के लिए HTML पेज में गैर-मानक टैग का उपयोग करना एक अच्छा अभ्यास या कानूनी है।

उदाहरण के लिए:

लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। Nullam resultat, felis sit amet suscipit laoreet, nisi arcu accumsan arcu, vel pulvinar odio magna suscipit mi।

मैं "कंसिटेक्टुर एप्रिसिंग एलीट" को महत्वपूर्ण और "निसी अर्कु एम्सुसन आर्कु" को हाइलाइट करना चाहता हूं।

तो HTML में मैं डालूँगा:

लॉरेम इप्सम डोलर अमेट, <महत्वपूर्ण> कंसिटेक्टर एप्रिसिंग एलीट </ महत्वपूर्ण>। Nullam resultat, felis sit amet suscipit laoreet, <highlight> nisi arcu accumsan arcu </ highlighted, vel pulvinar odio magna suscipit mi।

और सीएसएस में:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

हालाँकि, चूंकि ये मान्य HTML टैग नहीं हैं, क्या यह ठीक है?


56
<span class=..>?
जेक बर्गर

12
परिभाषा के अनुसार, यदि वे कस्टम हैं तो वे HTML टैग नहीं हैं (जो मानकीकृत हैं)। वे ऐसे तत्व हैं जिनका कोई विशिष्ट अर्थ नहीं है।
ऊब


14
<em>मूल रूप से आपका है <important>और <mark>आपका है <highlight>
पीटर सी।

3
आप सही हे। एचटीएमएल 5 कल्पना कहते <strong>महत्व के लिए अधिक उपयुक्त से है <em>है। मेरी गलती।
पीटर सी

जवाबों:


50

नहीं, यह एक अच्छा अभ्यास नहीं है। आपको पहले से ही अर्थपूर्ण, सार्थक टैग का उपयोग करना चाहिए - शायद <em>इस मामले में - और अपनी डिजाइन आवश्यकताओं को प्राप्त करने के लिए CSS शैलियों को लागू करें।


3
संभवतः वह कक्षाओं से परिचित नहीं है। वाक्यविन्यास है: HTML <em class="myclass">sample text</em>सीएसएस .myclass: { background: red; etc. } आप अधिकांश टैगों को कक्षाएं दे सकते हैं, न कि केवल em। आमतौर पर divया spanपाठ के लिए। यह भी देखें
ब्लूराजा - डैनी पफ्लुगुएफ्ट

@ BlueRaja-DannyPflughoeft - कोड भर में बिखरे वर्गों को भी इसे संभालने का गलत तरीका है। आप शायद एक वर्ग या दो कंटेनरों के साथ वंशज चयनकर्ताओं का उपयोग कर बेहतर कर सकते हैं।
व्याट बार्नेट

14

आपका प्रश्न पूछा गया कि क्या यह " अच्छा अभ्यास या कानूनी " है।

सबसे पहले: यह सॉर्ट-ऑफ लीगल है - कम से कम, इसे सहन किया जाता है। ब्राउज़रों को हमेशा उन टैगों से सामना करने के लिए प्रोग्राम किया जाता है जिन्हें वे नहीं समझते हैं, भले ही इसका मतलब है कि वे उन्हें अनदेखा करते हैं। यह HTML कोड:

Some <b>bold</b> and some <slanted>italic</slanted>.

ऐसा प्रतीत होगा कि यह हर एक ब्राउज़र है:

कुछ बोल्ड और कुछ इटैलिक।

इसके अलावा, अधिकांश ब्राउज़र आपको सीएसएस में उस तत्व को स्टाइल करने की अनुमति देगा। तो अगर आप निम्नलिखित सीएसएस परिभाषा जोड़ते हैं:

slanted { font-style: italic; }

अधिकांश ब्राउज़र अब इस प्रकार प्रस्तुत करेंगे:

कुछ बोल्ड और कुछ इटैलिक

वास्तव में: इसे अपने लिए आज़माएँ । संयोग से, यह एक ट्रिक वेब डेवलपर्स है जो नए एचटीएमएल 5 टैगों को पुराने ब्राउज़रों में सही ढंग से प्रदर्शित करने की कोशिश करने और सुनिश्चित करने के लिए उपयोग करता है।

हालाँकि, यह पूरी तस्वीर नहीं है। पूर्ण उत्तर नहीं है, यह अच्छा अभ्यास नहीं है । आपने " अधिकांश ब्राउज़र" वाक्यांश के मेरे उपयोग पर ध्यान दिया होगा । दुर्भाग्य से, IE9 से पहले इंटरनेट एक्सप्लोरर के सभी संस्करण इस व्यवहार को लागू करने में विफल रहते हैं। IE8 और पहले के संस्करण में, ऊपर का कोड अभी भी इस तरह दिखेगा:

कुछ बोल्ड और कुछ इटैलिक।

डाइव इनटू एचटीएमएल 5 में समस्या का एक उत्कृष्ट विस्तृत विवरण है , जहां आपको वर्कअराउंड का विवरण भी मिलेगा। हालाँकि, वर्कअराउंड को जावास्क्रिप्ट की आवश्यकता होती है इसलिए यह शुद्ध HTML समाधान नहीं है और सभी परिदृश्यों में काम नहीं करेगा।

तो, संक्षिप्त उत्तर: केवल मानक HTML तत्वों से चिपके रहें और उन्हें अपने सीएसएस में पसंद के अनुसार शैली दें।


यह कानूनी नहीं है। विनिर्देश परिभाषित करता है कि किन तत्वों की अनुमति है। लेखक की त्रुटियों से उबरने की ब्राउज़र की क्षमता लेखक की त्रुटियों को सही नहीं बनाती है।
क्वेंटिन

मैं कहां से पा सकता हूं यह कानूनी नहीं है? मैंने HTML स्पेक्स में खोज करने की कोशिश की, लेकिन एक अच्छा संदर्भ नहीं मिल पाया।
डिब्बीके

2
@DavidDorward हां, मैं आपकी बात देखता हूं। मेरे कहने का मतलब यह था कि ब्राउज़र्स गारंटी देते हैं कि जब वे अनजान टैग देखते हैं तो टूटने न दें - जैसा कि बिना गारंटी टैग की कमी के विपरीत है। इसलिए शायद यहाँ सही शब्द कानूनी के बजाय "सहन" है। मैंने उसी हिसाब से जवाब अपडेट किया है।
मार्क व्हिटकर

@DavidDorward यह बिल्कुल कानूनी है। W3C एचटीएमएल 5 युक्ति में इतनी दूर चला गया था कि "एचटीएमएल तत्वों के लिए एचटीएमएल तत्वों का उपयोग किया जाना चाहिए जो इस विनिर्देश द्वारा परिभाषित नहीं हैं।" अगर यह कानूनी नहीं होता, तो वे ऐसा कहते। मुझे लगता है कि कोई डस्टअप बन रहा है या नहीं, अज्ञात या माइक्रोफ़ॉर्मेट्स वेब के लिए बेहतर अर्थ-संबंधी दृष्टिकोण हैं। चाहे जो भी बेहतर हो, दोनों कानूनी हैं।
भांग

1
विनिर्देशन से : HTML विनिर्देशन के पिछले संस्करणों के विपरीत, यह विनिर्देश कुछ दस्तावेज़ों में अमान्य दस्तावेज़ों के साथ-साथ वैध दस्तावेज़ों के लिए आवश्यक प्रसंस्करण को परिभाषित करता है। हालांकि, भले ही अमान्य सामग्री का प्रसंस्करण ज्यादातर मामलों में अच्छी तरह से परिभाषित हो, दस्तावेजों के लिए अनुरूपता की आवश्यकताएं अभी भी महत्वपूर्ण हैं
क्वेंटिन

8

यदि आपको <important/>विशिष्ट कारणों के शब्दार्थ को रखने की आवश्यकता है , तो आप अपने कस्टम टैग को मान्य HTML में बदलने के लिए XSL का उपयोग कर सकते हैं। आप इस विषय पर यहाँ और अधिक पढ़ सकते हैं:

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html

आपके पास अभी भी <important/>अंतिम HTML आउटपुट नहीं हो सकता है, लेकिन आपके पास ऐसा कुछ होने के लिए स्वचालित रूप से परिवर्तित हो सकता है <span class="important"...


8

यहाँ कुछ उत्तर दिए गए हैं जो बताते हैं कि आपको कभी भी अपने कस्टम टैग क्यों नहीं बनाने चाहिए। यकीनन, वे सभी गलत हैं।

WHATWG के कस्टम टैग के विश्लेषण से यह निष्कर्ष निकलता है कि वे स्वीकार्य हैं, मानक अनुरूप हैं (चूंकि गैर-मान्यता प्राप्त टैग से निपटने को अच्छी तरह से परिभाषित किया गया है) और उदाहरण के लिए, जेनेरिक डिव को स्टाइल करना अधिक सुलभ है।

<x-accordion> </ x-accordion> हर यांत्रिक अर्थों में <div class = "accordion"> </ div> से भी बदतर नहीं है। "X-accordion" (या घटक मॉडल समर्थन) के लिए परिभाषा की अनुपस्थिति में, दोनों का मतलब एक ही है, दोनों को एक ही तरीके से स्टाइल किया जा सकता है। एक HTMLUnognElement है, दूसरा HTMLDivElement है, और उनकी एपीआई सतह समान है।

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

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

उस सभी ने कहा, यदि कोई टैग युक्ति में मौजूद है (<mark>) जो स्पष्ट रूप से आपके द्वारा बनाए गए टैग के अर्थ अर्थ को कवर करता है (<highlight>), तो निश्चित रूप से मौजूदा टैग का उपयोग करना बेहतर होगा।


यदि कोई कुछ पाठ (जैसे "Dm7") को चिह्नित करना चाहता है, तो उस पर क्लिक करने से डी मामूली सातवें कॉर्ड खेलने के लिए एक एनिमेटेड समझौते का कारण होगा, क्या "x-accordion" दृष्टिकोण एक अच्छा तरीका होगा? यदि समझौते के लिए जावास्क्रिप्ट को अतिरिक्त जानकारी की आवश्यकता होगी, तो यह कैसे सबसे अच्छा होना चाहिए? के रूप में <x-accordion data-notes="D2 D3 F3 A3 C4">Dm7</x-accordion>?
सुपरकैट

5

आप कस्टम सीएसएस का उपयोग <em />करके <strong />इसे प्रदर्शित करने के तरीके को बदल सकते हैं।

मजबूत, मजबूत महत्व को संदर्भित करता है।

जोर, बढ़े हुए जोर को संदर्भित करता है।


4

व्यावहारिक पक्ष पर, हाइलाइटिंग के लिए नए टैग का उपयोग करना अनावश्यक है। यदि आप इटैलिक्स को डिफ़ॉल्ट (नॉन-सीएसएस) रेंडरिंग के रूप में पसंद करते हैं या यदि आप डिफ़ॉल्ट के रूप में बेंडिंग पसंद करते हैं तो आप इसका उपयोग emया iटैग कर सकते हैं । यदि, किसी कारण से, आप सामान्य पाठ के रूप में डिफ़ॉल्ट रेंडरिंग पसंद करते हैं, अर्थात कोई हाइलाइटिंग, उपयोग नहीं करते हैं । प्रत्येक मामले में, आप इस उपयोग को मार्कअप के लिए अन्य उपयोग से अलग करने के लिए एक विशेषता का उपयोग कर सकते हैं।strongbspanclass

एचटीएमएल स्पेसिफिकेशंस और (एचटीएमएल 5) ड्राफ्ट अस्पष्ट हैं क्योंकि इन तत्वों के शब्दार्थ हैं, लेकिन इससे किसी बड़े सिरदर्द का कारण नहीं है।


7
-1 यह बुरी सलाह है। emऔर strongटैग जब यह ऐसा करने के लिए अर्थ की दृष्टि से सही है, जब नहीं आप बोल्ड या इटैलिक चाहते इस्तेमाल किया जाना चाहिए। आप सीएसएस के साथ प्रस्तुति को बदल सकते हैं।
असंतुष्टGoGoat

2

नहीं, हालाँकि इसे XHTML में किसी अन्य नामस्थान से नए टैग जोड़ने की अनुमति है, HTML टैग्स की प्रोसेसिंग जो निर्दिष्ट नहीं है, दृढ़ता से हतोत्साहित किया जाता है।


2

ठीक है, यह कानूनी है कि आप इसे करने के लिए गिरफ्तार नहीं होने जा रहे हैं। लेकिन अगर W3C के हत्यारे आपके दरवाजे पर दिखाई देते हैं, तो आश्चर्यचकित न हों।

सबसे पहले, अन्य देवों को पता नहीं है कि उनका क्या मतलब है। के मामले में <important>और <highlight>वे हैं, लेकिन यदि आप कुछ का उपयोग करते हैं, जैसे, कहते हैं, <set>तो आप जानते होंगे कि आप गणितीय सेट का उल्लेख कर रहे हैं, लेकिन आपके कोड को पढ़ने वाला कोई व्यक्ति इसे किसी और चीज़ के लिए गलती कर सकता है। जवाब देने के लिए वहाँ की युक्ति के बिना, बहुत भ्रम हो सकता है।

दूसरा, क्या होगा यदि W3C यह तय करता है कि एक <important>तत्व एक अच्छा विचार है, लेकिन सोचता है कि इसका अर्थ तत्काल सूचना होना चाहिए, जैसे

<important>This site is going to be down for maintenance 2/29/2012.</important>

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

तीसरा, IE <9 आपको छोटे तत्वों के बिना अज्ञात तत्वों को स्टाइल नहीं करने देता है। बड़ी बात नहीं है, लेकिन कष्टप्रद है।

अंत में, इस मामले में, <important>और <highlight>पहले से ही मौजूद है! <strong>और <mark>जो आप ढूंढ रहे हैं। HTML5 कल्पना के अनुसार

मजबूत तत्व अपनी सामग्री के लिए मजबूत महत्व का प्रतिनिधित्व करता है।

तथा

चिह्न तत्व संदर्भ उद्देश्यों के लिए चिह्नित या प्रलेखित एक दस्तावेज़ में पाठ की एक श्रृंखला का प्रतिनिधित्व करता है ...

यदि आप इसे "संदर्भ उद्देश्यों" के लिए उपयोग नहीं कर रहे हैं, तो <span>एक कक्षा के साथ ठीक होगा।


2

http://www.w3.org/TR/html5/elements.html

यह संशोधन 1.5612 है।

लेखकों को उन तत्वों, विशेषताओं या विशेषता मानों का उपयोग नहीं करना चाहिए जिन्हें इस विनिर्देश या अन्य लागू विनिर्देशों द्वारा अनुमति नहीं है, क्योंकि ऐसा करने से भविष्य में भाषा को विस्तारित करने के लिए काफी कठिन हो जाता है।


1
यह एक महान जवाब की शुरुआत है; हालाँकि, महान होने के लिए, दिशानिर्देश को लिखे जाने के कुछ कारणों को जोड़ना सहायक होगा। इसके अलावा वैकल्पिक रणनीतियों के अलावा जो समान प्रभाव की अनुमति देते हैं, लेकिन दिशानिर्देश को फिट करने के लिए अक्सर अनुकूल रूप से देखा जाता है।
20

1

हर किसी को अनदेखा करने से यहाँ राय समाप्त हो जाती है।

यह दो बहुत महत्वपूर्ण कारणों से अच्छा अभ्यास नहीं है:

सबसे पहले, यह पूरी तरह से संभव है कि कुछ बिंदु पर मानकों की समिति एक टैग को शामिल करने का फैसला करती है <important>जो इसके लिए आपके उपयोग को समाप्त कर रही है। निश्चित रूप से, इसमें थोड़ा समय लग सकता है .. लेकिन इसका संभावित समय आपको बर्बाद करने वाला है।

दूसरा, (यह वास्तविक कारण है) प्रोग्रामर जो आपके कोड को विरासत में देता है, वह या तो लगातार अपने गैर-मानक दृष्टिकोण पर "wtf" कहने जा रहा है, जबकि उस सभी को बाहर कर रहा है, या, समान रूप से संभव है, आप क्या कर रहे हैं, यह पूरी तरह से उलझन में है। किया है और बस निराशा में छोड़ दिया है।

तो, अच्छा हो। आप कभी नहीं जानते हैं, आप किसी दिन नौकरी के लिए उनसे पूछ सकते हैं।


0

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

आप w3c के लिए उनके लिए एक उपयोग-मामला प्रस्तुत करने का प्रयास कर सकते हैं, लेकिन मुझे संदेह है कि यह कहीं भी मिलेगा।


0

नहीं, यह अन्य सभी उत्तरों द्वारा आपूर्ति किए गए सभी कारणों के लिए अच्छा अभ्यास नहीं है। उन बिंदुओं को दोहराने के बजाय, मैं एक विकल्प प्रस्तुत करना चाहूंगा जिसे मैंने उन उत्तरों में नहीं देखा है!

इस मामले में कि कोई मौजूदा टैग नहीं हैं, जिसका अर्थ अर्थ आपके लक्ष्यों से मेल खाता है, आप सीएसएस के संयोजन और data-*HTML विशेषता में नए विशेषता का उपयोग कर सकते हैं । बेशक, यह आपके द्वारा चुने गए किसी भी टैग के साथ काम करेगा।

उदाहरण:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

जब तक यह एक सही समाधान नहीं है, क्योंकि data-*विशेषताओं के लिए कोई अच्छी तरह से परिभाषित अर्थ अर्थ नहीं है , यह कम से कम आपको उन लोगों को अतिरिक्त जानकारी प्रदान करने की अनुमति देगा जो आपकी data-typeविशेषता का अर्थ जानते हैं ।

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