গুণাবলী

HTML-এর সংক্ষিপ্ত বিবরণে বৈশিষ্ট্যগুলি সংক্ষেপে আলোচনা করা হয়েছে। এখন গভীরভাবে অনুসন্ধানের সময়।

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

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

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

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

<!-- 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 । যদি এই অ্যাট্রিবিউটগুলির মধ্যে একটি (বা একাধিক) উপস্থিত থাকে, তবে উপাদানটি অক্ষম, প্রয়োজনীয়, readonly ইত্যাদি। যদি উপস্থিত না থাকে, তবে তা নয়।

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

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

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

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

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

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

তালিকাভুক্ত বৈশিষ্ট্য

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

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

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

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

বিশ্বব্যাপী বৈশিষ্ট্য

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

id

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

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

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

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

লিঙ্ক ফ্র্যাগমেন্ট আইডেন্টিফায়ার

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

মেশিন লার্নিং ওয়ার্কশপ সাইটে, পৃষ্ঠার শিরোনামের নেভিগেশন বারে চারটি লিঙ্ক রয়েছে:

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

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

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

সিএসএস নির্বাচক

CSS-এ, আপনি #feedback এর মতো anselector ব্যবহার করে প্রতিটি বিভাগকে লক্ষ্য করতে পারেন। কম নির্দিষ্টতার জন্য, একটি কেস-সংবেদনশীল অ্যাট্রিবিউট নির্বাচক ব্যবহার করুন, [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 ব্যবহার লেবেলের বাইরেও বিস্তৃত। text এর ভূমিকায় , <section> এর aria-labelledby এর মান হিসাবে <h2> এর id উল্লেখ করে একটি <section> অঞ্চল ল্যান্ডমার্কে রূপান্তরিত করা হয়েছিল যাতে অ্যাক্সেসযোগ্য নাম প্রদান করা যায়:

<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 অ্যাট্রিবিউটটি সিএসএস (এবং জাভাস্ক্রিপ্ট) দিয়ে এলিমেন্টগুলিকে টার্গেট করার একটি অতিরিক্ত উপায় প্রদান করে, কিন্তু HTML-এ অন্য কোনও উদ্দেশ্যে কাজ করে না (যদিও ফ্রেমওয়ার্ক এবং কম্পোনেন্ট লাইব্রেরিগুলি এগুলি ব্যবহার করতে পারে)। ক্লাস অ্যাট্রিবিউটটি এলিমেন্টের জন্য কেস-সংবেদনশীল ক্লাসগুলির একটি স্থান-বিভাজিত তালিকাকে তার মান হিসাবে গ্রহণ করে।

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

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

style

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

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

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

tabindex

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

tabindex অ্যাট্রিবিউটটি তার মান হিসেবে একটি পূর্ণসংখ্যা গ্রহণ করে। একটি নেতিবাচক মান (প্রচলিত মান হল -1 ব্যবহার করা) একটি উপাদানকে ফোকাস গ্রহণ করতে সক্ষম করে, যেমন জাভাস্ক্রিপ্টের ক্ষেত্রে, কিন্তু ট্যাবিং সিকোয়েন্সে উপাদানটি যোগ করে না। 0 এর একটি tabindex মান উপাদানটিকে ফোকাসযোগ্য এবং ট্যাবিংয়ের মাধ্যমে পৌঁছানো যায়, এটি সোর্স কোড ক্রমে পৃষ্ঠার ডিফল্ট ট্যাব ক্রমে যুক্ত করে। 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

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

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

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

কাস্টম বৈশিষ্ট্য

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

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

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

যদিও ব্রাউজারগুলি কোনও নির্দিষ্ট data- প্রিফিক্সড অ্যাট্রিবিউটের জন্য ডিফল্ট আচরণ বাস্তবায়ন করবে না, তবুও আপনার কাস্টম অ্যাট্রিবিউটের মাধ্যমে পুনরাবৃত্তি করার জন্য একটি অন্তর্নির্মিত ডেটাসেট 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> এ বেশ কয়েকটি কাস্টম অ্যাট্রিবিউট রয়েছে। ডেটাসেট প্রোপার্টি মানে হল যে আপনাকে তাদের নাম এবং মান অ্যাক্সেস করার জন্য সেই কাস্টম অ্যাট্রিবিউটগুলি কী তা জানার প্রয়োজন নেই:

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

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

তোমার বোধগম্যতা পরীক্ষা করো।

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