কিভাবে HTML তালিকা ব্যবহার করবেন (

,
,

)

HTML-এ 3 ধরনের তালিকা উপাদান রয়েছে:

• অক্রমবিহীন তালিকা (সবচেয়ে সাধারণ)
• অর্ডার করা তালিকা
• বিবরণ তালিকা

অক্রমবিহীন তালিকা

ক্রমবিহীন তালিকাগুলিকে <ul> দিয়ে সংজ্ঞায়িত করা হয় উপাদান এবং ভিতরের প্রতিটি তালিকা আইটেম <li> দিয়ে সংজ্ঞায়িত করা হয়েছে উপাদান:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

ফলাফল:

• আপেল
• কলা
• কমলা

ডিফল্টরূপে, ক্রমবিহীন তালিকাগুলিকে একটি বৃত্ত বুলেট পয়েন্ট দিয়ে স্টাইল করা হয়, তবে এটি CSS এর সাথে কাস্টমাইজ করা যেতে পারে৷

অর্ডার করা তালিকা

অর্ডার করা তালিকাগুলিকে <ol> দিয়ে সংজ্ঞায়িত করা হয়েছে উপাদান এবং ভিতরের প্রতিটি তালিকা আইটেম <li> দিয়ে সংজ্ঞায়িত করা হয়েছে উপাদান:

<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ol>

ফলাফল:

1. আপেল
2. কলা
3. কমলা

ডিফল্টরূপে, অর্ডার করা তালিকাগুলি সাংখ্যিকভাবে প্রদর্শিত হয়, তবে এটি CSS এর সাথে কাস্টমাইজ করা যেতে পারে।

বিবরণ তালিকা

বর্ণনার তালিকাগুলি অর্ডার করা এবং ক্রমবিহীন তালিকার চেয়ে অনেক আলাদাভাবে কাজ করে৷

এখানে তারা কিভাবে কাজ করে:

• <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>

ফলাফল:

আফ্রিকান হাতি

বিশ্বের বৃহত্তম জীবন্ত স্থল প্রাণী।

জিরাফ

পৃথিবীর সবচেয়ে লম্বা জীবন্ত প্রাণী।

ব্লু হোয়েল

এখন পর্যন্ত সবচেয়ে বড় প্রাণী (যেমন আমরা জানি)।

আধুনিক HTML-এ বর্ণনা তালিকা খুব কমই ব্যবহৃত হয়। আমি দেখেছি সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্রে কিছু ধরনের শব্দকোষ তৈরি করা বা মেটাডেটা প্রদর্শন করা — তবে, HTML-এ এটি করার আরও অনেক উপায় রয়েছে।