HTML में आईडी विशेषता के लिए मान्य मूल्य क्या हैं?


2015

idHTML तत्वों के लिए विशेषताएँ बनाते समय , मान के लिए कौन से नियम हैं?


96
यह HTML5 और कल्पना के पिछले संस्करणों के बीच भिन्न होता है। मैंने इसे यहां समझाया: mathiasbynens.be/notes/html5-id-class
Mathias Bynens

5
मैंने देखा है कि SharePoint 2010 ने इस तरह से एक मान प्रदान किया है - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} एक वेब पार्ट के भीतर एक गतिशील रूप से उत्पन्न तालिका के लिए एक पृष्ठ और एक आईडी मान युक्त पृष्ठ। उस तरह के किसी भी लोकप्रिय ब्राउज़र में नहीं टूटा। जावास्क्रिप्ट के माध्यम से इस तरह के आईडी मूल्यों से निपटना मुश्किल है - mvark.blogspot.in/2012/07/…
mvark

3
IDमूल्यों के लिए HTML4 और HTML5 आवश्यकताएँ बहुत भिन्न हैं। यहां HTML5 IDनियमों का एक त्वरित और संपूर्ण विस्तार है: stackoverflow.com/a/31773673/3597276
माइकल बेंजामिन

5
कृपया ध्यान दें: जैसा कि कुछ उत्तरों ने कहा है और एक अवधि का उपयोग करके ( **.**)jQuery के साथ आपको काफी परेशानी में डाल देगा, उदाहरण के लिए, उपयोग करने <input id="me.name" />और फिर वर्ग के साथ टैग की $("#me.name").val()तलाश करने के लिए jQuery का कारण होगा , जिसे कोई नहीं चाहता है वास्तव में!<me>.name
O 'स्पैम

3
@Samwift, नहींं, आपको केवल विशेष वर्णों से बचना होगा क्योंकि डॉक्स कहते हैं । कृपया इस ऑनलाइन डेमो की जाँच करें ।
अल्वारो गोंजालेज

जवाबों:


1702

के लिए एचटीएमएल 4 , जवाब तकनीकी रूप से है:

आईडी और NAME टोकन को एक अक्षर ([A-Za-z]) से शुरू होना चाहिए और किसी भी संख्या में अक्षरों, अंकों ([0-9]), हाइफ़न ("-"), अंडरस्कोर ("_") के बाद होना चाहिए। , कॉलन (":"), और अवधियों ("।")।

HTML 5 और भी अधिक अनुमत है, केवल यह कहते हुए कि एक आईडी में कम से कम एक वर्ण होना चाहिए और इसमें कोई भी वर्ण नहीं हो सकता है।

आईडी विशेषता XHTML में संवेदनशील है ।

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

उदाहरण के लिए, HTML घोषणा <div id="first.name"></div>वैध है। आप सीएसएस में #first\.nameऔर जैसे jQuery में उस तत्व का चयन कर सकते हैं : $('#first\\.name').लेकिन अगर आप बैकस्लैश को भूल जाते हैं $('#first.name'), तो आपके पास आईडी के साथ एक तत्व की तलाश में एक पूरी तरह से वैध चयनकर्ता होगा firstऔर क्लास भी होगा name। यह एक बग है जिसे अनदेखा करना आसान है। आप लंबे समय तक आईडी first-name(अवधि के बजाय एक हाइफ़न) चुनने के बजाय लंबे समय तक खुश रह सकते हैं ।

आप अपने विकास कार्यों को कड़ाई से नामकरण सम्मेलन से चिपकाकर सरल बना सकते हैं। उदाहरण के लिए, यदि आप अपने आप को पूरी तरह से लोअर-केस वर्णों तक सीमित रखते हैं और हमेशा हाइफ़न या अंडरस्कोर (लेकिन दोनों नहीं, एक को चुनें और कभी भी दूसरे का उपयोग न करें) के साथ शब्दों को अलग करें, तो आपके पास एक आसान-से-याद करने वाला पैटर्न है। आपको कभी आश्चर्य नहीं होगा "यह था firstNameया FirstName?" क्योंकि आपको हमेशा पता चलेगा कि आपको टाइप करना चाहिए first_name। ऊंट मामले को प्राथमिकता दें? फिर अपने आप को उस तक सीमित करें, कोई हाइफ़न या अंडरस्कोर नहीं, और हमेशा, पहले चरित्र के लिए ऊपरी-मामले या निचले-मामले का लगातार उपयोग करें, उन्हें मिश्रण न करें।


