HTML में data-* विशेषताएँ सभी HTML तत्वों पर कस्टम डेटा विशेषताओं को एम्बेड करने के लिए उपयोग की जाती हैं। यह एक वैश्विक विशेषता है और इसे किसी भी तत्व पर इस्तेमाल किया जा सकता है।
निम्नलिखित वाक्य रचना है -
<element data-attribute-name=”attribute_value”
ऊपर, विशेषता-नाम में केवल लोअरकेस वर्ण होना चाहिए। इसके साथ, यह उपसर्ग "डेटा-" के बाद कम से कम एक वर्ण लंबा होना चाहिए
आइए अब HTML में डेटा-* एट्रिब्यूट्स को लागू करने के लिए एक उदाहरण देखें। किसी भी विशेषता के बारे में अधिक जानकारी प्राप्त करने के लिए उस पर क्लिक करें -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<script>
function display(tutorial) {
var type = tutorial.getAttribute("data-tutorial-type");
alert(tutorial.innerHTML + " = " + type + ".");
}
</script>
</head>
<body>
<h1>Tutorials</h1>
<h2 onclick="display(this)" id="java" data-tutorial-type="programming language">Java</h2>
<h2 onclick="display(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
<h2 onclick="display(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
</body>
</html> आउटपुट
अब विशेषता के बारे में अधिक जानकारी प्राप्त करने के लिए ऊपर दिए गए
शीर्षक में से किसी पर क्लिक करें। हमने यहां jQuery एट्रिब्यूट पर क्लिक किया -
