গুণাবলী

HTML এর ওভারভিউতে বৈশিষ্ট্যগুলি সংক্ষিপ্তভাবে আলোচনা করা হয়েছে; এটি একটি গভীর ডুব জন্য সময়.

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

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

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

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

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

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

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

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

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

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

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

মনে রাখবেন যে XML ভাষায়, SVG-এর মতো, বুলিয়ান অ্যাট্রিবিউট সহ সমস্ত বৈশিষ্ট্যের একটি মান অন্তর্ভুক্ত করতে হবে।

গণিত গুণাবলী

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

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

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

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

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

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

id

গ্লোবাল অ্যাট্রিবিউট id একটি উপাদানের জন্য একটি অনন্য শনাক্তকারী সংজ্ঞায়িত করতে ব্যবহৃত হয়। এটি অনেকগুলি উদ্দেশ্যে কাজ করে, যার মধ্যে রয়েছে: - একটি লিঙ্কের খণ্ড শনাক্তকারীর লক্ষ্য৷ - স্ক্রিপ্টিংয়ের জন্য একটি উপাদান সনাক্ত করা। - একটি ফর্ম উপাদান এর লেবেলের সাথে সংযুক্ত করা। - সহায়ক প্রযুক্তির জন্য একটি লেবেল বা বিবরণ প্রদান করা। - CSS-এ (উচ্চ নির্দিষ্টতা বা বৈশিষ্ট্য নির্বাচক হিসাবে) সহ লক্ষ্যবস্তু শৈলী।

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

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

লিংক ফ্র্যাগমেন্ট শনাক্তকারী

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

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

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

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

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

CSS-এ, আপনি একটি আইডি নির্বাচক ব্যবহার করে প্রতিটি বিভাগকে লক্ষ্য করতে পারেন, যেমন #feedback বা, কম নির্দিষ্টতার জন্য, একটি কেস-সংবেদনশীল বৈশিষ্ট্য নির্বাচক , [id="feedback"] ।

স্ক্রিপ্টিং

MLW.com-এ, শুধুমাত্র মাউস ব্যবহারকারীদের জন্য একটি ইস্টার ডিম রয়েছে। আলোর সুইচটিতে ক্লিক করলে পৃষ্ঠাটি চালু এবং বন্ধ হয়ে যায়।

লাইট সুইচ ইমেজের মার্কআপ হল: html <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 js, so we us onoff instead */
  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 ব্যবহার লেবেলের মধ্যে সীমাবদ্ধ নয়। পাঠ্যের ভূমিকায় , অ্যাক্সেসযোগ্য নাম প্রদানের জন্য <section> এর aria-labelledby এর মান হিসাবে একটি <h2> এর id উল্লেখ করে একটি <section> অঞ্চলের ল্যান্ডমার্কে রূপান্তরিত হয়েছিল:

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

অ্যাক্সেসযোগ্যতা নিশ্চিত করতে 50টির বেশি aria-* রাজ্য এবং বৈশিষ্ট্য রয়েছে যা ব্যবহার করা যেতে পারে। aria-labelledby , aria-describedby , aria-details এবং aria-owns তাদের মান হিসেবে গ্রহণ করে একটি স্থান-বিচ্ছিন্ন id রেফারেন্স তালিকা। aria-activedescendant , যা বর্তমানে ফোকাস করা ডিসেন্ডেন্ট এলিমেন্টকে শনাক্ত করে, তার মান হিসেবে নেয় একটি একক id রেফারেন্স: যে একক উপাদানের ফোকাস রয়েছে (এক সময়ে শুধুমাত্র একটি উপাদান ফোকাস করা যেতে পারে)।

দ্রষ্টব্য: aria-labelledby ব্যবহার করে, আপনি একটি ফর্ম কন্ট্রোল থেকে একাধিক লেবেলে একটি বিপরীত অ্যাসোসিয়েশন তৈরি করতে পারেন, যার মধ্যে পাঠ্যটি একটি <label> এ নেস্ট করা হয়নি, টেক্সট লেবেল একাধিক ফর্ম নিয়ন্ত্রণ করুক বা না করুক। যদি একটি নিয়ন্ত্রণে <label> এবং aria-labelledby উভয়ই থাকে, তাহলে aria-labelledby অগ্রাধিকার থাকে; ব্যবহারকারীরা <label> পাঠ্য শুনতে পাবে না যদি না aria-labelledby লেবেলের আইডি অন্তর্ভুক্ত করে।

class

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

দ্রষ্টব্য: উপাদানের নাম, বৈশিষ্ট্য, বৈশিষ্ট্যের মান, DOM ট্রির মধ্যে অবস্থান ইত্যাদির উপর ভিত্তি করে CSS নির্বাচক এবং DOM পদ্ধতির সাহায্যে উপাদান নির্বাচন করা যেতে পারে। শব্দার্থিক HTML অর্থপূর্ণ হুক প্রদান করে, যার ফলে ক্লাসের নামগুলি প্রায়ই অপ্রয়োজনীয় হয়। একটি ক্লাসের নাম অন্তর্ভুক্ত করা এবং document.getElementsByClassName() ব্যবহার করা বনাম আরও শক্তিশালী document.querySelectorAll() সহ অ্যাট্রিবিউট এবং পৃষ্ঠার কাঠামোর উপর ভিত্তি করে টার্গেট করা উপাদানগুলির মধ্যে অনন্য পার্থক্য হল যে পূর্ববর্তীটি একটি লাইভ নোড তালিকা প্রদান করে, পরবর্তীটি স্থির।

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

এখন পর্যন্ত, 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

role বৈশিষ্ট্যটি WHATWG HTML স্পেসিফিকেশনের পরিবর্তে 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 শুধুমাত্র পঠনযোগ্য সম্পত্তির মান জিজ্ঞাসা করুন৷

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

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

গ্লোবাল অ্যাট্রিবিউট সব উপাদান, এমনকি <style> উপাদানগুলিতে প্রয়োগ করা যেতে পারে। আপনি একটি লাইভ সিএসএস এডিটর তৈরি করতে বৈশিষ্ট্য এবং কিছুটা 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>

inherit ছাড়া অন্য কিছুতে style color পরিবর্তন করার চেষ্টা করুন। তারপর একটি p নির্বাচক style পরিবর্তন করার চেষ্টা করুন. প্রদর্শন সম্পত্তি অপসারণ করবেন না বা শৈলী ব্লক অদৃশ্য হয়ে যাবে।

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

আমরা শুধুমাত্র 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 এবং আরও কিছু উপাদান-নির্দিষ্ট বৈশিষ্ট্যগুলি যখন আমরা লিঙ্কগুলিতে গভীরভাবে নজর দিই।

আপনার উপলব্ধি পরীক্ষা করুন

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

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

মিথ্যা

আবার চেষ্টা করুন

সত্য

সঠিক!

সঠিকভাবে গঠিত কাস্টম বৈশিষ্ট্য নির্বাচন করুন.

data-birthday

সঠিক

birthday

আবার চেষ্টা করুন

data:birthday

আবার চেষ্টা করুন