কিভাবে HTML এট্রিবিউট ব্যবহার করবেন

এইচটিএমএল অ্যাট্রিবিউট ব্যবহার করতে শিখুন, সবচেয়ে বেশি ব্যবহৃত কিছু অ্যাট্রিবিউটের নাম এবং মান দেখে।

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

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

কোনো যোগ করা বৈশিষ্ট্য ছাড়াই একটি HTML উপাদান দেখতে এই রকম:

<tag>Content</tag>

HTML উপাদান গুণ সহ এইভাবে সংজ্ঞায়িত করা হয়:

<tag attribute="value">Content</tag>

সেই মডেলটিকে মাথায় রেখে, আসুন কিছু ব্যবহারিক বৈশিষ্ট্যের উদাহরণ দেখি।

The href অ্যাট্রিবিউট

href অ্যাট্রিবিউট হল HTML-এর সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্যগুলির মধ্যে একটি৷

href এর জন্য ইউআরএল নির্দিষ্ট করার জন্য ব্যবহৃত হয়:

• হাইপারলিঙ্ক (একে শুধু "লিঙ্ক"ও বলা হয়)।
• অথবা বাহ্যিক সম্পদ আমদানির জন্য, যেমন শৈলী এবং স্ক্রিপ্ট।

href-এর সবচেয়ে সাধারণ ব্যবহার নোঙ্গর উপাদান <a> লিঙ্ক URL যোগ করা হয় :

<a href="url-path">Link text</a>

এই লিঙ্কগুলি ব্যবহারকারীদের অভ্যন্তরীণভাবে, পৃষ্ঠা থেকে পৃষ্ঠায় তাদের উপায়ে ক্লিক করতে দেয়৷ (একই ওয়েবসাইট/ডোমেনে), অথবা বাহ্যিকভাবে (অন্যান্য ওয়েবসাইট ডোমেনে)।

অভ্যন্তরীণ লিঙ্ক

অভ্যন্তরীণ লিঙ্কগুলি একটি আপেক্ষিক পথ ব্যবহার করে:

<a href="/">Home</a>

একটি মান হিসাবে, "/" যেকোনো ওয়েবসাইটের প্রথম পৃষ্ঠায় নিয়ে যায়, যেটি হল index.html পৃষ্ঠা।

আপনার যদি সম্পর্কে নামে একটি পৃষ্ঠা থাকে এবং একটি সংশ্লিষ্ট HTML নথি যাকে বলা হয় about.html , আপনি অভ্যন্তরীণভাবে এটির সাথে এইভাবে লিঙ্ক করতে পারেন:

<a href="/about">About</a>

এই লিঙ্কটি টেকস্ট্যাকারের সম্বন্ধে পৃষ্ঠায় নিয়ে যায়

বাহ্যিক লিঙ্ক

বাহ্যিক লিঙ্কগুলির একটি পরম পথ প্রয়োজন:

<a href="https://www.youtube.com">Go to YouTube.com</a>

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

যখন আমরা অ্যাঙ্কর এলিমেন্ট নিয়ে কাজ করছি, চলুন আরেকটা গুরুত্বপূর্ণ অ্যাঙ্কর এলিমেন্ট অ্যাট্রিবিউট, target দেখে নেওয়া যাক। বৈশিষ্ট্য।

target বৈশিষ্ট্য কোথায় নির্দিষ্ট করে ব্যবহারকারীরা ক্লিক করলে লিঙ্কগুলি খুলতে।

উদাহরণস্বরূপ, আপনি যদি নীচের বাহ্যিক লিঙ্কে ক্লিক করেন তবে আপনাকে একই-এ YouTube.com-এ নিয়ে যাওয়া হবে আপনি এই মুহূর্তে ব্রাউজার ট্যাব উইন্ডোতে আছেন:

<a href="https://www.youtube.com/">Go to YouTube.com</a>

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 লিঙ্কটি একটি নতুন ব্রাউজার ট্যাবে খুলবে:

YouTube.com এ যান (নতুন ট্যাব)

আমি আমার YouTube চ্যানেল প্রচার করার জন্য এই সুযোগটি ব্যবহার করব:

আমার YouTube চ্যানেলের লিঙ্ক (TechStacker)।

অ্যাঙ্কর/লিঙ্ক উপাদান সম্পর্কে আরও পড়ুন।

মান ছাড়া গুণাবলী

একটি বৈশিষ্ট্য সাধারণত একটি অ্যাট্রিবিউটের নাম এবং একটি অ্যাট্রিবিউট মান থাকে, যেমন অ্যাঙ্কর উপাদান উদাহরণে।

যাইহোক, কখনও কখনও মান (আচরণ) বৈশিষ্ট্যের নামের সাথে অন্তর্নির্মিত।

উদাহরণস্বরূপ, defer HTML <script> পরিবর্তন করার জন্য বৈশিষ্ট্য উপাদান:

<script defer src="app.js"></script>

লক্ষ্য করুন যে defer অ্যাট্রিবিউটের কোনো অ্যাসাইনমেন্ট অপারেটর নেই (= ) বা মান কারণ এর আচরণ অন্তর্নির্মিত।

defer একটি তথাকথিত বুলিয়ান বৈশিষ্ট্য বুলিয়ানগুলি এমন এক ধরনের ডেটার জন্য ব্যবহার করা হয় যার শুধুমাত্র দুটি মান থাকতে পারে, সত্য অথবা মিথ্যা (বা সক্ষম/অক্ষম করুন )।

চলুন defer-কে ঘনিষ্ঠভাবে দেখে নেওয়া যাক বৈশিষ্ট্য।

