HTML में id एट्रिब्यूट के लिए वैध मान क्या हैं?

परिचय

id एट्रिब्यूट्स के लिए वैध मान HTML4 और HTML5 में अलग-अलग हैं।

HTML5

HTML5 में नियम बहुत सरल हैं:

• स्ट्रिंग खाली नहीं होनी चाहिए
• कम से कम एक कैरेक्टर होना चाहिए
• स्पेस कैरेक्टर्स अनुमति नहीं हैं
• कोई अन्य प्रतिबंध नहीं - यूनिकोड कैरेक्टर्स, सिम्बल्स, संख्याओं से शुरू होना, सब अनुमत है

वैध HTML5 id उदाहरण

<p id="test">यह डेमो टेक्स्ट है।</p> 
<p id="#test"> यह डेमो टेक्स्ट है।</p>
<p id="123">संख्या से शुरू</p>
<p id="मेरा-आईडी">हिंदी में</p>
<p id="🚀">इमोजी भी</p>
<p id="_private">अंडरस्कोर से शुरू</p>
<p id="-dash">डैश से शुरू</p>

HTML4

HTML4 में सख्त नियम थे:

• ID और NAME टोकन्स एक अक्षर ([A-Za-z]) से शुरू होने चाहिए
• इसके बाद अक्षर, अंक ([0-9]), हाइफन ("-"), अंडरस्कोर ("_"), कोलन (":"), और पीरियड (".") आ सकते हैं
• संख्या से शुरू नहीं हो सकता
• स्पेस अनुमति नहीं

वैध HTML4 id उदाहरण

<p id="validId">वैध</p>
<p id="valid-id">वैध</p>
<p id="valid_id">वैध</p>
<p id="valid.id">वैध</p>
<p id="valid:id">वैध (लेकिन CSS में एस्केप करना पड़ता है)</p>

अवैध HTML4 id उदाहरण

<p id="123invalid">अवैध - संख्या से शुरू</p>
<p id="invalid id">अवैध - स्पेस</p>
<p id="invalid#id">अवैध - # सिम्बल</p>

CSS में ID सेलेक्टर्स के लिए एस्केपिंग

अगर ID में विशेष कैरेक्टर्स हैं (HTML5 में अनुमत), तो CSS में उन्हें एस्केप करना पड़ता है:

/* HTML: <div id="my:id"> </div> */
#my\:id { color: red; } /* कोलन एस्केप किया गया */

/* HTML: <div id="123id"> </div> */
#\31 23id { color: red; } /* यूनिकोड एस्केप */

/* HTML: <div id="my.id"> </div> */
#my\.id { color: red; } /* डॉट एस्केप किया गया */

सर्वोत्तम अभ्यास (आधुनिक)

1. केवल लोअरकेस उपयोग करें - id="my-element"
2. केबाब-केस (kebab-case) उपयोग करें - शब्दों को हाइफन से अलग करें
3. विवरणात्मक नाम - id="main-navigation" न कि id="nav1"
4. संख्या से शुरू न करें - हालांकि HTML5 अनुमति देता है, लेकिन CSS में एस्केप करना पड़ता है
5. विशेष कैरेक्टर्स से बचें - केवल अक्षर, अंक, हाइफन, अंडरस्कोर
6. यूनिक रखें - पूरे दस्तावेज़ में प्रत्येक ID अद्वितीय होना चाहिए

JavaScript में ID एक्सेस

// getElementById - सभी ब्राउज़र्स में काम करता है
const element = document.getElementById('my-id');

// querySelector - CSS सेलेक्टर सिंटैक्स (एस्केपिंग आवश्यक)
const element = document.querySelector('#my\\:id'); // डबल एस्केप

// ग्लोबल वेरिएबल (नहीं अनुशंसित) - ID वाले एलिमेंट्स ग्लोबल बन जाते हैं
// console.log(myId); // काम करता है लेकिन खराब अभ्यास

सामान्य गलतियाँ

• डुप्लीकेट IDs - अमान्य HTML, अप्रत्याशित व्यवहार
• स्पेस शामिल करना - id="my id" अमान्य है
• केस सेंसिटिविटी भूलना - IDs केस-सेंसिटिव हैं
• CSS/JS में विशेष कैरेक्टर्स एस्केप न करना