अब एक बहुत ही अस्पष्ट समस्या यह थी कि कम से कम एक ब्राउज़र, नेटस्केप 6, केस-संवेदी के रूप में गलत तरीके से आईडी विशेषता मानों का इलाज करता था । इसका मतलब है कि यदि आपने id="firstName"अपने HTML (लोअर-केस 'f') और #FirstName { color: red }अपने CSS (अपर-केस 'F') में टाइप किया था , तो वह छोटी गाड़ी ब्राउजर के रंग को लाल करने में विफल रही होगी। इस संपादन के समय, अप्रैल 2015, मुझे आशा है कि आपको नेटस्केप 6 का समर्थन करने के लिए नहीं कहा जा रहा है। इस पर विचार करें कि यह एक ऐतिहासिक फुटनोट है।


78
ध्यान दें कि वर्ग और आईडी गुणों हैं केस-संवेदी XHTML में, अन्य सभी विशेषताओं नहीं हैं। एरिक मेयर ने एक सीएसएस कार्यशाला में भाग लिया जिसका मैंने उल्लेख किया।
जॉन टॉपले

31
यह भी ध्यान दें कि यदि आप किसी तत्व को ID द्वारा लक्षित करने के लिए एक सीएसएस नियम लिखने की कोशिश करते हैं, और एक नंबर के साथ आईडी प्राणियों, यह काम नहीं करेगा। क्षमा!
जैक द ह्यूमन

55
से संबंधित '।' या jQuery का उपयोग कर एक आईडी में ':', jQuery FAQ देखें । इसमें एक छोटा फ़ंक्शन होता है जो आवश्यक भागने से करता है।
वुल्फराम

