HTML डेटा एट्रिब्यूट्स
In this page:
<tagname data-name="value">content</tagname>
<script>
element.dataset.name;
</script>Custom Data Attributes
Data attributes आपको वैलिडेशन नियमों को तोड़े बिना स्टैंडर्ड HTML टैग्स के अंदर कस्टम जानकारी स्टोर करने देते हैं। हर कस्टम data attribute को data- प्रीफिक्स से शुरू होना चाहिए, उसके बाद आपका कस्टम नाम lowercase में आना चाहिए।
- अपने कस्टम data attributes के लिए स्पष्ट, विवरणात्मक नाम चुनें, जैसे data-tool-type या data-status।
- Accepted values:
- data-* — name is data- plus lowercase letters, digits, hyphens
- Value — any string
- Read via element.dataset (camelCase) or getAttribute
उदाहरण: Custom Data Attributes
<div data-tool-type="calculator" data-status="active">Widget</div>CSS के साथ Data Attributes पढ़ना
आप स्टैंडर्ड attribute सिलेक्टर्स का उपयोग करके अपने स्टाइलशीट्स के अंदर कस्टम data attributes को टार्गेट कर सकते हैं, और यहाँ तक कि CSS content प्रॉपर्टी का उपयोग करके उनकी वैल्यूज़ को टेक्स्ट के रूप में स्क्रीन पर भी दिखा सकते हैं।
उदाहरण: Reading Data Attributes with CSS
<style>
[data-status="active"] {
border: 2px solid green;
}
</style>
<div data-status="active">Active widget</div>JavaScript में dataset से डेटा पढ़ना
JavaScript dataset प्रॉपर्टी का उपयोग करके कस्टम data attributes को आसानी से पढ़ और मॉडिफाई कर सकता है। ब्राउज़र अपने-आप आपके हाइफनेटेड data- एट्रिब्यूट्स को camelCase ऑब्जेक्ट प्रॉपर्टीज़ में बदल देता है।
उदाहरण: Reading Data with dataset in JavaScript
<div id="widget" data-tool-type="calculator"></div>
<script>
console.log(document.getElementById('widget').dataset.toolType);
</script>Dynamic State Toggles
आप data attributes का उपयोग अपने पेज पर इंटरैक्टिव स्टेट्स मैनेज करने के लिए कर सकते हैं, जैसे active/inactive सेटिंग्स या dark/light मोड्स के बीच टॉगल करना, सिंपल स्क्रिप्ट्स और स्टाइल नियमों का उपयोग करके।
उदाहरण: Dynamic State Toggles
<button data-state="inactive" onclick="this.dataset.state = 'active'">Toggle</button>Accessibility और ARIA संबंधी चिंताएँ
जहाँ data attributes कस्टम स्टाइलिंग और स्क्रिप्टिंग के लिए बेहद उपयोगी हैं, वहीं उनका कोई सिमैंटिक अर्थ बिल्कुल नहीं होता।
स्क्रीन रीडर्स जैसे असिस्टिव डिवाइसेज़ आपके data attributes को पूरी तरह इग्नोर कर देंगे, इसलिए अपने इंटरैक्टिव एलिमेंट्स को एक्सेसिबल बनाए रखने के लिए आपको स्टैंडर्ड ARIA attributes का उपयोग करना होगा।
उदाहरण: Accessibility and ARIA Concerns
<button data-expanded="false" aria-expanded="false">Show more</button>- अपने custom data attribute names में uppercase letters या spaces इस्तेमाल करना।
- data attributes को standard accessibility ARIA roles के replacement की तरह इस्तेमाल करने की कोशिश करना।
- यह भूल जाना कि JavaScript dataset values को plain strings की तरह पढ़ता है, जिससे calculation errors हो सकती हैं।
- Custom data attributes developers को data- prefix इस्तेमाल करके HTML tags के अंदर private variables store करने देते हैं।
- attribute selectors से CSS के अंदर data attributes style करें, या JavaScript में dataset properties से उनकी values पढ़ें और update करें।
- Data attributes में कोई semantic meaning नहीं होती; अपने interactive elements को accessible रखने के लिए हमेशा उन्हें standard ARIA attributes के साथ जोड़ें।
standard HTML5 data attributes और JavaScript dataset properties सभी modern web browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: