HTML অ্যাট্রিবিউট ব্যবহার শিখুন, সবচেয়ে সাধারণ অ্যাট্রিবিউট নাম ও ভ্যালু দেখে।
HTML Attributes কী?
HTML-এ, অ্যাট্রিবিউটগুলো হলো মডিফায়ার টুলস যেগুলো HTML এলিমেন্টে এক্সট্রা ইনফরমেশন যোগ করতে বা তাদের ডিফল্ট (আউট-অফ-দ্য-বক্স) বিহেভিয়ার পরিবর্তন করতে ব্যবহৃত হয়।
কোনো অ্যাডেড অ্যাট্রিবিউট ছাড়া একটি HTML এলিমেন্ট এমন দেখে:
<tag>Content</tag>অ্যাট্রিবিউটসহ HTML এলিমেন্টগুলো এভাবে ডিফাইন করা হয়:
<tag attribute="value">Content</tag>এই মডেল ধরে, আসুন কিছু প্র্যাকটিক্যাল অ্যাট্রিবিউট উদাহরণ দেখি।
href অ্যাট্রিবিউট
href অ্যাট্রিবিউট HTML-এ সবচেয়ে গুরুত্বপূর্ণ অ্যাট্রিবিউটের একটি।
href ব্যবহৃত হয় URL স্পেসিফাই করতে:
- হাইপারলিংক (সাধারণত "লিংক" বলা হয়)।
- বা এক্সটার্নাল রিসোর্স ইম্পোর্ট করতে, যেমন স্টাইলস ও স্ক্রিপ্টস।
href-এর সবচেয়ে সাধারণ ইউজ কেস: অ্যাঙ্কর এলিমেন্ট <a>-এ লিংক URL যোগ করা:
<a href="url-path">Link text</a>এই লিংকগুলো ইউজারকে পেজ থেকে পেজে ক্লিক করলে নেভিগেট করতে দেয়, είয়ার ইন্টারনালি (একই ওয়েবসাইট/ডোমেইনে), অথবা এক্সটার্নালি (অন্য ওয়েবসাইট ডোমেইনে)।
ইন্টারনাল লিংক
ইন্টারনাল লিংক রিলেটিভ পাথ ব্যবহার করে:
<a href="/">Home</a>স্ট্যান্ডার্ড অনুযায়ী, "/" যেকোনো ওয়েবসাইটে ফ্রন্ট পেজে নিয়ে যায়, যা হলো index.html পেজ।
আপনার একটি পেজ আছে About এবং সংশ্লিষ্ট HTML ডকুমেন্ট about.html, তবে আপনি ইন্টারনালি এটিকে এভাবে লিংক করতে পারেন:
<a href="/about">About</a>এই লিংক TechStacker-এর About পেজে নিয়ে যায়।
এক্সটার্নাল লিংক
এক্সটার্নাল লিংকে আপসোলিউট পাথ দরকার:
<a href="https://www.youtube.com">Go to YouTube.com</a>target অ্যাট্রিবিউট
অ্যাঙ্কর এলিমেন্টের সাথে কাজ করার সময়, আরেকটি গুরুত্বপূর্ণ অ্যাঙ্কর এলিমেন্ট অ্যাট্রিবিউট দেখি, target অ্যাট্রিবিউট।
target অ্যাট্রিবিউট নির্দিষ্ট করে কোথায় লিংক খুলবে যখন ইউজার ক্লিক করবে।
উদাহরণস্বরূপ, আপনি নিচের এক্সটার্নাল লিংকে ক্লিক করলে আপনাকে YouTube.com-এ নিয়ে যাবে এই ব্রাউজার ট্যাব উইন্ডোতে:
<a href="https://www.youtube.com/">Go to YouTube.com</a>Go to YouTube.com
এটি হয় কারণ ডিফল্টভাবে <a> এলিমেন্টের target অ্যাট্রিবিউটের ভ্যালু থাকে _self — যার মানে href লিংক ভ্যালু ইউজারের বর্তমান উইন্ডোতে খুলবে।
সুতরাং এই লিংক এলিমেন্ট:
<a href="https://www.youtube.com/"></a>কম্পিউটার/ব্রাউজার এটিকে এইভাবে পড়ে:
<a href="https://www.youtube.com/" target="_self"></a>কিন্তু আপনি যদি চান লিংকগুলো নতুন ব্রাউজার ট্যাবে খুলে? কোনো সমস্যা নেই, ডিফল্ট _self ভ্যালুকে _blank ভ্যালু দিয়ে ওভাররাইড করুন:
<a href="https://www.youtube.com" target="_blank" rel="noopener" >Go to YouTube.com (opens in a new tab)</a >এখন YouTube লিংকটি নতুন ব্রাউজার ট্যাবে খুলবে:
Go to YouTube.com (new tab)
এই সুযোগে আমার YouTube চ্যানেল প্রমোট করছি:
Link to my YouTube channel (TechStacker).
অ্যাঙ্কর/লিংক এলিমেন্ট সম্পর্কে আরও পড়ুন।
ভ্যালু ছাড়া অ্যাট্রিবিউট (Boolean Attributes)
একটি অ্যাট্রিবিউট সাধারণত একটি অ্যাট্রিবিউট নাম এবং একটি অ্যাট্রিবিউট ভ্যালু নিয়ে গঠিত হয়, যেমন অ্যাঙ্কর এলিমেন্ট উদাহরণে।
তবে, কখনও কখনও ভ্যালু (বিহেভিয়ার) অ্যাট্রিবিউট নামের মধ্যেই বিল্ট-ইন থাকে।
উদাহরণস্বরূপ, HTML <script> এলিমেন্ট মডিফাই করার জন্য defer অ্যাট্রিবিউট:
<script defer src="app.js"></script>লক্ষ্য করুন, defer অ্যাট্রিবিউটে কোনো অ্যাসাইনমেন্ট অপারেটর (=) বা ভ্যালু নেই, কারণ এর বিহেভিয়ার বিল্ট-ইন।
defer হলো একটি তथাকথিত বুলিয়ান অ্যাট্রিবিউট। বুলিয়ান ব্যবহার হয় এমন ডেটা টাইপের জন্য যার শুধু দুটি মান থাকতে পারে, true বা false (অথবা enable/disable)।
আসুন defer অ্যাট্রিবিউটটি নিকট থেকে দেখি।
এই <script> এলিমেন্ট, বिना defer অ্যাট্রিবিউটের, ব্রাউজার লোড করা होते ही app.js ভ্যালু থেকে JavaScript কোড এক্সিকিউট করবে:
<script src="app.js"></script>ডিফল্টভাবে, HTML ডকুমেন্ট উপরে থেকে নিচে, এক লাইন করে পার্স (পড়া) হয়। এর মানে, আপনি যদি ডকুমেন্টের উপরে কোনো JavaScript রাখেন, তবে বাকি ডকুমেন্ট পার্স হওয়া শেষ হওয়ার আগে সেটি এক্সিকিউট হবে।
এইটি script এলিমেন্টের ডিফল্ট বিহেভিয়ার।
কিন্তু আপনি <script> এলিমেন্টে defer যোগ করলে সেই ডিফল্ট বিহেভিয়ার ডিজেবল হয়:
<script defer src="app.js"></script>এখন, JavaScript কোড পুরো পেজ লোড হওয়া পর্যন্ত এক্সিকিউট হবে না।
শাব্দিক অর্থে, defer মানে বিলম্বিত করা/পেছনে ফেলা/অপেক্ষা করা।
আর একবার ব্যাখ্যা করি:
deferছাড়া, JavaScript লোড হওয়ার সাথে সাথে এক্সিকিউট হয়।- সহ
defer, JavaScript পুরো HTML পেজ লোড হওয়া পর্যন্ত অপেক্ষা করে।
যদি অ্যাট্রিবিউটগুলো আপনাকে বিভ্রান্ত করে, চিন্তা নেই, প্র্যাকটিসে লাগালে এটি ১০ গুণ বেশি বোঝা যাবে।
কাস্টম অ্যাট্রিবিউট (data-*)
আপনি কাস্টম অ্যাট্রিবিউটও তৈরি করতে পারেন, যেগুলো আপনি 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 টেকনোলজি কখনও এইগুলো অ্যাক্সেস করতে পারে না। সার্চ ক্রলারও হয়তো data অ্যাট্রিবিউট ভ্যালু ইনডেক্স করে না — তাই এখানে কোনো গুরুত্বপূর্ণ SEO কন্টেন্ট রাখবেন না।