7
यह idविशेषता है [ w3.org/TR/html4/struct/global.html#adef-idaces(case HTML4 में संवेदनशील) और इसे एक अक्षर (A से Z तक सीमित) के साथ शुरू करना है। यह भी ध्यान दें कि आपका उदाहरण आपके तत्व के पाठ का रंग लाल नहीं होना चाहिए क्योंकि आपका सीएसएस वर्ग के साथ एक तत्व को संदर्भित करता FirstNameहै आपके लिए नहीं id
ऑगस्टस क्लिंग

5
ऑगस्टस ने बताया कि त्रुटि अभी भी मौजूद है। आपके उदाहरण में, यदि आपके पास id="firstName"HTML 4 या HTML 5 और #FirstName { color: red }CSS में है, तो केवल एक छोटी सी ब्राउजर तत्व के रंग को लाल कर देगी
स्टीफन बूहेर

221

से एचटीएमएल 4 विनिर्देश :

आईडी और NAME टोकन को एक अक्षर ([A-Za-z]) से शुरू होना चाहिए और किसी भी संख्या में अक्षरों, अंकों ([0-9]), हाइफ़न ("-"), अंडरस्कोर ("_") के बाद होना चाहिए। , कॉलन (":"), और अवधियों ("।")।

एक सामान्य गलती एक आईडी का उपयोग करना है जो एक अंक से शुरू होती है।


20
ध्यान दें कि HTML5 बहुत अधिक की अनुमति देता है, उदाहरण के लिए HTML4 देखें 456bereastreet.com/archive/201011/… और w3.org/TR/html5/elements.html#the-id-attribute
Mr Shark

IE6 अंडरस्कोर के साथ शुरू होने वाली आईडी का समर्थन नहीं करता था, लेकिन यह वैसे भी मर चुका है।
doc_id 12

2
IE6 के बारे में @rahmanisback, किसी ने ऐसा सोचा होगा, लेकिन मैं अभी एक बैंक के लिए एक प्रस्ताव पूरा कर रहा हूं और वे जोर देकर कहते हैं कि कोई भी विक्रेता जो IE6 में रन बनाता है। यह 30,000 उपयोगकर्ताओं के लिए है। हेक, अगर हम उन्हें अपने ब्राउज़र को उन सभी डेस्कटॉप पर अपडेट करने के लिए प्राप्त कर सकते हैं, तो यह बेरोजगारी की दर को कम करने में मदद कर सकता है।
कार्ल

2
@ कार्ल मुझे यह सुनकर दुख हुआ। IE6 सुरक्षा मुद्दों के बारे में चेतावनी देने के लिए अपने सभी प्रयास करें। हालांकि IE7 जल्द ही नया IE6 होगा, इसलिए हाँ, यह इस उद्योग में एमएस अतीत की गलतियों को दूर करने के लिए हमारा भाग्य प्रतीत होता है।
doc_id

@MrShark दूसरा लिंक टूट गया है; नया लिंक
SWDV

155

आप तकनीकी रूप से कॉलोन और पीरियड का उपयोग आईडी / नाम विशेषताओं में कर सकते हैं, लेकिन मैं दृढ़ता से दोनों से बचने का सुझाव दूंगा।

CSS (और jQuery जैसी कई जावास्क्रिप्ट लाइब्रेरी) में, अवधि और बृहदान्त्र दोनों का विशेष अर्थ है और यदि आप सावधान नहीं हैं तो आप समस्याओं में भाग लेंगे। पीरियड्स क्लास सिलेक्टर्स हैं और कॉलन स्यूडो-सिलेक्टर्स हैं (उदाहरण के लिए, माउस के ऊपर होने पर एक तत्व के लिए ": hover")।

यदि आप एक तत्व "my.cool:thing" आईडी देते हैं, तो आपका सीएसएस चयनकर्ता इस तरह दिखाई देगा:

#my.cool:thing { ... /* some rules */ ... }

जो वास्तव में कह रहा है, "सीएसएस में एक 'मेरे' की आईडी वाला तत्व, 'कूल' का एक वर्ग और सीएसएस-स्पीक में 'चीज़' छद्म चयनकर्ता"।

किसी भी मामले, संख्या, अंडरस्कोर और हाइफ़न के AZ से चिपके रहें। और जैसा कि ऊपर कहा गया है, सुनिश्चित करें कि आपकी आईडी अद्वितीय हैं।

यह आपकी पहली चिंता होनी चाहिए।


21
आप कॉलन और अवधियों का उपयोग कर सकते हैं - लेकिन आपको उन्हें डबल बैकस्लैश का उपयोग करके बचना होगा, जैसे: $ ('# my \\। कूल \\: बात') या किसी चर से बचना: $ ('#' + id.replace) । ( '। \\' / \ ./,) की जगह (/ \: /, '\\:')) groups.google.com/group/jquery-en/browse_thread/thread/...
joeformd

2
अंक क्यों नहीं; क्यों सिर्फ AZ? संख्याएँ बहुत उपयोगी आईडी होती हैं जब ऐसे तत्वों का जिक्र किया जाता है जो किसी संख्या के साथ डेटा से संबंधित होते हैं, जब तक आप संख्या से शुरू नहीं करते हैं।
कोरी

4
बस FYI करें, डैश हैं तकनीकी रूप से हाइफ़न। माइनस साइन ASCII वर्ण सेट में नहीं है। en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes
एंटोन स्ट्रोगोनॉफ

4
यदि आपके पास आईडी में ये अक्षर ( ., :) हैं, और उन्हें हटा नहीं सकते हैं (खांसी ... शेयरपॉइंट), तो आप इसे सीएसएस में आईडी चयनकर्ताओं के बजाय विशेषता चयनकर्ताओं के साथ प्राप्त कर सकते हैं, उदाहरण के लिए [id='my.cool:thing'], हालांकि इस चयनकर्ता के पास कम विशिष्टता होगी आईडी चयनकर्ता, जो अन्य समस्याओं का कारण हो सकता है।
फॉस्ट

