কম্পিউটার টিউটোরিয়াল

HTML Lists (
    ,
      ,
      ) ব্যবহার করার পূর্ণ গাইড

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>

ফলাফল:

  1. Apple
  2. Banana
  3. 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-এ এটি করার আরও অনেক পদ্ধতি রয়েছে।

  1. HTML-এ এমফাসাইজড ফরম্যাটিং (Emphasized Formatting) ব্যবহার করা

  2. HTML-এ <blockquote> ট্যাগ ব্যবহার করে দীর্ঘ উদ্ধৃতি দেওয়া

  3. HTML-এ <q> ট্যাগ ব্যবহার করে সংক্ষিপ্ত উদ্ধৃতি দেওয়া

  4. HTML-এ ইমেজকে লিংক (Link) হিসেবে ব্যবহার করা