HTML id एट्रिब्यूट: यूनिक आइडेंटिफायर और CSS/JS सिलेक्टर्स

HTML id एट्रिब्यूट एक एलिमेंट को यूनिक आइडेंटिफायर आवंटित करता है ताकि उस एलिमेंट को CSS और जावास्क्रिप्ट एप्लिकेशन के लिए अलग से पहचाना जा सके। एक ही HTML पेज पर दो एलिमेंट्स का समान id नहीं हो सकता। IDs ऑक्टोथोर्प (#) से शुरू होते हैं।

नोट: HTML5 के अनुसार, संख्या से शुरू होने वाले IDs की अनुमति है।

उदाहरण: गेम में id का उपयोग

<!DOCTYPE html>
<html>
<head>
  <title>MouseEvent clientX</title>
  <style>
    * { padding: 2px; margin: 5px; }
    form { width: 70%; margin: 0 auto; text-align: center; }
    #outer { width: 70%; margin: 0 auto; padding: 0; text-align: center; border: 1px solid black; height: 105px; background-color: #28a745; }
    input[type="button"] { border-radius: 10px; }
    #upper { border-bottom: 1px solid black; height: 40px; margin: 0 0 15px 0; background-color: #DC3545; }
    #lower { border-top: 1px solid black; height: 40px; margin: 15px 0 0 0; background-color: #DC3545; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>MouseEvent-clientX</legend>
      <div id="outer">
        <div id="upper"><h2>खतरा</h2></div>
        <div id="lower"><h2>खतरा</h2></div>
      </div>
      <input type="button" id="start" value="शुरू" onclick="gameStart()">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById('divDisplay');
    var gameDisplay = document.getElementById('outer');
    function playGame(event) {
      var x = event.clientX;
      var y = event.clientY;
      if (y > 95 && y < 110) {
        divDisplay.textContent = 'जारी रखें!';
        if (x === 439) {
          divDisplay.textContent = 'बधाई! आपने कर दिखाया!';
          gameDisplay.removeEventListener('mousemove', playGame);
        }
      } else {
        divDisplay.textContent = 'आप खतरे के क्षेत्र में चले गए। आप हार गए!';
        gameDisplay.removeEventListener('mousemove', playGame);
      }
    }
    function gameStart() {
      gameDisplay.addEventListener('mousemove', playGame);
    }
  </script>
</body>
</html>

आउटपुट परिदृश्य

1. 'शुरू' बटन क्लिक और कर्सर हरे (सुरक्षित) क्षेत्र में: "जारी रखें!"
2. 'शुरू' बटन क्लिक और कर्सर हरे क्षेत्र के अंत में: "बधाई! आपने कर दिखाया!"
3. 'शुरू' बटन क्लिक और कर्सर लाल (खतरे) क्षेत्र में: "आप खतरे के क्षेत्र में चले गए। आप हार गए!"

id एट्रिब्यूट के सर्वोत्तम अभ्यास

• यूनिक रखें: पेज पर प्रत्येक id अद्वितीय होना चाहिए
• सार्थक नाम: id="user-email" बेहतर है id="input1" से
• केस-सेंसिटिव: myId और myid अलग हैं
• विशेष वर्णों से बचें: केवल अक्षर, संख्या, हाइफन, अंडरस्कोर उपयोग करें
• संख्या से न शुरू करें: हालांकि HTML5 अनुमति देता है, लेकिन CSS सेलेक्टर्स में एस्केप करना पड़ता है

id vs class