HTML এর বিভিন্ন Element যেমন – Text, ছবি এবং লিঙ্ক ইত্যাদি ওয়েবসাইটে প্রদর্শনের জন্য ব্যবহৃত হয়। এই ট্যাগগুলির একটি গুরুত্বপূর্ণ অংশ হল “Attributes”। HTML Attributes ট্যাগের সাথে অতিরিক্ত তথ্য বহন করে, যা ওয়েবপেজের বিভিন্ন অংশের আচরণ এবং প্রদর্শন কেমন হবে তা নির্ধারণ করে।এই ব্লগে আমরা HTML Attributes নিয়ে বিশদভাবে আলোচনা করব, তাদের বৈশিষ্ট্য, ব্যবহার এবং বিভিন্ন উদাহরণ সম্পর্কে জানব।
Table of Contents
HTML Attributes কী?
HTML Attributes হল ট্যাগের মধ্যে থাকা অতিরিক্ত তথ্য যা ওয়েব ব্রাউজারকে বলে দেয় কিভাবে সেই ট্যাগটি কাজ করবে। Attributes সবসময় একটি ট্যাগের শুরুতেই লেখা হয় এবং এটি ট্যাগের অতিরিক্ত কার্যক্ষমতা নির্ধারণ করে।
প্রতিটি Attribute দুইটি অংশ নিয়ে গঠিত:
- Name: Attribute এর নাম, যা নির্দিষ্ট একটি Attribute কে চিহ্নিত করে । যেমন :- title এটি হলো Attribute এর নাম।
- Value: Attribute এর Value, প্রত্যেকটি Attribute এর কমপক্ষে একটি করে ভ্যালু থাকে। যেমন :- “This is a paragraph.” এটি হলো Attribute এর Value।
<p title="This is a paragraph.">This is a paragraph.</p>উপরের উদাহরণে, <p> ট্যাগের একটি Attribute আছে যার Name হলো “title” এবং Value হলো “This is a paragraph”। যখন আপনি মাউসটি এই প্যারাগ্রাফের উপর নিয়ে যাবেন, তখন “This is a paragraph” টুলটিপ হিসেবে প্রদর্শিত হবে।
HTML Attributes এর প্রধান বৈশিষ্ট্য
- Attributes সবসময় ট্যাগের শুরুতেই থাকবে , এবং এটি ট্যাগে সম্পর্কে অতিরিক্ত তথ্য বহন করে।
- প্রতিটি Attribute একটি নাম এবং একটি ভ্যালু নিয়ে তৈরী হয়।
href="https://techinbengali.com"এhrefহল Attribute এর Nameএবংhttps://techinbengali.comহল Attribute এর Value। - Attribute এর value সবসময় ডাবল বা সিঙ্গেল কোয়োটেশনের মধ্যে লেখা হয়। যেমন :
class="Classname"।
HTML Comments : https://youtu.be/wgEGK6QcuFU?si=hDsp2L9mT8N7bDiX
Most important HTML Attributes
HTML এ কিছু Attributes খুবই জনপ্রিয় এবং প্রায় প্রতিটি ট্যাগেই ব্যবহার করা হয়। আসুন সেগুলি নিয়ে আলোচনা করি:
title Attribute
title Attribute ট্যাগের উপর hover করলে একটি টুলটিপ প্রদর্শিত হয়। যেটি সাধারণত ব্যবহারকারীদের অতিরিক্ত তথ্য প্রদান করে।
<p title="This is a paragraph">This is a paragraph.</p>যখন ব্যবহারকারী লিঙ্কের উপর মাউস hover করবে, তখন “This is a paragraph” টুলটিপ হিসেবে প্রদর্শিত হবে।
height and width Attribute
height এবং width Attributes ছবি, ভিডিও, বা অন্যান্য মিডিয়া element এর height এবং width নির্ধারণ করতে ব্যবহৃত হয়। এগুলি নির্দিষ্ট মান অনুযায়ী মিডিয়ার আকার নিয়ন্ত্রণ করে।
<img src="cat_image.jpg" alt="image of cat" width="500" height="300">উপরের উদাহরণে, width="500" এবং height="300" দ্বারা ছবির width 500 পিক্সেল এবং height 300 পিক্সেল নির্ধারণ করা হয়েছে।
style Attribute
style Attribute সরাসরি একটি HTML ট্যাগে CSS স্টাইল প্রয়োগ করতে ব্যবহৃত হয়। এটি ইনলাইন স্টাইলিং এর জন্য ব্যবহার হয়, যেখানে ট্যাগের ভিতরেই css কোড লেখা হয়।
<p style="color: blue; font-size: 20px;">Blue Paragraph </p>এখানে, style="color: blue; font-size: 20px;" দ্বারা প্যারাগ্রাফের color এবং size নির্ধারণ করা হয়েছে।
lang Attribute
lang Attribute webpage এর language নির্ধারণ করতে ব্যবহৃত হয়। এটি সার্চ ইঞ্জিন এবং স্ক্রিন রিডারগুলিকে বলে দেয় কোন ভাষায় কনটেন্ট লেখা হয়েছে।
<html lang="bn">
<p>এটি বাংলা ভাষায় লেখা একটি প্যারাগ্রাফ।</p>
</html>এখানে, lang="bn" মানে ট্যাগের কনটেন্ট বাংলা ভাষায় লেখা।
src Attribute
src Attribute সাধারণত ছবি প্রদর্শনের জন্য ব্যবহৃত হয় এবং img ট্যাগের মধ্যে লেখা হয়। এটি ব্রাউজারকে বলে দেয় কোথা থেকে ছবিটি লোড করতে হবে।
<img src="image.jpg">alt Attribute
alt Attribute ছবির জন্য একটি বিকল্প টেক্সট প্রদান করে, যখন ছবিটি লোড হতে ব্যর্থ হয় সেই ক্ষেত্রে এটি দেখায়। এটি SEO র জন্য গুরুত্বপূর্ণ।
<img src="cat.jpg" alt="image of cat">alt ট্যাগের মধ্যে image of cat লেখা আছে যেটির মাধ্যমে user বুঝতে পারবে ছবিটি একটি cat এর।
href Attribute
href Attribute মূলত a ট্যাগের সাথে লিঙ্ক তৈরির জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় নিয়ে যেতে সাহায্য করে।
<a href="https://techinbengali.com">click here</a>যখন click here এ ক্লিক করবে তখন techinbengali.com তে redirect হবে।
class Attribute
class Attribute এর সাহায্যে যে কোনো এলিমেন্টকে পরিবর্তন করা যায়। একাধিক এলিমেন্টে একই ক্লাস ব্যবহার করা যেতে পারে।
<p class="intro">this is a paragraph</p>id Attribute
id Attribute HTML এর প্রতিটি এলিমেন্টকে একটি unique id প্রদান করে, যা JavaScript বা CSS এর মাধ্যমে নির্দিষ্ট কাজ সম্পাদনের জন্য ব্যবহৃত হয়। প্রতিটি পৃষ্ঠায় একটি মাত্র এলিমেন্টে একটি নির্দিষ্ট id থাকতে পারে।
<p id="main-paragraph">this is main paragraph.</h1>HTML Attributes এর ব্যবহার
- স্টাইলিং এবং ডিজাইন: Attributes CSS এর সাথে ব্যবহার করে বিভিন্ন এলিমেন্টকে স্টাইল করা যায়।
classএবংidএর মাধ্যমে একাধিক এলিমেন্টকে একই স্টাইল প্রদান করা যায়। - লিঙ্ক এবং নেভিগেশন: Attributes ব্যবহার করে ওয়েবসাইটের বিভিন্ন page লিঙ্ক করা যায়।
hrefAttribute এর মাধ্যমে ব্যবহারকারীকে ভিন্ন পৃষ্ঠায় নিয়ে যাওয়া যায়। - ইন্টারঅ্যাকশন এবং কার্যকারিতা: Attributes JavaScript এর মাধ্যমে ওয়েবসাইটে ইন্টারঅ্যাকটিভিটি এবং কার্যকারিতা যোগ করতে ব্যবহৃত হয়। উদাহরণস্বরূপ,
idAttribute ব্যবহার করে নির্দিষ্ট এলিমেন্টের সাথে কাজ করা সম্ভব।
উপসংহার
HTML Attributes একটি webpage বিভিন্ন উপাদানের সাথে ইন্টারঅ্যাকটিভিটি এবং কার্যকারিতা যোগ করার জন্য অপরিহার্য। এগুলি ওয়েব ব্রাউজারকে বলে দেয় কিভাবে একটি নির্দিষ্ট ট্যাগ কাজ করবে এবং এর সাথে কি ধরনের তথ্য যুক্ত থাকবে। Attributes এর সঠিক ব্যবহার ওয়েব ডেভেলপমেন্টে স্টাইল, ইন্টারঅ্যাকশন, এবং অ্যাক্সেসিবিলিটি উন্নত করতে সাহায্য করে।
একটি ওয়েবসাইট তৈরির জন্য HTML Attributes এর ব্যবহার জানা অত্যন্ত গুরুত্বপূর্ণ। তাই, HTML Attributes এর উপর দক্ষতা অর্জন করে আপনি ওয়েব ডেভেলপমেন্টের ক্ষেত্রে আরও ভালো হতে পারবেন।
F.A.Q
HTML Attributes কী?
HTML Attributes হলো ট্যাগের মধ্যে থাকা অতিরিক্ত তথ্য যা ওয়েব ব্রাউজারকে বলে দেয় কিভাবে সেই ট্যাগটি কাজ করবে।
HTML প্যারাগ্রাফের জন্য কোন Attributes ব্যবহার করা হয়?
HTML প্যারাগ্রাফে সাধারণত class, id, style, এবং title Attribute ব্যবহার করা হয়। উদাহরণস্বরূপ, style – Attribute দিয়ে প্যারাগ্রাফের রঙ, ফন্ট সাইজ ইত্যাদি নির্ধারণ করা যায়। title – Attribute দিয়ে প্যারাগ্রাফের উপর হোভার করলে অতিরিক্ত তথ্য দেখানো যায়।
HTML ট্যাগে class এবং id Attribute এর পার্থক্য কী?
class Attribute একাধিক HTML এলিমেন্টে একই স্টাইল প্রয়োগ করতে ব্যবহৃত হয়, যেখানে id Attribute প্রতিটি এলিমেন্টকে একটি ইউনিক আইডি প্রদান করে। প্রতিটি webpage একটি নির্দিষ্ট id একবারই ব্যবহার করা যায়, কিন্তু class একাধিকবার ব্যবহার করা যেতে পারে।
HTML এ a(anchor) ট্যাগের সাথে কোন Attribute ব্যবহার করে ওয়েবপেজকে লিংক করা হয়?
a(anchor) ট্যাগের সাথে href Attribute ব্যবহার করে HTML এ লিঙ্ক তৈরি করা হয়। a ট্যাগের সাথে href ব্যবহার করে যেকোনো URL add করা যায়। উদাহরণস্বরূপ, <a href="https://techinbengali.com">Click Here</a> এর মাধ্যমে একটি লিঙ্ক তৈরি করা যায়।
HTML এ src এবং alt Attribute কী এবং এর কাজ কী?
src Attribute ছবির source বা লোকেশন নির্দেশ করে, এবং alt Attribute সেই ছবির জন্য বিকল্প টেক্সট প্রদান করে, যেটি প্রদর্শিত হয় ছবিটি লোড না হলে। এছাড়াও alt Attribute SEO এবং অ্যাক্সেসিবিলিটি উন্নত করে।
HTML এ style Attribute ব্যবহার কীভাবে করা যায়?
style Attribute ব্যবহার করে ইনলাইন CSS প্রয়োগ করা যায়। উদাহরণস্বরূপ, <p style=”color: blue;”>This is a blue text.</p> এর মাধ্যমে প্যারাগ্রাফের টেক্সটকে নীল রঙে প্রদর্শন করা যাবে।
HTML এ lang Attribute এর কাজ কী?
lang Attribute HTML ট্যাগে ব্যবহার করে একটি ওয়েবপেজের ভাষা নির্ধারণ করা হয়। এটি সার্চ ইঞ্জিন এবং স্ক্রিন রিডারকে বলে দেয় যে ওয়েবপেজটি কোন ভাষায় লেখা হয়েছে। উদাহরণস্বরূপ, <html lang="bn"> দ্বারা পৃষ্ঠাটি বাংলায় লেখা হয়েছে বোঝানো হয়।
HTML এ title Attribute এর ব্যবহার কী?
title Attribute একটি HTML এলিমেন্টে অতিরিক্ত তথ্য প্রদান করে, যা ব্যবহারকারীর মাউস হোভার করলে টুলটিপ হিসেবে প্রদর্শিত হয়।
উদাহরণস্বরূপ, <a href=”techinbengali.com” title=”Go to Homepage”>Home</a> ব্যবহার করলে হোভার করলে “Go to Homepage” টেক্সট দেখা যাবে।
HTML এ height এবং width Attribute এর সঠিক ব্যবহার কী?
height এবং width Attribute সাধারণত img, video, বা অন্যান্য মিডিয়া এলিমেন্টের height এবং width নির্ধারণ করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, <img src="image.jpg" width="500" height="300"> এর মাধ্যমে ছবির width 500 px পিক্সেল এবং height 300px পিক্সেল নির্ধারণ করা যায়।