2
पुराना, मुझे पता है, लेकिन हाइफ़न पर संख्या और बैकपीडल शामिल करने के लिए अपडेट किया गया
माइकल थॉम्पसन

67

jQuery किसी भी मान्य आईडी नाम को संभालता है। आपको बस मेटाचैकर्स (यानी, डॉट्स, सेमीकोलन, स्क्वायर ब्रैकेट्स ...) से बचना होगा। यह कहने जैसा है कि जावास्क्रिप्ट में केवल उद्धरण के कारण समस्या है क्योंकि आप लिख नहीं सकते हैं

var name = 'O'Hara';

JQuery एपीआई में चयनकर्ता (नीचे नोट देखें)


66

सख्ती से इसका मिलान होना चाहिए

[A-Za-z][-A-Za-z0-9_:.]*

लेकिन jquery में जुकाम की समस्या होती है, इसलिए इनसे बचना बेहतर होगा।


1
या वैकल्पिक रूप से: "तो इससे बचने के लिए बेहतर हो सकता है"। ;)
डोमसन

59

एचटीएमएल 5:

आईडी विशेषता पर अतिरिक्त प्रतिबंधों से छुटकारा मिलता है । केवल शेष आवश्यकताएं (दस्तावेज़ में अद्वितीय होने के अलावा) हैं:

  1. मान में कम से कम एक वर्ण होना चाहिए (खाली नहीं हो सकता)
  2. इसमें कोई भी अंतरिक्ष वर्ण नहीं हो सकता।

पूर्व एचटीएमएल 5:

आईडी से मेल खाना चाहिए:

[A-Za-z][-A-Za-z0-9_:.]*
  1. AZ या az अक्षर से शुरू करना चाहिए
  2. हो सकता है -(हाइफ़न), _(अंडरस्कोर), :(कोलन) और .(अवधि)

लेकिन एक से बचना चाहिए :और .मुस्कराते हुए:

उदाहरण के लिए, एक आईडी को "ab: c" लेबल किया जा सकता है और शैली शीट में #ab: c के रूप में संदर्भित किया जाता है, लेकिन साथ ही तत्व के लिए आईडी होने के नाते, इसका मतलब आईडी "a", वर्ग "b", छद्म हो सकता है। चयनकर्ता "c"। भ्रम से बचने और उपयोग करने से दूर रहने के लिए सबसे अच्छा है। और: पूरी तरह से।


57

HTML5: आईडी और क्लास विशेषताओं के लिए अनुमत मान

HTML5 के रूप में, एक आईडी के मूल्य पर एकमात्र प्रतिबंध हैं:

  1. दस्तावेज़ में अद्वितीय होना चाहिए
  2. कोई भी वर्ण वर्ण नहीं होना चाहिए
  3. कम से कम एक वर्ण होना चाहिए

इसी तरह के नियम कक्षाओं पर लागू होते हैं (विशिष्टता के अलावा, निश्चित रूप से)।

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

एचटीएमएल 4 में, आईडी मान एक पत्र से शुरू होना चाहिए, जिसके बाद केवल अक्षर, अंक, हाइफ़न, अंडरस्कोर, कॉलन और अवधि हो सकती हैं।

HTML5 में ये मान्य हैं:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

बस ध्यान रखें कि एक आईडी के मूल्य में संख्याओं, विराम चिह्न या विशेष वर्णों का उपयोग करने से अन्य संदर्भों (जैसे, CSS, जावास्क्रिप्ट, regex) में परेशानी हो सकती है।

उदाहरण के लिए, निम्न ID HTML5 में मान्य है:

<div id="9lions"> ... </div>

हालाँकि, यह CSS में अमान्य है:

CSS2.1 युक्ति से:

4.1.3 वर्ण और मामला

CSS में, पहचानकर्ता (चयनकर्ताओं में तत्व नाम, वर्ग और ID सहित) में केवल वर्ण [a-zA-Z0-9] और ISO 10646 वर्ण U + 00A0 और उच्चतर हो सकते हैं, साथ ही हाइफ़न (-) और अंडरस्कोर ( _); वे एक अंक, दो हाइफ़न या एक हाइफ़न के बाद एक अंक से शुरू नहीं कर सकते हैं

