কখনো কখনো একটি এলিমেন্টের অতিরিক্ত তথ্য বহন করা দরকার যা user-কে সরাসরি দেখানোর জন্য না, বরং আপনার নিজের CSS বা JavaScript পড়ার জন্য। Data attribute ঠিক এই কারণেই আছে।
data- দিয়ে শুরু হওয়া যেকোনো attribute নাম বৈধ HTML আর যোগ করা সবসময় নিরাপদ — ব্রাউজার এটা visually ignore করে, আর কখনো একটি built-in attribute-এর সাথে গুলিয়ে ফেলে না।
<article
id="post-33"
data-author-id="42"
data-category="frontend">
...
</article>প্রতিটি data attribute একটি এলিমেন্টের dataset property-তে পাওয়া যায়, নাম camelCase-এ রূপান্তরিত হয়ে।
const article = document.querySelector('#post-33')
article.dataset.authorId // "42"
article.dataset.category // "frontend"একটি attribute selector ব্যবহার করে CSS-এও একটি data attribute select আর এমনকি সরাসরি দেখানো যায়।
article[data-category="frontend"] {
border-left: 4px solid blue;
}কেন শুধু একটি attribute বানানো যাবে না
একটি এলিমেন্টে custom তথ্য যোগ করার standard উপায় data attribute — নিজের non-standard attribute নাম বানানো এড়িয়ে চলুন, পুরনো ব্রাউজার আর validator যা reject করতে পারে।