HTML-এ ৩ ধরনের লিস্ট এলিমেন্ট রয়েছে:
- Unordered lists (সবচেয়ে সাধারণ)
- Ordered lists
- Description lists
Unordered Lists (অনক্রমিত তালিকা)
Unordered lists <ul> এলিমেন্ট দিয়ে ডিফাইন করা হয় এবং প্রতিটি লিস্ট আইটেম <li> এলিমেন্ট দিয়ে ডিফাইন করা হয়:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
ফলাফল:
- Apple
- Banana
- Orange
ডিফল্টভাবে, unordered lists সার্কেল বুলেট পয়েন্ট দিয়ে স্টাইল্ড থাকে, কিন্তু CSS দিয়ে কাস্টোমাইজ করা যায়।
Ordered Lists (ক্রমবদ্ধ তালিকা)
Ordered lists <ol> এলিমেন্ট দিয়ে ডিফাইন করা হয় এবং প্রতিটি লিস্ট আইটেম <li> এলিমেন্ট দিয়ে:
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
ফলাফল:
- Apple
- Banana
- Orange
ডিফল্টভাবে, ordered lists সংখ্যাসূচকভাবে প্রদর্শিত হয়, কিন্তু CSS দিয়ে কাস্টোমাইজ করা যায়।
Description Lists (বিবরণ তালিকা)
Description lists অর্ডারড এবং আনঅর্ডারড লিস্ট থেকে সম্পূর্ণ ভিন্নভাবে কাজ করে।
এখানে কীভাবে কাজ করে:
<dl>এলিমেন্ট ডেসক্রিপশন লিস্ট ডিফাইন করে (এবং প্যারেন্ট এলিমেন্ট)।<dt>এলিমেন্ট ডেসক্রিপশন লিস্টের টার্ম (নাম) ডিফাইন করে (এবং<dl>এর চাইল্ড)।<dd>এলিমেন্ট টার্ম (<dt>) এর জন্য ডেসক্রিপশন, ডেফিনিশন, বা ভ্যালু প্রদান করে যা ঠিক তার আগে আসে (এবং এটিও<dl>এর চাইল্ড)।
উদাহরণ:
<dl>
<dt>African Elephant</dt>
<dd>The worlds largest living land animal.</dd>
<dt>Giraffe</dt>
<dd>The tallest living animal on Earth.</dd>
<dt>Blue Whale</dt>
<dd>The largest animal ever (as we know it).</dd>
</dl>
ফলাফল:
- African Elephant
- The worlds largest living land animal.
- Giraffe
- The tallest living animal on Earth.
- Blue Whale
- The largest animal ever (as we know it).
Description lists আধুনিক HTML-এ কম ব্যবহার হয়। সবচেয়ে সাধারণ ইউজ কেস: গ্লসারি তৈরি করা বা মেটাডেটা দেখানো — তবে HTML-এ এটি করার আরও অনেক পদ্ধতি রয়েছে।