ज्यादातर मामलों में आप उन संदर्भों में पात्रों से बच सकते हैं जहां उनके पास प्रतिबंध या विशेष अर्थ है।


W3C संदर्भ

एचटीएमएल 5

३.२.५.१ id गुण

idविशेषता अपने तत्व के अनन्य पहचानकर्ता (ID) निर्दिष्ट करता है।

तत्व के होम सबट्री में सभी आईडी के बीच मान अद्वितीय होना चाहिए और इसमें कम से कम एक वर्ण होना चाहिए। मान में कोई स्थान वर्ण नहीं होना चाहिए।

नोट: आईडी किस रूप में ले सकता है, इस पर कोई अन्य प्रतिबंध नहीं हैं; विशेष रूप से, आईडी में सिर्फ अंक हो सकते हैं, एक अंक से शुरू हो सकते हैं, एक अंडरस्कोर से शुरू हो सकते हैं, जिसमें बस विराम चिह्न शामिल हैं, आदि।

३.२.५. class attribute गुण

यदि निर्दिष्ट किया गया है, तो विशेषता में एक मूल्य होना चाहिए जो कि विभिन्न वर्गों के प्रतिनिधित्व वाले अंतरिक्ष-अलग टोकन का एक सेट है जो तत्व से संबंधित है।

एक HTML तत्व ने जिन वर्गों को इसे सौंपा है उनमें सभी वर्ग शामिल हैं जब वर्ग विशेषता का मान रिक्त स्थान पर विभाजित होता है। (डुप्लिकेट को अनदेखा कर दिया जाता है।)

टोकनों पर कोई अतिरिक्त प्रतिबंध नहीं हैं लेखक वर्ग विशेषता में उपयोग कर सकते हैं, लेकिन लेखकों को उन मूल्यों का उपयोग करने के लिए प्रोत्साहित किया जाता है जो सामग्री की प्रकृति का वर्णन करने वाले मूल्यों के बजाय सामग्री की वांछित प्रस्तुति का वर्णन करते हैं।


34

व्यवहार में, कई साइटें idसंख्याओं से शुरू होने वाली विशेषताओं का उपयोग करती हैं , भले ही यह तकनीकी रूप से मान्य HTML नहीं है।

एचटीएमएल 5 मसौदा विनिर्देश करने के नियम loosens idऔर nameविशेषताओं: वे अब सिर्फ अपारदर्शी श्रृंखलाएं जिनमें रिक्ति नहीं हो सकती हैं।


32

हाइफ़न, अंडरस्कोर, पीरियड, कॉलन, नंबर और अक्षर सभी सीएसएस और JQuery के उपयोग के लिए मान्य हैं। निम्नलिखित कार्य करना चाहिए लेकिन यह पूरे पृष्ठ में अद्वितीय होना चाहिए और एक अक्षर [A-Za-z] से शुरू होना चाहिए।

कॉलन और पीरियड्स के साथ काम करने के लिए थोड़ा और काम करने की जरूरत है लेकिन आप इसे निम्न उदाहरण के रूप में दिखा सकते हैं।

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

25

एचटीएमएल 5

यह ध्यान में रखते हुए कि आईडी अद्वितीय होनी चाहिए, अर्थात। किसी डॉक्यूमेंट में मल्टीपल एलिमेंट नहीं होना चाहिए, जिसमें समान आईडी वैल्यू हो।

HTML5 में आईडी सामग्री के नियम (अद्वितीय होने के अलावा) हैं:

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

ID (från MDN) के बारे में यह W3 युक्ति है:

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

और जानकारी:

  • W3 - वैश्विक विशेषताएँ (id)
  • एमडीएन श्रद्धांजलि (id)

18

इसमें एक अवधि के साथ एक आईडी का संदर्भ देने के लिए आपको बैकस्लैश का उपयोग करने की आवश्यकता है। सुनिश्चित नहीं है कि अगर इसकी हाइफ़न या अंडरस्कोर के लिए समान है। उदाहरण के लिए: HTML

