HTML में सभी एलिमेंट्स पर कस्टम डेटा एट्रिब्यूट्स कैसे एम्बेड करें?

कस्टम डेटा एट्रिब्यूट्स एम्बेड करने के लिए data-* एट्रिब्यूट का उपयोग करें। इसमें एट्रिब्यूट नाम में कोई अपरकेस अक्षर नहीं होना चाहिए और data- से शुरू होना चाहिए।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <script>
      function display(rank) {
        var myRank = rank.getAttribute("data-rank-type");
        alert("Rank " + rank.innerHTML + " has " + myRank + " points.");
      }
    </script>
  </head>
  <body>
    <h1>Rank and Points</h1>
    <p>Click on any rank to generate the details.:</p>
    <ul>
      <li onclick="display(this)" id="fifth" data-rank-type="500">Fifth</li>
      <li onclick="display(this)" id="sixth" data-rank-type="600">Sixth</li>
    </ul>
  </body>
</html>

data-* एट्रिब्यूट्स निजी डेटा स्टोर करने के लिए होते हैं जो पेज या एप्लिकेशन के लिए कस्टम होते हैं। इन्हें JavaScript में dataset प्रॉपर्टी या getAttribute() से एक्सेस किया जा सकता है।