গুণাবলী

এইচটিএমএল-এর ওভারভিউ- তে অ্যাট্রিবিউট নিয়ে সংক্ষেপে আলোচনা করা হয়েছে। এখন এ বিষয়ে বিস্তারিত আলোচনার সময় এসেছে।

অ্যাট্রিবিউটই এইচটিএমএলকে এত শক্তিশালী করে তোলে। অ্যাট্রিবিউট হলো ওপেনিং ট্যাগে থাকা স্পেস দ্বারা পৃথক করা নাম এবং নাম/মান জোড়া, যা কোনো এলিমেন্টের তথ্য ও কার্যকারিতা প্রদান করে।

একটি HTML এলিমেন্টের ওপেনিং ট্যাগ, অ্যাট্রিবিউট এবং ক্লোজিং ট্যাগ চিহ্নিত করা হলো।

অ্যাট্রিবিউটগুলো এলিমেন্টের আচরণ, সংযোগ এবং কার্যকারিতা নির্ধারণ করে। কিছু অ্যাট্রিবিউট গ্লোবাল, অর্থাৎ সেগুলো যেকোনো এলিমেন্টের ওপেনিং ট্যাগের ভেতরে থাকতে পারে। অন্য কিছু অ্যাট্রিবিউট কয়েকটি এলিমেন্টে প্রযোজ্য হলেও সবগুলোতে নয়, আবার কিছু অ্যাট্রিবিউট এলিমেন্ট-নির্দিষ্ট, যা কেবল একটিমাত্র এলিমেন্টের জন্যই প্রাসঙ্গিক। HTML-এ, বুলিয়ান অ্যাট্রিবিউট এবং কিছু ক্ষেত্রে এনুমারেটেড অ্যাট্রিবিউট ছাড়া বাকি সব অ্যাট্রিবিউটের একটি ভ্যালু থাকা আবশ্যক।

যদি কোনো অ্যাট্রিবিউটের মানে স্পেস বা বিশেষ অক্ষর থাকে, তবে মানটিকে অবশ্যই উদ্ধৃতি চিহ্নের মধ্যে রাখতে হবে। এই কারণে এবং পাঠযোগ্যতা বাড়ানোর জন্য, উদ্ধৃতি চিহ্ন ব্যবহার করার পরামর্শ সর্বদা দেওয়া হয়।

এইচটিএমএল কেস-সেনসিটিভ না হলেও, কিছু অ্যাট্রিবিউটের মান কেস-সেনসিটিভ হয়। এইচটিএমএল স্পেসিফিকেশনের অংশ এমন মানগুলো কেস-ইনসেনসিটিভ। সংজ্ঞায়িত স্ট্রিং মান, যেমন ক্লাস এবং আইডি-র নাম, কেস-সেনসিটিভ হয়। যদি কোনো অ্যাট্রিবিউটের মান এইচটিএমএল-এ কেস-সেনসিটিভ হয়, তবে সিএসএস এবং জাভাস্ক্রিপ্টে অ্যাট্রিবিউট সিলেক্টর হিসেবে ব্যবহৃত হলেও তা কেস-সেনসিটিভ হয়; অন্যথায়, তা হয় না।

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the ID attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

বুলিয়ান বৈশিষ্ট্য

যদি কোনো বুলিয়ান অ্যাট্রিবিউট উপস্থিত থাকে, তবে তা সর্বদা সত্য হয়। বুলিয়ান অ্যাট্রিবিউটগুলোর মধ্যে রয়েছে autofocus , inert , checked , disabled , required , reversed , allowfullscreen , default, loop , autoplay , controls , muted , readonly , multiple, এবং selected । যদি এই অ্যাট্রিবিউটগুলোর মধ্যে এক বা একাধিক উপস্থিত থাকে, তাহলে এলিমেন্টটি disabled, required, readonly, ইত্যাদি হয়। যদি উপস্থিত না থাকে, তবে তা হয় না।

বুলিয়ান মান বাদ দেওয়া যেতে পারে, একটি খালি স্ট্রিং হিসাবে সেট করা যেতে পারে, অথবা অ্যাট্রিবিউটের নাম হতে পারে; কিন্তু মানটিকে আসলে true স্ট্রিং হিসাবে সেট করতে হবে এমন কোনো বাধ্যবাধকতা নেই। true , false , এবং 😀 সহ সমস্ত মান, যদিও অবৈধ, 'true'-তে রূপান্তরিত হবে।

এই তিনটি ট্যাগ সমতুল্য:

<input required>
<input required="">
<input required="required">

যদি অ্যাট্রিবিউটের মান false হয়, তাহলে অ্যাট্রিবিউটটি বাদ দিন। যদি অ্যাট্রিবিউটটি true হয়, তাহলে অ্যাট্রিবিউটটি অন্তর্ভুক্ত করুন কিন্তু কোনো মান দেবেন না। উদাহরণস্বরূপ, HTML-এ required="required" একটি বৈধ মান নয়; কিন্তু যেহেতু required একটি বুলিয়ান অ্যাট্রিবিউট, তাই এর অবৈধ মান true-তে পরিণত হয়। কিন্তু যেহেতু অবৈধ এনুমারেটেড অ্যাট্রিবিউটগুলো অনুপস্থিত মানের মতো একই মানে পরিণত নাও হতে পারে, তাই কোন অ্যাট্রিবিউটগুলো বুলিয়ান আর কোনগুলো এনুমারেটেড এবং সম্ভাব্য অবৈধ মান প্রদান করে, তা মনে রাখার চেয়ে মান বাদ দেওয়ার অভ্যাস করা সহজ।