<div id="maintenance.instrumentNumber">############0218</div>

सीएसएस

#maintenance\.instrumentNumber{word-wrap:break-word;}

3
हाइफ़न और अंडरस्कोर को आमतौर पर भागने की ज़रूरत नहीं है। हालांकि, इसका अपवाद यह है कि यदि हाइफ़न पहचानकर्ता की शुरुआत में दिखाई देता है और उसके बाद एक अन्य हाइफ़न (जैसे। \--abc) या एक अंक (जैसे। \-123) होता है।
श्रीमान

16

HTML 4 कल्पना से ...

आईडी और NAME टोकन को एक अक्षर ([A-Za-z]) से शुरू होना चाहिए और किसी भी संख्या में अक्षरों, अंकों ([0-9]), हाइफ़न ("-"), अंडरस्कोर ("_") के बाद होना चाहिए। , कॉलन (":"), और अवधियों ("।")।

संपादित करें: डीओएच! बटन को फिर से हराया!


16

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

आपके पास कई आईडी हो सकती हैं, लेकिन सभी का एक अद्वितीय मूल्य होना चाहिए।

दूसरी ओर, वर्ग-तत्व है। आईडी की तरह, यह कई बार दिखाई दे सकता है, लेकिन मूल्य का उपयोग बार-बार किया जा सकता है।


12

तत्व के लिए एक विशिष्ट पहचानकर्ता।

किसी डॉक्यूमेंट में एक से अधिक एलिमेंट नहीं होने चाहिए जो एक ही आईडी वैल्यू के हों।

निम्नलिखित प्रतिबंधों के साथ कोई भी स्ट्रिंग:

  1. कम से कम एक वर्ण लंबा होना चाहिए
  2. कोई भी अंतरिक्ष वर्ण नहीं होना चाहिए:

    • U + 0020 स्पेस
    • U + 0009 चार्टर टैब (टैब)
    • U + 000A लाइन फ़ीड (LF)
    • U + 000C FORM फ़ीड (FF)
    • U + 000D CARRAGE RETURN (CR)

पात्रों को छोड़कर ASCII letters and digits, '_', '-' and '.'संगतता समस्याओं का कारण हो सकता है, क्योंकि उन्हें अनुमति नहीं थी HTML 4। हालांकि इस प्रतिबंध को हटा दिया गया है HTML 5, एक आईडी को संगतता के लिए एक पत्र के साथ शुरू करना चाहिए।


11

ऐसा प्रतीत होता है कि यद्यपि कॉलोन (:) और अवधियों (।) एचटीएमएल कल्पना में मान्य हैं, वे सीएसएस में आईडी चयनकर्ताओं के रूप में अमान्य हैं, इसलिए यदि आप उन्हें इस उद्देश्य के लिए उपयोग करने का इरादा रखते हैं तो शायद सबसे अच्छा परहेज करें।


@MathiasBynens लिंक टूट गया है। अब यह mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
Oriol

यदि आप उन्हें सही तरीके से छोड़ते हैं तो वे अमान्य नहीं हैं। Mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
Mathias Bynens

10

के लिये HTML5

तत्व के होम सबट्री में सभी आईडी के बीच मान अद्वितीय होना चाहिए और इसमें कम से कम एक वर्ण होना चाहिए। मान में कोई स्थान वर्ण नहीं होना चाहिए।

कम से कम एक वर्ण, कोई स्थान नहीं।

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


