HTML Unordered Lists

HTML অবিন্যস্ত তালিকা

HTML অবিন্যস্ত তালিকা

HTML <ul> ট্যাগ একটি ক্রমবিহীন (বুলেট সহ) তালিকাকে সংজ্ঞায়িত করে।

একটি অবিন্যস্ত HTML তালিকা

একটি ক্রমবিহীন তালিকা <ul> ট্যাগ দিয়ে শুরু হয়। প্রতিটি তালিকা আইটেম <li> ট্যাগ দিয়ে শুরু হয়।

ডিফল্ট তালিকা আইটেমগুলি শেল দিয়ে চিহ্নিত করা হয় (ছোট কালো বৃত্ত):

উদাহরণ

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

অপরিবর্তিত HTML তালিকা - তালিকা আইটেম চিহ্নিতকারী নির্বাচন করুন

CSS তালিকা-শৈলী-টাইপ বৈশিষ্ট্য তালিকা আইটেম মার্কার শৈলী সংজ্ঞায়িত করতে ব্যবহৃত হয়। এটিতে নিম্নলিখিত মানগুলির মধ্যে একটি থাকতে পারে:

মান ব্যাখ্যা
disc তালিকা আইটেম চিহ্নিতকারীকে শেল (ডিফল্ট) এ সেট করে।
circle তালিকা আইটেম চিহ্নিতকারীকে বৃত্তে সেট করে
square তালিকা আইটেম চিহ্নিতকারীকে বর্গক্ষেত্রে সেট করে
none তালিকা আইটেম চিহ্নিত করা হবে না

Disc

উদাহরণ- ডিস্ক

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

Circle

উদাহরণ - বৃত্ত

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

Square

উদাহরণ - বর্গক্ষেত্র

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

No List Marker

উদাহরণ - কোনটিই নয়

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

নেস্টেড HTML তালিকা

তালিকা নেস্ট করা যেতে পারে (তালিকার মধ্যে তালিকা):

উদাহরণ

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

📝দ্রষ্টব্য:

একটি তালিকা আইটেম (<li>) নতুন তালিকা এবং অন্যান্য HTML উপাদান, যেমন ছবি এবং লিঙ্ক থাকতে পারে।

CSS সহ অনুভূমিক তালিকা

এইচটিএমএল তালিকা CSS দিয়ে বিভিন্ন উপায়ে স্টাইল করা যায়।

একটি জনপ্রিয় উপায় হল একটি নেভিগেশন মেনু তৈরি করতে অনুভূমিকভাবে একটি তালিকা স্টাইল করা:

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

💡পরামর্শ:

CSS সম্পর্কে আরও জানতে আমাদের CSS টিউটোরিয়াল দেখুন।

অধ্যায়ের সারাংশ

অনুশীলন করুন

❓ক্রমহীন তালিকার একটি তালিকা চিহ্নিতকারীর শৈলী সংজ্ঞায়িত করার সময় ব্যবহার করার জন্য সঠিক CSS বৈশিষ্ট্য কী?

list-style-type
✓ ঠিক আছে! তালিকা-শৈলী-টাইপ বৈশিষ্ট্যটি তালিকা চিহ্নিতকারীর শৈলী নির্ধারণ করতে ব্যবহৃত হয়
style-type-list
✗ ভুল! স্টাইল-টাইপ-লিস্ট একটি বৈধ CSS অ্যাট্রিবিউট নয়
type-list-style
✗ ভুল! type-list-style একটি বৈধ CSS অ্যাট্রিবিউট নয়

HTML তালিকা ট্যাগ

ট্যাগ ব্যাখ্যা
<ul> একটি অবিন্যস্ত তালিকা সংজ্ঞায়িত করে
<ol> একটি আদেশকৃত তালিকা সংজ্ঞায়িত করে
<li> একটি তালিকা আইটেম সংজ্ঞায়িত করে
<dl> একটি বর্ণনা তালিকা সংজ্ঞায়িত করে
<dt> বর্ণনাকারী তালিকায় একটি শব্দ সংজ্ঞায়িত করে
<dd> শব্দকোষে শব্দটি বর্ণনা করে

সমস্ত উপলব্ধ HTML ট্যাগের সম্পূর্ণ তালিকার জন্য, আমাদের HTML ট্যাগ রেফারেন্স দেখুন।