এই <script> উপাদান, ছাড়া defer attribute, তার src চালাবে app.js থেকে জাভাস্ক্রিপ্ট কোড ব্রাউজার এটি লোড করার সাথে সাথে মান:

<script src="app.js"></script>

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

এটাই ডিফল্ট স্ক্রিপ্ট উপাদানের আচরণ।

কিন্তু যখন আপনি defer যোগ করেন <script>-এ উপাদান আপনি সেই ডিফল্ট আচরণ অক্ষম করুন:

<script defer src="app.js"></script>

এখন, পুরো পৃষ্ঠাটি লোড করা শেষ না হওয়া পর্যন্ত জাভাস্ক্রিপ্ট কোডটি কার্যকর হবে না৷

আক্ষরিক অর্থে, স্থগিত করুন মানে বন্ধ/স্থগিত/অপেক্ষা করুন।

মৃত ঘোড়াকে মারতে:

• defer ছাড়া , জাভাস্ক্রিপ্ট লোড হওয়ার সাথে সাথে এটি কার্যকর হয়।
• এর সাথে defer সম্পূর্ণ HTML পৃষ্ঠা লোড না হওয়া পর্যন্ত JavaScript কার্যকর করার জন্য অপেক্ষা করে।

যদি বৈশিষ্ট্যগুলি আপনাকে বিভ্রান্ত করে, চিন্তা করবেন না, আপনি একবার অনুশীলনে সেগুলি ব্যবহার করা শুরু করলে এটি সর্বদা 10 গুণ বেশি অর্থবোধক হয়৷

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

আপনি কাস্টম বৈশিষ্ট্যগুলিও তৈরি করতে পারেন, যা আপনি জাভাস্ক্রিপ্ট দিয়ে নিয়ন্ত্রণ করতে পারেন। কাস্টম অ্যাট্রিবিউট নামের আগে একটি data- লিখতে হবে লেবেল:

<tag data-custom-attribute-name="value">Content</tag>

উদাহরণস্বরূপ, ধরা যাক আমাদের “আপেল” নামে একটি খাদ্য উপাদান আছে . যখন একজন ব্যবহারকারী এটিতে ক্লিক করেন, আমরা কি টাইপ প্রদর্শন করতে চাই খাবারের এটি একটি পপআপ ডায়ালগ বক্সে রয়েছে৷

এটি করার জন্য আমরা food-type নামে একটি কাস্টম অ্যাট্রিবিউট তৈরি করব ( data- মনে রাখবেন লেবেল) এবং এটি একটি <div> এ যোগ করুন Apple সহ উপাদান ভিতরে পাঠ্য:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

এবং জাভাস্ক্রিপ্ট যে বৈশিষ্ট্যটি কাজ করে:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

এখানে একটি ডেমো।

এইচটিএমএল কোড কিভাবে কাজ করে:

• প্রথম, আমরা একটি onclick যোগ করেছি <div>-এর বৈশিষ্ট্য উপাদান এটি একটি ইভেন্ট অ্যাট্রিবিউট যা একটি ইভেন্ট শ্রোতাকে সংযুক্ত করে যা শোনে... আপনি এটি অনুমান করেছেন, ক্লিক করুন!
• তারপর আমরা showDetailsBox(this) এর একটি অ্যাট্রিবিউট মান বরাদ্দ করি onclick-এ বৈশিষ্ট্য।
• showDetailsBox() জাভাস্ক্রিপ্ট ফাংশনের নাম যা আপনি Apple টেক্সট এলিমেন্টে ক্লিক করার সাথে সাথেই কল হয়ে যায়।
• this (this) এর অংশ একটি যুক্তি যা এটির (এটি) অন্তর্গত বস্তুকে বোঝায় নতুনদের জন্য একটু উন্নত, না বুঝলে ঠিক আছে)।
• id HTML উপাদানগুলির জন্য একটি অনন্য আইডি নির্দিষ্ট করতে ব্যবহৃত একটি অন্তর্নির্মিত HTML বৈশিষ্ট্য। এই ক্ষেত্রে, আমাদের অনন্য আইডি হল apple .

কিভাবে জাভাস্ক্রিপ্ট কোড কাজগুলি এই HTML টিউটোরিয়ালের সুযোগের বাইরে, তাই আমি আপনাকে একটি সরলীকৃত ব্যাখ্যা দেব:

যখন showDetailsBox() ফাংশনটিকে onclick দ্বারা ডাকা হয় ইভেন্ট অ্যাট্রিবিউট, এটি তার কোড ব্লক { ... } নির্বাহ করে বিষয়বস্তু:

function showDetailsBox(food) {
  ...
}

কোড ব্লকের ভিতরের প্রথম লাইনে, জাভাস্ক্রিপ্ট কাস্টম 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 ওয়েব ডক্স HTML অ্যাট্রিবিউট রেফারেন্সের মাধ্যমে খনন করার পরামর্শ দিচ্ছি।

গুরুত্বপূর্ণ: ডেটা অ্যাট্রিবিউটের মধ্যে দৃশ্যমান এবং অ্যাক্সেসযোগ্য হওয়া উচিত এমন গুরুত্বপূর্ণ সামগ্রী সংরক্ষণ করবেন না, কারণ সহায়ক প্রযুক্তি কখনও কখনও তাদের অ্যাক্সেস করে না। ক্রলার অনুসন্ধান করুন হতে পারে৷ এছাড়াও সূচী ডেটা বৈশিষ্ট্য মান না — তাই এখানে কোনো গুরুত্বপূর্ণ SEO বিষয়বস্তু রাখবেন না।