true এবং false-এর মধ্যে টগল করার সময়, ভ্যালু টগল না করে জাভাস্ক্রিপ্ট ব্যবহার করে অ্যাট্রিবিউটটি সম্পূর্ণভাবে যোগ বা অপসারণ করুন।

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

গণনাকৃত বৈশিষ্ট্য

এনুমারেটেড অ্যাট্রিবিউটকে মাঝে মাঝে বুলিয়ান অ্যাট্রিবিউটের সাথে গুলিয়ে ফেলা হয়। এগুলো হলো এইচটিএমএল অ্যাট্রিবিউট, যেগুলোর কিছু সীমিত ও পূর্বনির্ধারিত বৈধ মান থাকে। বুলিয়ান অ্যাট্রিবিউটের মতোই, অ্যাট্রিবিউটটি উপস্থিত থাকা সত্ত্বেও যদি মানটি অনুপস্থিত থাকে, তবে এগুলোর একটি ডিফল্ট মান থাকে। উদাহরণস্বরূপ, আপনি যদি <style contenteditable> অন্তর্ভুক্ত করেন, তবে এর ডিফল্ট মান হবে <style contenteditable="true"> ।

তবে, বুলিয়ান অ্যাট্রিবিউটের মতো নয়, অ্যাট্রিবিউটটি বাদ দিলেই যে তা ফলস হবে, এমনটা নয়। একটি 'present' অ্যাট্রিবিউটের মান অনুপস্থিত থাকলে তা অগত্যা ট্রু হয় না, এবং অবৈধ মানগুলোর জন্য ডিফল্ট মানও অগত্যা একটি নাল স্ট্রিং-এর সমান হয় না। উদাহরণটি আরও এগিয়ে নিয়ে গেলে, contenteditable অ্যাট্রিবিউটের মান অনুপস্থিত বা অবৈধ হলে এটি ডিফল্টভাবে inherit হয়, এবং এটিকে স্পষ্টভাবে false সেট করা যায়।

ডিফল্ট মান অ্যাট্রিবিউটের উপর নির্ভর করে। বুলিয়ান মানের মতো নয়, অ্যাট্রিবিউট উপস্থিত থাকলেই স্বয়ংক্রিয়ভাবে "true" হয় না। আপনি যদি <style contenteditable="false"> অন্তর্ভুক্ত করেন, তাহলে এলিমেন্টটি সম্পাদনাযোগ্য হবে না। যদি মানটি অবৈধ হয়, যেমন <style contenteditable="😀"> , অথবা, আশ্চর্যজনকভাবে, <style contenteditable="contenteditable"> , তাহলে মানটি অবৈধ হয়ে যায় এবং ডিফল্টরূপে inherit ।

এনুমারেটেড অ্যাট্রিবিউটের ক্ষেত্রে বেশিরভাগ সময়েই, অনুপস্থিত এবং অবৈধ মান একই হয়। উদাহরণস্বরূপ, যদি একটি <input> ট্যাগের type অ্যাট্রিবিউটটি অনুপস্থিত থাকে, উপস্থিত থেকেও কোনো মান না থাকে, অথবা এর মান অবৈধ হয়, তবে এটি ডিফল্টভাবে ' text হয়ে যায়। যদিও এই আচরণটি প্রচলিত, এটি কোনো নিয়ম নয়। এই কারণে, কোন অ্যাট্রিবিউটগুলো বুলিয়ান এবং কোনগুলো এনুমারেটেড তা জানা জরুরি; সম্ভব হলে মানগুলো বাদ দিন যাতে ভুল না হয়, এবং প্রয়োজন অনুযায়ী মানটি খুঁজে নিন।

বৈশ্বিক বৈশিষ্ট্য

গ্লোবাল অ্যাট্রিবিউট হলো এমন অ্যাট্রিবিউট যা <head> ট্যাগের ভেতরের এলিমেন্টসহ যেকোনো HTML এলিমেন্টে সেট করা যায়। ৩০টিরও বেশি গ্লোবাল অ্যাট্রিবিউট রয়েছে। যদিও তত্ত্বগতভাবে এই সবগুলোই যেকোনো HTML এলিমেন্টে যোগ করা যায়, কিছু গ্লোবাল অ্যাট্রিবিউট নির্দিষ্ট কিছু এলিমেন্টে সেট করলে কোনো প্রভাব ফেলে না; উদাহরণস্বরূপ, একটি <meta> এলিমেন্টে ' hidden অ্যাট্রিবিউট সেট করলে মেটা কন্টেন্ট হিসেবে তা প্রদর্শিত হয় না।

id

গ্লোবাল অ্যাট্রিবিউট ' id কোনো এলিমেন্টের জন্য একটি অনন্য শনাক্তকারী নির্ধারণ করতে ব্যবহৃত হয়। এটি বিভিন্ন উদ্দেশ্যে কাজ করে, যার মধ্যে রয়েছে:

  • একটি লিঙ্কের ফ্র্যাগমেন্ট আইডেন্টিফায়ারের লক্ষ্যবস্তু।
  • স্ক্রিপ্টিংয়ের জন্য একটি উপাদান শনাক্ত করা।
  • একটি ফর্ম এলিমেন্টকে তার লেবেলের সাথে যুক্ত করা।
  • সহায়ক প্রযুক্তিগুলোর জন্য একটি লেবেল বা বিবরণ প্রদান করা।
  • CSS-এ উচ্চ স্পেসিফিসিটি ব্যবহার করে অথবা অ্যাট্রিবিউট সিলেক্টর হিসেবে স্টাইল টার্গেট করা।

