HTML এর মাধ্যমে আমরা ওয়েবপেজে বিভিন্ন ধরণের তথ্যগুলোকে সাজানো এবং সুন্দরভাবে প্রদর্শনের জন্য HTML List ব্যবহৃত হয়। লিস্ট বা তালিকা আমাদের তথ্যকে আরো সহজে বুঝতে সাহায্য করে তোলে। HTML এ সাধারণত তিন ধরণের লিস্ট আছে: Ordered List ,Unordered List , এবং Description List। এই ব্লগে আমরা HTML এর এই তিন ধরণের লিস্ট, তাদের গঠন, এবং ব্যবহার নিয়ে বিস্তারিত আলোচনা করব।
Table of Contents
What is List in HTML ?
HTML এ List হল এমন একটি element যার মাধ্যমে বিভিন্ন তথ্য বা item গুলিকে নির্দিষ্ট ভাবে উপস্থাপন করা যায়। HTML এ তিন ধরনের লিস্ট রয়েছে: Ordered List (<ol>), Unordered List (<ul>), এবং Description List (<dl>)।
Types of List in HTML
HTML এ তিন ধরণের List রয়েছে:
- Ordered List (
<ol>) - Unordered List (
<ul>) - Description List (
<dl>)
Ordered List (<ol>):
Ordered List ব্যবহার করে আপনি এমন একটি তালিকা তৈরি করতে পারেন যেখানে প্রতিটি Item একটি ক্রমানুসারে সংখ্যা থাকে। এটি 1, 2, 3 অথবা A, B, C ইত্যাদি হতে পারে। HTML এ Ordered List তৈরি করতে <ol> ট্যাগ এবং প্রতিটি আইটেমের জন্য <li> (List Item) ট্যাগ ব্যবহার করা হয়।
Syntax :
<ol>
<li>HTML</li>
<li>CSS</li>
.........
</ol>Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<ol>
<li>Ram</li>
<li>Sham</li>
<li>jodu</li>
</ol>
</body>
</html>Output
- Ram
- Sham
- jodu
How to change the style of Ordered list ?
এখানে প্রতিটি Item কে সংখ্যা দিয়ে দেখানো হয়েছে। আপনি চাইলে এটাকেও পরিবর্তন করতে পারবেন। তবে সেটির জন্য ol ট্যাগে type নামক একটি attribute যোগ করতে হবে এবং Value হিসাবে নিচের যে কোনো একটি Value দিতে হবে।
Attribute: type
Ordered List এ আপনি type Attribute ব্যবহার করে list সংখ্যার স্টাইল change করতে পারেন।
- type=”
1": প্রতিটি item গুলিকে 1, 2, 3 … হিসেবে দেখায়। - type=”
A": প্রতিটি item গুলিকে বড় হাতের অক্ষর A, B, C … হিসেবে দেখায়। - type=”a” : প্রতিটি item গুলিকে ছোট হাতের অক্ষর a, b, c … হিসেবে দেখায়।
- type=”I” : প্রতিটি item গুলিকে বড় রোমান সংখ্যা I, II, III … হিসেবে দেখায়।
- type=”i” : প্রতিটি item গুলিকে ছোট রোমান সংখ্যা i, ii, iii … হিসেবে দেখায়।
নিচের উদাহরনটি দেখুন:
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<ol type="i" >
<li>Ram</li>
<li>Sham</li>
<li>jodu</li>
</ol>
</body>
</html>Output
i. Ram
ii. Sham
iii. joduএখানে আইটেমগুলো i, ii, iii … দিয়ে দেখাচ্ছে।
Unordered List (<ul>):
Unordered List ব্যবহার করে এমন একটি তালিকা তৈরি করা হয় যেখানে প্রতিটি আইটেম বুলেট পয়েন্ট দিয়ে দেখানো হয়েছে। এটি সাধারণত তখন ব্যবহার করা হয় যখন তালিকার আইটেমগুলির কোনো নির্দিষ্ট order প্রয়োজন হয় না। Unordered List তৈরি করতে <ul> ট্যাগ এবং প্রতিটি আইটেমের জন্য <li> ট্যাগ ব্যবহার করা হয়।
Syntax :
<ul>
<li>HTML</li>
<li>CSS</li>
.........
</ul>Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<ul>
<li>Ram</li>
<li>Sham</li>
<li>jodu</li>
</ul>
</body>
</html>Output
- Ram
- Sham
- jodu
How to change the style of Unordered list ?
এখানে প্রতিটি আইটেমকে বুলেট পয়েন্ট দিয়ে দেখানো হয়েছে। আপনি চাইলে এটাকেও পরিবর্তন করতে পারবেন। তবে সেটির জন্য ul ট্যাগে type নামক একটি attribute যোগ করতে হবে এবং ভ্যালু হিসাবে নিচের যে কোনো একটি ভ্যালু দিতে হবে।
Attribute: type
Unordered List এ আপনি type Attribute ব্যবহার করে list সংখ্যার স্টাইল change করতে পারেন।
disc: প্রতিটি item গুলিকে ডিফল্ট বুলেট, যা সাধারণ কালো গোলাকৃতি হিসেবে দেখায়।circle: প্রতিটি item গুলিকে ফাঁকা গোলাকৃতি বুলেট হিসেবে দেখায়।square: প্রতিটি item গুলিকে চতুর্ভুজ আকৃতির বুলেট হিসেবে দেখায়।
নিচের উদাহরন টি দেখুন
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<ul type="disc" >
<li>Ram</li>
<li>Sham</li>
<li>jodu</li>
</ul>
</body>
</html>Output
- Ram
- Sham
- jodu
Description List (<dl>):
Description List এমন একটি তালিকা যেখানে প্রতিটি আইটেমের নাম এবং তার সাথে একটি বর্ণনা থাকে। এটি সাধারণত তথ্য উপস্থাপনের জন্য ব্যবহার করা হয় যেখানে প্রতিটি বিষয়ে একটি বিস্তারিত ব্যাখ্যা প্রয়োজন।
Description List এর গঠন
Description List তৈরি করতে <dl> (Description List) ট্যাগ ব্যবহার করা হয়। প্রতিটি আইটেমের জন্য <dt> (Description Term) এবং তার বর্ণনার জন্য <dd> (Description Definition) ট্যাগ ব্যবহার করা হয়।
নিচের উদাহরনটি দেখুন :
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>Output
Coffee
Black hot drink
Milk
White hot drinkউপসংহার
HTML এ লিস্ট তৈরি করার জন্য Ordered, Unordered এবং Description List ব্যবহৃত হয়। প্রতিটি লিস্টের নিজস্ব ব্যবহার এবং উদ্দেশ্য আছে, যা আপনার তথ্যের প্রয়োজন অনুযায়ী নির্বাচন করতে হয়। HTML List ব্যবহারে অভিজ্ঞতা অর্জন করলে আপনি আপনার ওয়েবসাইটের তথ্য উপস্থাপনা আরো সুসংগঠিত এবং সুন্দরভাবে করতে পারবেন।
এভাবে HTML List এর সাহায্যে আপনি ওয়েবপেজকে আরও পাঠযোগ্য ও user-friendly করে তুলতে পারবেন।
F.A.Q
HTML List কী এবং এটি কী কাজে ব্যবহৃত হয়?
HTML এ List হল এমন একটি element যার মাধ্যমে বিভিন্ন তথ্য বা item গুলিকে নির্দিষ্ট ভাবে উপস্থাপন করা যায়। HTML এ তিন ধরনের লিস্ট রয়েছে: Ordered List (<ol>), Unordered List (<ul>), এবং Description List (<dl>)।
Ordered List কী এবং এটি কীভাবে তৈরি করা হয় ?
Ordered List একটি সংখ্যাযুক্ত তালিকা, যা sequence এর সাথে তথ্য প্রদর্শন করে। HTML এ Ordered List তৈরি করতে <ol> ট্যাগ ব্যবহার করা হয় এবং প্রতিটি আইটেম <li> ট্যাগের মাধ্যমে লেখা হয়। উদাহরণ: <ol><li>Item 1</li><li>Item 2</li></ol>।
Unordered List কী এবং এটি কীভাবে ব্যবহার করা হয় ?
Unordered List হলো বুলেট পয়েন্ট দিয়ে তৈরি তালিকা, যেখানে তথ্যগুলির কোনো নির্দিষ্ট sequence এর প্রয়োজন হয় না। HTML এ এটি তৈরি করতে <ul> ট্যাগ ব্যবহার করা হয় এবং প্রতিটি আইটেম <li> ট্যাগের মাধ্যমে উল্লেখ করা হয়।
Description List কী এবং এটি কী কাজে লাগে ?
Description List এমন একটি তালিকা যেখানে প্রতিটি আইটেমের নাম এবং বর্ণনা থাকে। এটি <dl>, <dt>, এবং <dd> ট্যাগ ব্যবহার করে তৈরি হয়। উদাহরণ: <dl><dt>HTML</dt><dd>Markup Language for creating web pages.</dd></dl>।
HTML এ List Item <li> ট্যাগের ব্যবহার কী ?
HTML এ <li> ট্যাগ ব্যবহার করে তালিকার প্রতিটি আইটেম লেখা হয়। এটি Ordered এবং Unordered List উভয়ের মধ্যেই ব্যবহার করা হয়। <li> ট্যাগের মাধ্যমে প্রতিটি আইটেমকে আলাদা আলাদা করে দেখানো যায়।
Ordered List এ সংখ্যা বা অক্ষর পরিবর্তন কীভাবে করা যায় ?
HTML এর Ordered List এ type Attribute ব্যবহার করে সংখ্যার পরিবর্তে অক্ষর বা রোমান সংখ্যা ব্যবহার করা যায়। উদাহরণ: <ol type="A"><li>Item 1</li><li>Item 2</li></ol>; এটি A, B, C আকারে দেখাবে।
Unordered List এ বুলেট স্টাইল পরিবর্তন করা যায় কীভাবে ?
Unordered List এ type Attribute ব্যবহার করে বুলেট চিহ্ন পরিবর্তন করা যায়, যেমন disc, circle, এবং square। উদাহরণ: <ul type="square"><li>Item 1</li><li>Item 2</li></ul>।
HTML List কি রেসপনসিভ ?
HTML লিস্ট ডিফল্টভাবে রেসপনসিভ, তবে CSS এর মাধ্যমে এর স্টাইলিং পরিবর্তন করে এটি বিভিন্ন ডিভাইসে আরো সুন্দরভাবে প্রদর্শিত করা যায়। রেসপনসিভ ডিজাইন তৈরির জন্য list এর ফন্ট, সাইজ, এবং গ্যাপ স্টাইল করা যেতে পারে।
HTML এর Nested List কী এবং এটি কীভাবে তৈরি করা হয় ?
Nested List হলো একটি তালিকার মধ্যে আরেকটি তালিকা। এটি তৈরি করতে একাধিক <ul> বা <ol> ট্যাগের ভিতরে <li> ব্যবহার করা হয়। উদাহরণ: <ul><li>Item 1<ul><li>Sub-item 1</li></ul></li></ul>।
কীভাবে HTML এ List এর সাথে CSS ব্যবহার করা যায় ?
CSS এর মাধ্যমে HTML লিস্টের রঙ, ফন্ট সাইজ, এবং বুলেট চিহ্ন পরিবর্তন করা যায়। উদাহরণ: ul { color: blue; } কোডটি লিস্টের রঙ নীল করে দেবে।