9
  1. आईडी आपके लेआउट के नामकरण के लिए सबसे उपयुक्त हैं, इसलिए आईडी और कक्षा के लिए एक ही नाम नहीं देना चाहिए
  2. आईडी अल्फ़ान्यूमेरिक और विशेष वर्णों की अनुमति देता है
  3. लेकिन # : . * !प्रतीकों का उपयोग करने से बचें
  4. रिक्त स्थान की अनुमति नहीं है
  5. अंकों के साथ शुरू नहीं किया गया या एक अंकों के बाद एक हाइफ़न
  6. अक्षर संवेदनशील
  7. कक्षा चयनकर्ताओं का उपयोग करने की तुलना में आईडी चयनकर्ताओं का उपयोग तेजी से होता है
  8. लंबे सीएसएस वर्ग या आईडी नियम नामों के लिए हाइफ़न "-" (अंडरस्कोर "_" भी उपयोग कर सकते हैं लेकिन एसईओ के लिए अच्छा नहीं)
  9. यदि किसी नियम के पास उसके चयनकर्ता के रूप में एक आईडी चयनकर्ता है, तो नियम में टैग का नाम न जोड़ें। चूंकि आईडी अद्वितीय हैं, इसलिए टैग नाम जोड़ना मिलान प्रक्रिया को अनावश्यक रूप से धीमा कर देगा।
  10. HTML5 में, आईडी विशेषता का उपयोग किसी भी HTML तत्व पर किया जा सकता है और HTML 4.01 में, आईडी विशेषता का उपयोग नहीं किया जा सकता है: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

"अंडरस्कोर भी उपयोग कर सकते हैं लेकिन एसईओ के लिए अच्छा नहीं है": जब से खोज इंजन सीएसएस वर्ग या आईडी नामों में कोई रुचि लेते हैं?
निक राइस

9

कोई भी अल्फा-न्यूमेरिक मूल्य और " - " और " _ " मान्य है। लेकिन, आपको आईडी का नाम AZ या az के बीच के किसी भी अक्षर से शुरू करना चाहिए ।



4

HTML में

ID की शुरुआत {AZ} या {az} से होनी चाहिए। आप डिजिट्स, पीरियड, हाइफ़न, अंडरस्कोर, कॉलन जोड़ सकते हैं

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

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

लेकिन भले ही आप Colons (:) या अवधि (।) के साथ आईडी बना सकते हैं, लेकिन सीएसएस के लिए इन आईडी का चयनकर्ता के रूप में उपयोग करना कठिन है । मुख्य रूप से जब आप छद्म तत्वों का उपयोग करना चाहते हैं (: पहले, बाद:)।

जेएस में भी इन आईडी का चयन करना कठिन है। तो आपको पहले चार आईडी के आस-पास कई डेवलपर द्वारा पसंद किए गए का उपयोग करना चाहिए और यदि यह आवश्यक है तो आप पिछले दो का भी उपयोग कर सकते हैं।



2

ES2015 के बाद से हम ID के लिए सभी- यूनिकोड वर्णों का उपयोग कर सकते हैं , अगर दस्तावेज़ चार्ट UTB8 पर सेट है।

यहां देखें: https://mothereff.in/js-variables

यहां छवि विवरण दर्ज करें

इसके बारे में पढ़ें: https://mathiasbynens.be/notes/javascript-identifiers-es6

ES2015 में, पहचानकर्ताओं को $, _, या यूनिकोड व्युत्पन्न कोर संपत्ति ID_Start के साथ किसी भी प्रतीक के साथ शुरू करना चाहिए।

पहचानकर्ता के बाकी हिस्से में $, _, U + 200C शून्य चौड़ाई गैर-योजक, U + 200D शून्य चौड़ाई योजक, या यूनिकोड व्युत्पन्न कोर गुण ID_Continue के साथ कोई भी प्रतीक हो सकता है।

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"
div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}
<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">


क्या आपको इसका इस्तेमाल करना चाहिए? शायद एक अच्छा विचार नहीं है!

इसके बारे में पढ़ें: https://stackoverflow.com/a/52799593/2494754


-4

अक्षर- > कैप और छोटे अंक-
> 0-9
विशेष वर्ण-> ':', '-', '', '', ''।

प्रारूप या तो 'से शुरू होना चाहिए।' या वर्णमाला, इसके बाद अधिक वर्णमाला या संख्याओं के विशेष वर्णों में से एक। आईडी फ़ील्ड का मान किसी '_' पर समाप्त नहीं होना चाहिए।
इसके अलावा, रिक्त स्थान की अनुमति नहीं है, अगर प्रदान की जाती है, तो उन्हें विभिन्न मूल्यों के रूप में माना जाता है, जो आईडी विशेषताओं के मामले में मान्य नहीं है।

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