id ভ্যালুটি হলো স্পেস ছাড়া একটি স্ট্রিং। যদি এতে স্পেস থাকে, তাহলে ডকুমেন্টটি ভেঙে যাবে না, কিন্তু আপনাকে আপনার HTML, CSS, এবং JS-এ এস্কেপ ক্যারেক্টার দিয়ে id টিকে টার্গেট করতে হবে। অন্য সব ক্যারেক্টার বৈধ। id ভ্যালু 😀 বা .class হতে পারে, কিন্তু এটি ভালো বুদ্ধি নয়। আপনার বর্তমান এবং ভবিষ্যতের জন্য প্রোগ্রামিং সহজ করতে, id এর প্রথম ক্যারেক্টারটি একটি বর্ণ রাখুন এবং শুধুমাত্র ASCII অক্ষর, সংখ্যা, _ , এবং - ব্যবহার করুন। একটি id নামকরণের নিয়ম তৈরি করে তা মেনে চলা একটি ভালো অভ্যাস, কারণ id ভ্যালুগুলো কেস-সেনসিটিভ।

id ডকুমেন্টের জন্য অনন্য হওয়া উচিত। একটি id একাধিকবার ব্যবহার করা হলে আপনার পৃষ্ঠার লেআউট সম্ভবত নষ্ট হবে না, কিন্তু আপনার জাভাস্ক্রিপ্ট, লিঙ্ক এবং এলিমেন্টের ইন্টারঅ্যাকশন প্রত্যাশিতভাবে কাজ নাও করতে পারে।

ন্যাভিগেশন বারে চারটি লিঙ্ক রয়েছে। আমরা লিঙ্ক এলিমেন্ট নিয়ে পরে আলোচনা করব, কিন্তু আপাতত জেনে রাখুন যে লিঙ্ক শুধু HTTP-ভিত্তিক URL-এর মধ্যেই সীমাবদ্ধ নয়। এগুলো বর্তমান ডকুমেন্টের (বা অন্য ডকুমেন্টের) পেজের বিভিন্ন অংশের ফ্র্যাগমেন্ট আইডেন্টিফায়ারও হতে পারে।

মেশিন লার্নিং ওয়ার্কশপ সাইটে, পেজ হেডারের নেভিগেশন বারে চারটি লিঙ্ক রয়েছে:

