HTML-এ আপনি কাস্টম অ্যাট্রিবিউট তৈরি করতে পারেন। তারপর CSS দিয়ে স্টাইলিং বা JavaScript দিয়ে সেই অ্যাট্রিবিউটের বিহেভিয়ার কন্ট্রোল করতে পারেন।
আপনি আপনার কাস্টম অ্যাট্রিবিউটের নাম যেকোনো রাখতে পারেন, তবে কাস্টম অ্যাট্রিবিউটের নাম অবশ্যই data- লেবেল দিয়ে শুরু করতে হবে:
<tag data-custom-attribute-name="value">Content</tag>উদাহরণস্বরূপ, ধরুন আমাদের একটি ফুড এলিমেন্ট আছে "Apple"। ব্যবহারকারী এটিতে ক্লিক করলে একটি পপ-আপ ডায়ালগ বক্সে সেটি কী টাইপ ফুড সেটি দেখাতে চাই।
সেটির জন্য আমরা food-type নামে একটি কাস্টম অ্যাট্রিবিউট তৈরি করব (মনে রাখবেন data- লেবেল) এবং <div> এলিমেন্টে Apple টেক্সটের সাথে যোগ করব:
<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit"> Apple </div>এবং যা ফিচারটি কাজ করাবে সেটা JavaScript:
function showDetailsBox(food) {
const foodType = food.getAttribute("data-food-type")
alert(food.innerHTML + " is a " + foodType)
}এখানে একটি ডেমো রয়েছে।
HTML কোডটি কীভাবে কাজ করে:
- প্রথমে,
<div>এলিমেন্টে একটিonclickঅ্যাট্রিবিউট যোগ করা হয়েছে। এটি একটি ইভেন্ট অ্যাট্রিবিউট যা একটি ইভেন্ট লিসেনার আট্যাচ করে যা লিসেন করে... আপনি অনুমান করেছেন, ক্লিক! - তারপর
onclickঅ্যাট্রিবিউটের ভ্যালু হিসেবেshowDetailsBox(this)অ্যাসাইন করা হয়েছে। showDetailsBox()হলো JavaScript ফাংশনের নাম যা Apple টেক্সট এলিমেন্টে ক্লিক কর마자 কল হয়।(this)-এরthisঅংশটি একটি আর্গুমেন্ট যা তার সংশ্লিষ্ট অবজেক্টকে রেফার করে (this নতুনদের জন্য কিছুটা এডভান্সড, বুঝতে না পারলেও চিন্তা নেই)।idহলো একটি বিল্ট-ইন HTML অ্যাট্রিবিউট যা HTML এলিমেন্টের জন্য একদম যুনিক আইডি স্পেসিফাই করে। এই কেসে, আমাদের যুনিক আইডি হলোapple।
JavaScript কোড কীভাবে কাজ করে সেটা এই HTML টিউটোরিয়ালের সুযোগের বাইরে, তাই আমি সংক্ষিপ্ত ব্যাখ্যা দিচ্ছি:
যখন onclick ইভেন্ট অ্যাট্রিবিউট দ্বারা showDetailsBox() ফাংশন কল হয়, তখন এটি তার কোড ব্লক { ... } এক্সিকিউট করে:
function showDetailsBox(food) { ... }কোড ব্লকের প্রথম লাইনে, JavaScript কাস্টম data-food-type অ্যাট্রিবিউট যেকোনো HTML এলিমেন্টে আছে সেটি সিলেক্ট করে, এবং সেটি (এবং তার অ্যাট্রিবিউট ভ্যালু) একটি ভেরিয়েবলে অ্যাসাইন করে যার নাম foodType:
function showDetailsBox(food) {
const foodType = food.getAttribute("data-food-type")
...
}দ্বিতীয় লাইনে বিল্ট-ইন alert() মেথড রান করে (যেটি পপ-আপ ডায়ালগ বক্স প্রম্পট করে) এবং সেটাকে বলে foodType এর ভ্যালু দেখাতে, যা অবশ্যই fruit:
function showDetailsBox(food) {
const foodType = food.getAttribute("data-food-type")
alert(food.innerHTML + " is a " + foodType)
}সম্পূর্ণ কোড উদাহরণ বুঝতে না পারলেও চিন্তা নেই, এখানে অনেক কিছু هضم করতে হয়, বিশেষ করে নতুনদের জন্য। প্র্যাকটিস করলে বুঝতে পারবেন!
HTML অ্যাট্রিবিউট সম্পর্কে আরও বিস্তারিত জানতে, MDN Web Docs HTML Attribute Reference দেখুন।
গুরুত্বপূর্ণ: গুরুত্বপূর্ণ কন্টেন্ট যা দৃশ্যমান ও অ্যাকসেসিবল হওয়া উচিত, সেটি data অ্যাট্রিবিউটে স্টোর করবেন না, কারণ assistive টেকনোলজি সămয় এইগুলো অ্যাক্সেস করতে পারে না। সার্চ ক্রলারও হয়তো data অ্যাট্রিবিউট ভ্যালু ইনডেক্স করে না — তাই এখানে কোনো গুরুত্বপূর্ণ SEO কন্টেন্ট রাখবেন না।
