HTML data-* অ্যাট্রিবিউট (Custom Data Attributes)
data-* অ্যাট্রিবিউট HTML5-এ যোগ করা একটি পাওয়ারফুল ফিচার যা যেকোনো HTML এলিমেন্টে কাস্টম ডেটা সংরক্ষণ করতে দেয়। এটি গ্লোবাল অ্যাট্রিবিউট — যেকোনো এলিমেন্টে ব্যবহার করা যায়। ডেটা প্রাইভেট থাকে (UI-তে দেখায় না), কিন্তু JavaScript/CSS দিয়ে অ্যাক্সেস করা যায়।
সিনট্যাক্স
<element data-attribute-name="attribute_value">
নামকরণ নিয়ম
data-প্রিফিক্স বাধ্যতামূলক- প্রিফিক্সের পর কমপক্ষে ১ অক্ষর থাকতে হয়
- শুধু ছোট হাতের অক্ষর (lowercase), হাইফন (-), ডট (.), কোলন (:), আন্ডারস্কোর (_) ব্যবহার করা যায়
- ক্যাপিটাল লেটার ব্যবহার করা যাবে না (ব্রাউজার অটোমেটিক্যালি lowercase-এ কনভার্ট করে)
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script>
function showInfo(element) {
var type = element.getAttribute("data-tutorial-type");
alert(element.innerHTML + " = " + type + ".");
}
</script>
</head>
<body>
<h1>টিউটোরিয়াল</h1>
<h2 onclick="showInfo(this)" id="java" data-tutorial-type="programming language">Java</h2>
<h2 onclick="showInfo(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
<h2 onclick="showInfo(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
</body>
</html>
আউটপুট
jQuery হেডিং-এ ক্লিক করলে:
JavaScript API: dataset প্রোপার্টি
আধুনিক ব্রাউজারগুলিতে element.dataset প্রোপার্টি দিয়ে সহজে অ্যাক্সেস করা যায়:
const el = document.getElementById('java');
// পাওয়া
console.log(el.dataset.tutorialType); // "programming language"
// সেট করা
el.dataset.newInfo = "updated";
// সব ডেটা অবজেক্ট আকারে
console.log(el.dataset); // {tutorialType: "programming language", newInfo: "updated"}
নোট: হাইফন-কেস (kebab-case) JavaScript-এ ক্যামেল-কেস (camelCase)-এ কনভার্ট হয়: data-tutorial-type → dataset.tutorialType।
CSS-এ ব্যবহার
/* অ্যাট্রিবিউট সিলেক্টর */
h2[data-tutorial-type="programming language"] {
border-left: 4px solid blue;
}
/* মান থাকে কিনা চেক */
[data-tutorial-type] {
cursor: help;
}
ব্যবহারের ক্ষেত্রসমূহ
- কনফিগারেশন ডেটা (ID, টাইপ, সেটিংস)
- এনালিটিক্স ট্র্যাকিং (
data-track="click") - স্টেট ম্যানেজমেন্ট (
data-state="open") - টেমপ্লেটিং/রেন্ডারিং হুক
সেরা অনুশীলন
- নামকরণে সেম্যান্টিক প্রিফিক্স ব্যবহার করুন:
data-user-id,data-product-sku - বড় JSON ডেটা সংরক্ষণ করবেন না (performance) — বদলে `