href অ্যাট্রিবিউটটি সেই হাইপারলিঙ্কটি প্রদান করে, যা সক্রিয় করলে ব্যবহারকারীকে সেখানে নিয়ে যায়। যখন কোনো URL-এ একটি হ্যাশ চিহ্ন ( # ) এবং তার পরে কিছু অক্ষরের একটি স্ট্রিং থাকে, তখন সেই স্ট্রিংটি একটি ফ্র্যাগমেন্ট আইডেন্টিফায়ার হয়। যদি সেই স্ট্রিংটি ওয়েব পেজের কোনো এলিমেন্টের id এর সাথে মিলে যায়, তবে ফ্র্যাগমেন্টটি সেই এলিমেন্টের একটি অ্যাঙ্কর বা বুকমার্ক হিসেবে কাজ করে। ব্রাউজারটি সেই স্থানে স্ক্রল করে যাবে যেখানে অ্যাঙ্করটি সংজ্ঞায়িত করা হয়েছে।

এই চারটি লিঙ্ক আমাদের পেজের চারটি অংশকে নির্দেশ করে, যেগুলো তাদের id অ্যাট্রিবিউট দ্বারা চিহ্নিত। যখন ব্যবহারকারী নেভিগেশন বারের এই চারটি লিঙ্কের যেকোনো একটিতে ক্লিক করেন, তখন fragment identifier দ্বারা লিঙ্ক করা এলিমেন্টটি—অর্থাৎ, যে এলিমেন্টটিতে # চিহ্নটি ছাড়া মিলে যাওয়া ID রয়েছে—স্ক্রু করে দৃশ্যমান হয়।

মেশিন লার্নিং ওয়ার্কশপের <main> কন্টেন্টে আইডি সহ চারটি সেকশন রয়েছে। যখন সাইট ভিজিটর <nav> এর কোনো একটি লিঙ্কে ক্লিক করেন, তখন সেই ফ্র্যাগমেন্ট আইডেন্টিফায়ারযুক্ত সেকশনটি স্ক্রল করে দৃশ্যমান হয়। মার্কআপটি নিম্নরূপ:

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

<nav> লিঙ্কগুলিতে থাকা ফ্র্যাগমেন্ট আইডেন্টিফায়ারগুলো তুলনা করলে আপনি লক্ষ্য করবেন যে, প্রতিটিই <main> এর ভেতরের একটি <section> এর id সাথে মিলে যায়। ব্রাউজার আমাদের একটি বিনামূল্যের "পৃষ্ঠার শীর্ষে" লিঙ্ক দেয়। href="#top" (কেস-ইনসেনসিটিভ) অথবা href="#" সেট করলে, ব্যবহারকারীকে পৃষ্ঠার একেবারে শীর্ষে স্ক্রল করে নিয়ে যাওয়া হবে।

href এর মধ্যে থাকা হ্যাশ-মার্ক বিভাজকটি ফ্র্যাগমেন্ট আইডেন্টিফায়ারের অংশ নয়। ফ্র্যাগমেন্ট আইডেন্টিফায়ার সর্বদা URL-এর শেষ অংশ এবং এটি সার্ভারে পাঠানো হয় না।

CSS সিলেক্টর

CSS-এ, আপনি #feedback মতো একটি সিলেক্টর ব্যবহার করে প্রতিটি সেকশনকে টার্গেট করতে পারেন। কম স্পেসিফিসিটির জন্য, একটি কেস-সেনসিটিভ অ্যাট্রিবিউট সিলেক্টর , [id="feedback"] ব্যবহার করুন।

স্ক্রিপ্টিং

MLW.com এ শুধুমাত্র মাউস ব্যবহারকারীদের জন্য একটি ইস্টার এগ রয়েছে। লাইটের সুইচে ক্লিক করলে পেজটি চালু ও বন্ধ হয়।

লাইট সুইচ ইমেজটির মার্কআপ হলো:

<img src="svg/switch2.svg" id="switch"
  alt="light switch" class="light" />

id অ্যাট্রিবিউটটি getElementById() ` মেথডের প্যারামিটার হিসেবে এবং # প্রিফিক্স সহ ` querySelector() ও querySelectorAll() ` মেথডের প্যারামিটারের অংশ হিসেবে ব্যবহার করা যায়।

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

আমাদের একটি জাভাস্ক্রিপ্ট ফাংশন এলিমেন্টগুলোকে তাদের id অ্যাট্রিবিউটের মাধ্যমে টার্গেট করার এই ক্ষমতাটি ব্যবহার করে:

<script>
  /* Switch is a reserved word in JavaScript, so instead, we use onoff */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

HTML <label> এলিমেন্টের একটি for অ্যাট্রিবিউট থাকে, যার ভ্যালু হিসেবে এটি যে ফর্ম কন্ট্রোলের সাথে যুক্ত তার id গ্রহণ করে। প্রতিটি ফর্ম কন্ট্রোলে একটি id যুক্ত করে এবং প্রত্যেকটিকে লেবেলের for অ্যাট্রিবিউটের সাথে যুক্ত করে একটি সুস্পষ্ট লেবেল তৈরি করা নিশ্চিত করে যে প্রতিটি ফর্ম কন্ট্রোলের একটি সংশ্লিষ্ট লেবেল থাকবে।

যদিও প্রতিটি লেবেল ঠিক একটি ফর্ম কন্ট্রোলের সাথে যুক্ত থাকতে পারে, একটি ফর্ম কন্ট্রোলের একাধিক সংশ্লিষ্ট লেবেল থাকতে পারে।

যদি ফর্ম কন্ট্রোলটি <label> ওপেনিং এবং ক্লোজিং ট্যাগের মধ্যে থাকে, তাহলে for এবং id অ্যাট্রিবিউটের প্রয়োজন হয় না: একে "ইমপ্লিসিট" লেবেল বলা হয়। লেবেলগুলো সকল ব্যবহারকারীকে জানিয়ে দেয় যে প্রতিটি ফর্ম কন্ট্রোল কীসের জন্য।

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

for এবং ' id এর মধ্যকার সংযোগ সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে তথ্যটি সহজলভ্য করে তোলে। এছাড়াও, কোনো লেবেলের যেকোনো জায়গায় ক্লিক করলে সংশ্লিষ্ট এলিমেন্টটিতে ফোকাস চলে আসে, যা কন্ট্রোলটির ক্লিক এরিয়াকে প্রসারিত করে। এটি শুধু সেইসব ব্যক্তিদের জন্যই সহায়ক নয় যাদের হাতের দক্ষতার সমস্যার কারণে মাউস ব্যবহার কম নির্ভুল হয়; এটি রেডিও বাটনের চেয়ে চওড়া আঙুলযুক্ত প্রত্যেক মোবাইল ডিভাইস ব্যবহারকারীকেও সাহায্য করে।

এই কোড উদাহরণে, একটি নকল কুইজের নকল পঞ্চম প্রশ্নটি হলো একটি সিঙ্গেল সিলেক্ট মাল্টিপল-চয়েস প্রশ্ন। প্রতিটি ফর্ম কন্ট্রোলের একটি সুস্পষ্ট লেবেল রয়েছে এবং প্রতিটির জন্য একটি অনন্য id আছে। যাতে ভুলবশত কোনো আইডির পুনরাবৃত্তি না ঘটে, তা নিশ্চিত করার জন্য আইডির মানটি প্রশ্ন নম্বর এবং উত্তরের একটি সংমিশ্রণ।

রেডিও বাটন অন্তর্ভুক্ত করার সময়, যেহেতু লেবেলগুলো রেডিও বাটনগুলোর মান বর্ণনা করে, আমরা একই নামের সমস্ত বাটনকে একটি <fieldset> এর মধ্যে রাখি, যেখানে <legend> পুরো সেটের লেবেল বা প্রশ্ন হিসেবে কাজ করে।

অন্যান্য প্রবেশগম্যতা ব্যবহার

অ্যাক্সেসিবিলিটি এবং ইউজেবিলিটিতে id ব্যবহার শুধু লেবেলের মধ্যেই সীমাবদ্ধ নয়। 'introduction to text' নামক একটি লেখায়, একটি <section> কে রিজিওন ল্যান্ডমার্কে রূপান্তর করা হয়েছিল। এর জন্য <section> -এর aria-labelledby এর ভ্যালু হিসেবে একটি <h2> এর id রেফারেন্স করে অ্যাক্সেসিবল নামটি প্রদান করা হয়।

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

অ্যাক্সেসিবিলিটি নিশ্চিত করার জন্য ৫০টিরও বেশি aria-* স্টেট এবং প্রপার্টি ব্যবহার করা যেতে পারে। aria-labelledby , aria-describedby , aria-details , এবং aria-owns তাদের ভ্যালু হিসেবে একটি স্পেস-সেপারেটেড id রেফারেন্স লিস্ট গ্রহণ করে। aria-activedescendant , যা ফোকাসড ডিসেন্ড্যান্ট এলিমেন্টকে শনাক্ত করে, তার ভ্যালু হিসেবে একটিমাত্র id রেফারেন্স গ্রহণ করে: সেটি হলো সেই একক এলিমেন্টের আইডি রেফারেন্স যেটি ফোকাসে আছে (একবারে কেবল একটি এলিমেন্টই ফোকাসড হতে পারে)।

class

class অ্যাট্রিবিউট CSS (এবং জাভাস্ক্রিপ্ট) ব্যবহার করে এলিমেন্ট টার্গেট করার একটি অতিরিক্ত উপায় প্রদান করে, কিন্তু HTML-এ এর অন্য কোনো উদ্দেশ্য নেই (যদিও ফ্রেমওয়ার্ক এবং কম্পোনেন্ট লাইব্রেরিগুলো এটি ব্যবহার করতে পারে)। ক্লাস অ্যাট্রিবিউটের ভ্যালু হিসেবে এলিমেন্টটির কেস-সেনসিটিভ ক্লাসগুলোর একটি তালিকা থাকে, যা স্পেস দিয়ে আলাদা করা থাকে।

একটি সুসংহত শব্দার্থিক কাঠামো তৈরি করলে এলিমেন্টগুলোকে তাদের অবস্থান এবং কার্যাবলীর উপর ভিত্তি করে টার্গেট করা যায়। এই সুসংহত কাঠামো ডিসেন্ডেন্ট এলিমেন্ট সিলেক্টর, রিলেশনাল সিলেক্টর এবং অ্যাট্রিবিউট সিলেক্টর ব্যবহারের সুযোগ করে দেয়। অ্যাট্রিবিউট সম্পর্কে জানার সময়, একই অ্যাট্রিবিউট বা অ্যাট্রিবিউট ভ্যালুযুক্ত এলিমেন্টগুলোকে কীভাবে স্টাইল করা যায়, তা বিবেচনা করুন। এমন নয় যে আপনার ক্লাস অ্যাট্রিবিউট ব্যবহার করা উচিত নয়, বরং বেশিরভাগ ডেভেলপারই বুঝতে পারেন না যে প্রায়শই এটির প্রয়োজন হয় না।

এখন পর্যন্ত, এমএলডব্লিউ কোনো ক্লাস ব্যবহার করেনি। একটিও ক্লাস নেম ছাড়া কি কোনো সাইট চালু করা সম্ভব? দেখা যাক।

style

style অ্যাট্রিবিউট ইনলাইন স্টাইল প্রয়োগ করতে সক্ষম করে, যা শুধুমাত্র সেই একক এলিমেন্টে প্রয়োগ করা হয় যার উপর অ্যাট্রিবিউটটি সেট করা থাকে। style অ্যাট্রিবিউট তার ভ্যালু হিসেবে CSS প্রপার্টি-ভ্যালু পেয়ার গ্রহণ করে, এবং ভ্যালুর সিনট্যাক্স একটি CSS স্টাইল ব্লকের বিষয়বস্তুর মতোই হয়: CSS-এর মতোই প্রপার্টির পরে একটি কোলন বসে, এবং ভ্যালুর পরে প্রতিটি ডিক্লারেশনের শেষে সেমিকোলন বসে।

স্টাইলগুলো শুধুমাত্র সেই এলিমেন্টেই প্রয়োগ করা হয়, যেটিতে অ্যাট্রিবিউটটি সেট করা থাকে। পরবর্তী এলিমেন্টগুলো উত্তরাধিকারসূত্রে প্রাপ্ত প্রপার্টির মান গ্রহণ করে, যদি না নেস্টেড এলিমেন্টে বা <style> ব্লক বা স্টাইলশিটে থাকা অন্য কোনো স্টাইল ডিক্লারেশন দ্বারা সেগুলোকে ওভাররাইড করা হয়। যেহেতু এই মানটি শুধুমাত্র সেই এলিমেন্টে প্রয়োগ করা একটিমাত্র স্টাইল ব্লকের বিষয়বস্তুর সমতুল্য, তাই এটি জেনারেটেড কন্টেন্টের জন্য, কীফ্রেম অ্যানিমেশন তৈরি করতে বা অন্য কোনো অ্যাট-রুল প্রয়োগ করতে ব্যবহার করা যায় না।

যদিও style একটি গ্লোবাল অ্যাট্রিবিউট, এটি ব্যবহার করার পরামর্শ দেওয়া হয় না। বরং, স্টাইলগুলো একটি বা একাধিক আলাদা ফাইলে সংজ্ঞায়িত করুন। তবে, ডেভেলপমেন্টের সময়, যেমন টেস্টিংয়ের মতো কাজে দ্রুত স্টাইলিং করার জন্য style অ্যাট্রিবিউটটি বেশ কাজে আসতে পারে। সেক্ষেত্রে 'solution' স্টাইলটি নিয়ে আপনার লিঙ্ক করা CSS ফাইলে যুক্ত করে দিন।

tabindex

যেকোনো এলিমেন্টকে ফোকাস পাওয়ার উপযোগী করতে তাতে ` tabindex অ্যাট্রিবিউট যোগ করা যায়। ` tabindex ভ্যালুটি নির্ধারণ করে যে এলিমেন্টটি ট্যাব অর্ডারে যুক্ত হবে কিনা এবং ঐচ্ছিকভাবে, কোনো নন-ডিফল্ট ট্যাবিং অর্ডারেও যুক্ত হবে কিনা।

tabindex অ্যাট্রিবিউটের মান হিসেবে একটি পূর্ণসংখ্যা থাকে। একটি ঋণাত্মক মান (প্রচলিত নিয়ম অনুযায়ী -1 ব্যবহার করা হয়) কোনো এলিমেন্টকে ফোকাস পাওয়ার যোগ্য করে তোলে, যেমন জাভাস্ক্রিপ্টের মাধ্যমে, কিন্তু এলিমেন্টটিকে ট্যাবিং সিকোয়েন্সে যুক্ত করে না। tabindex এর মান 0 হলে এলিমেন্টটি ফোকাসযোগ্য হয় এবং ট্যাবিংয়ের মাধ্যমে সেখানে পৌঁছানো যায়, যা এটিকে সোর্স কোড অনুযায়ী পেজের ডিফল্ট ট্যাব অর্ডারে যুক্ত করে। 1 বা তার বেশি মান এলিমেন্টটিকে একটি অগ্রাধিকারপ্রাপ্ত ফোকাস সিকোয়েন্সে রাখে এবং এটি ব্যবহার করা বাঞ্ছনীয় নয়।

এই পৃষ্ঠায়, একটি <share-action> কাস্টম এলিমেন্ট ব্যবহার করে শেয়ার করার একটি কার্যকারিতা রয়েছে, যা একটি <button> হিসেবে কাজ করে। কাস্টম এলিমেন্টটিকে কীবোর্ডের ডিফল্ট ট্যাবিং অর্ডারে যুক্ত করার জন্য এর tabindex শূন্য রাখা হয়েছে: 

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

button role স্ক্রিন রিডার ব্যবহারকারীদের জানায় যে এই এলিমেন্টটি একটি বাটনের মতো আচরণ করবে। বাটনের কার্যকারিতার প্রতিশ্রুতি যাতে বজায় থাকে, তা নিশ্চিত করতে জাভাস্ক্রিপ্ট ব্যবহার করা হয়; এর মধ্যে ক্লিক ও কীডাউন ইভেন্টের পাশাপাশি এন্টার এবং স্পেস কী-এর চাপও অন্তর্ভুক্ত।

ফর্ম কন্ট্রোল, লিঙ্ক, বাটন এবং কন্টেন্ট সম্পাদনাযোগ্য এলিমেন্টগুলো ফোকাস পেতে পারে; যখন কোনো কিবোর্ড ব্যবহারকারী ট্যাব কী চাপেন, তখন ফোকাস পরবর্তী ফোকাসযোগ্য এলিমেন্টে চলে যায়, ঠিক যেমনটি tabindex="0" সেট করা থাকলে হতো। অন্যান্য এলিমেন্টগুলো ডিফল্টভাবে ফোকাসযোগ্য নয়। সেই এলিমেন্টগুলোতে tabindex অ্যাট্রিবিউট যোগ করলে, অন্যথায় ফোকাস না পেলেও সেগুলো ফোকাস পেতে সক্ষম হয়।

যদি কোনো ডকুমেন্টে 1 বা তার বেশি tabindex এলিমেন্ট থাকে, তবে সেগুলোকে একটি আলাদা ট্যাব সিকোয়েন্সে অন্তর্ভুক্ত করা হয়। কোডপেনে, সোর্স অর্ডারের সাধারণ ক্রম অনুসারে ট্যাবিং শুরু হওয়ার আগে, সর্বনিম্ন মান থেকে সর্বোচ্চ মানের ক্রমানুসারে একটি আলাদা সিকোয়েন্সে ট্যাবিং শুরু হয়।

ট্যাবিং অর্ডার পরিবর্তন করলে ব্যবহারকারীর অভিজ্ঞতা খুব খারাপ হতে পারে। এর ফলে আপনার কন্টেন্ট নেভিগেট করার জন্য কিবোর্ড এবং স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তির উপর নির্ভর করা কঠিন হয়ে পড়ে। একজন ডেভেলপারের জন্য এটি পরিচালনা এবং রক্ষণাবেক্ষণ করাও কঠিন। ফোকাস গুরুত্বপূর্ণ; ফোকাস এবং ফোকাস অর্ডার নিয়ে আলোচনা করার জন্য একটি সম্পূর্ণ মডিউল রয়েছে।

role

` role অ্যাট্রিবিউটটি WHATWG HTML স্পেসিফিকেশনের পরিবর্তে ARIA স্পেসিফিকেশনের একটি অংশ। ` role অ্যাট্রিবিউটটি কন্টেন্টকে অর্থপূর্ণ তাৎপর্য দিতে ব্যবহার করা যেতে পারে, যা স্ক্রিন রিডারদের কোনো অবজেক্টের প্রত্যাশিত ব্যবহারকারী ইন্টারঅ্যাকশন সম্পর্কে সাইট ব্যবহারকারীদের জানাতে সক্ষম করে।

কম্বোবক্স , মেনুবার , ট্যাব লিস্ট এবং ট্রিগ্রিডের মতো কিছু সাধারণ UI উইজেট আছে, যেগুলোর কোনো নেটিভ HTML সমতুল্য নেই। উদাহরণস্বরূপ, একটি ট্যাবযুক্ত ডিজাইন প্যাটার্ন তৈরি করার সময় tab , tablist এবং tabpanel রোলগুলো ব্যবহার করা যেতে পারে। যিনি ইউজার-ইন্টারফেসটি সরাসরি দেখতে পান, তিনি অভিজ্ঞতার মাধ্যমে শিখেছেন কীভাবে উইজেটটি নেভিগেট করতে হয় এবং সংশ্লিষ্ট ট্যাবগুলোতে ক্লিক করে বিভিন্ন প্যানেল দৃশ্যমান করতে হয়। যখন বিভিন্ন প্যানেল দেখানোর জন্য একগুচ্ছ বাটন ব্যবহার করা হয়, তখন <button role="tab"> সহ tab রোলটি অন্তর্ভুক্ত করলে স্ক্রিন রিডার ব্যবহারকারী জানতে পারেন যে, বর্তমানে ফোকাসে থাকা <button> টি সাধারণ বাটনের মতো কার্যকারিতা প্রয়োগ না করে একটি সম্পর্কিত প্যানেলকে দৃশ্যমান করতে পারে।

role অ্যাট্রিবিউট ব্রাউজারের আচরণ পরিবর্তন করে না বা কিবোর্ড বা পয়েন্টার ডিভাইসের ইন্টারঅ্যাকশনেও কোনো পরিবর্তন আনে না—একটি <span> এর সাথে role="button" যোগ করলে তা ` <button> -এ পরিণত হয় না। এই কারণেই সিম্যান্টিক এইচটিএমএল এলিমেন্টগুলোকে তাদের উদ্দিষ্ট উদ্দেশ্যে ব্যবহার করার পরামর্শ দেওয়া হয়। তবে, যখন সঠিক এলিমেন্ট ব্যবহার করা সম্ভব হয় না, তখন ` role অ্যাট্রিবিউট স্ক্রিন রিডার ব্যবহারকারীদের জানাতে সাহায্য করে যে, কখন একটি নন-সিম্যান্টিক এলিমেন্টকে পরে একটি সিম্যান্টিক এলিমেন্টের ভূমিকায় রূপান্তরিত করা হয়েছে।

contenteditable

যে এলিমেন্টের contenteditable অ্যাট্রিবিউটের মান ` true সেট করা থাকে, সেটি সম্পাদনাযোগ্য ও ফোকাসযোগ্য হয় এবং ট্যাব অর্ডারে এমনভাবে যুক্ত হয়, যেন tabindex="0" সেট করা আছে। Contenteditable একটি এনুমারেটেড অ্যাট্রিবিউট যা true এবং false ভ্যালু সমর্থন করে। যদি অ্যাট্রিবিউটটি উপস্থিত না থাকে বা এর কোনো অবৈধ ভ্যালু থাকে, তবে এর ডিফল্ট ভ্যালু ` inherit ।

এই তিনটি ওপেনিং ট্যাগ সমতুল্য: 

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

যদি আপনি <style contenteditable="false"> অন্তর্ভুক্ত করেন, তাহলে এলিমেন্টটি সম্পাদনাযোগ্য হয় না (যদি না এটি ডিফল্টরূপে সম্পাদনাযোগ্য হয়, যেমন একটি <textarea> )। যদি মানটি অবৈধ হয়, যেমন <style contenteditable="😀"> বা <style contenteditable="contenteditable"> , তাহলে মানটি ডিফল্টরূপে inherit ।

অবস্থা পরিবর্তন করতে, HTMLElement.isContentEditable readonly প্রপার্টির মান কোয়েরি করুন। 

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

বিকল্পভাবে, editor.contentEditable true , false বা inherit এ সেট করে এই প্রপার্টিটি নির্দিষ্ট করা যেতে পারে।

গ্লোবাল অ্যাট্রিবিউট সব এলিমেন্টে প্রয়োগ করা যায়, এমনকি <style> এলিমেন্টেও। আপনি অ্যাট্রিবিউট এবং সামান্য CSS ব্যবহার করে একটি লাইভ CSS এডিটর তৈরি করতে পারেন। 

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

style color inherit ছাড়া অন্য কিছুতে পরিবর্তন করে দেখুন। তারপর style একটি p সিলেক্টরে পরিবর্তন করার চেষ্টা করুন। 'display' প্রপার্টিটি সরাবেন না, নইলে স্টাইল ব্লকটি অদৃশ্য হয়ে যাবে।

কাস্টম অ্যাট্রিবিউট

আমরা HTML গ্লোবাল অ্যাট্রিবিউটের কেবল উপরিভাগ নিয়ে আলোচনা করেছি। আরও অনেক অ্যাট্রিবিউট আছে যা শুধুমাত্র একটি বা সীমিত সংখ্যক এলিমেন্টের ক্ষেত্রে প্রযোজ্য। শত শত সংজ্ঞায়িত অ্যাট্রিবিউট থাকা সত্ত্বেও, আপনার এমন একটি অ্যাট্রিবিউটের প্রয়োজন হতে পারে যা স্পেসিফিকেশনে নেই। HTML-এ এর সমাধানও রয়েছে।

আপনি data- প্রিফিক্স যোগ করে আপনার ইচ্ছামত যেকোনো কাস্টম অ্যাট্রিবিউট তৈরি করতে পারেন। আপনি আপনার অ্যাট্রিবিউটের যেকোনো নাম দিতে পারেন যা data- দিয়ে শুরু হয় এবং এর পরে ছোট হাতের যেকোনো অক্ষরের একটি সিরিজ থাকে, যা xml দিয়ে শুরু হয় না এবং যার মধ্যে কোলন : :) থাকে না।

এইচটিএমএল বেশ নমনীয় এবং data দিয়ে শুরু না হওয়া অসমর্থিত অ্যাট্রিবিউট তৈরি করলেও, এমনকি আপনার কাস্টম অ্যাট্রিবিউট xml দিয়ে শুরু করলেও বা একটি কোলন : যোগ করলেও এটি ভেঙে যায় না। তবুও, data- দিয়ে শুরু হওয়া বৈধ কাস্টম অ্যাট্রিবিউট তৈরি করার কিছু সুবিধা রয়েছে। কাস্টম ডেটা অ্যাট্রিবিউটের মাধ্যমে আপনি নিশ্চিত থাকতে পারেন যে আপনি ভুলবশত কোনো বিদ্যমান অ্যাট্রিবিউটের নাম ব্যবহার করছেন না। কাস্টম ডেটা অ্যাট্রিবিউটগুলো ভবিষ্যৎ-উপযোগী।

যদিও ব্রাউজারগুলো কোনো নির্দিষ্ট data- উপসর্গযুক্ত অ্যাট্রিবিউটের জন্য ডিফল্ট আচরণ প্রয়োগ করে না, আপনার কাস্টম অ্যাট্রিবিউটগুলো ব্যবহার করার জন্য একটি বিল্ট-ইন ডেটাসেট এপিআই (dataset API) রয়েছে। জাভাস্ক্রিপ্টে অ্যাপ্লিকেশন-নির্দিষ্ট তথ্য জানানোর জন্য কাস্টম প্রোপার্টি একটি চমৎকার উপায়। এলিমেন্টগুলোতে data-name আকারে কাস্টম অ্যাট্রিবিউট যোগ করুন এবং সংশ্লিষ্ট এলিমেন্টে dataset[name] ব্যবহার করে DOM-এর মাধ্যমে এগুলো অ্যাক্সেস করুন। 

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

আপনি সম্পূর্ণ অ্যাট্রিবিউটের নামটি ব্যবহার করে getAttribute() ব্যবহার করতে পারেন, অথবা আরও সহজ dataset প্রপার্টিটি ব্যবহার করতে পারেন। 

el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop

dataset প্রপার্টিটি প্রতিটি এলিমেন্টের data- অ্যাট্রিবিউটগুলোর একটি DOMStringMap অবজেক্ট রিটার্ন করে। <blockquote> এর উপর বেশ কিছু কাস্টম অ্যাট্রিবিউট রয়েছে। `dataset` প্রপার্টিটির অর্থ হলো, সেই কাস্টম অ্যাট্রিবিউটগুলোর নাম এবং মান অ্যাক্সেস করার জন্য আপনার সেগুলো কী তা জানার প্রয়োজন নেই। 

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

এই আর্টিকেলের অ্যাট্রিবিউটগুলো গ্লোবাল, অর্থাৎ এগুলো যেকোনো HTML এলিমেন্টে প্রয়োগ করা যায় (যদিও সবগুলো অ্যাট্রিবিউটের প্রভাব ওই এলিমেন্টগুলোতে পড়ে না)। এরপরে, আমরা ইন্ট্রো ইমেজের সেই দুটি অ্যাট্রিবিউট— target এবং href —যা নিয়ে আগে আলোচনা করা হয়নি, সেগুলো দেখব এবং লিঙ্ক নিয়ে আরও গভীরভাবে জানার সময় এলিমেন্ট-নির্দিষ্ট আরও কয়েকটি অ্যাট্রিবিউট সম্পর্কে জানব।

আপনার বোধগম্যতা যাচাই করুন

গুণাবলী সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।

ডকুমেন্টে একটি id অনন্য হওয়া উচিত।

মিথ্যা
আবার চেষ্টা করুন।
সত্য
সঠিক!

সঠিকভাবে গঠিত কাস্টম অ্যাট্রিবিউটটি নির্বাচন করুন।

data-birthday
সঠিক
birthday
আবার চেষ্টা করুন।
data:birthday
আবার চেষ্টা করুন