لیست های نامرتب در HTML – المان‌های <ul> و <li>

لیست های نامرتب یا بدون ترتیب (Unordered lists) به لیست‌هایی گفته می‌شود که ترتیب عناصر در آن‌ها اهمیتی ندارد. لیست خرید کالاهای سوپرمارکتی و لیست خودروهای یک شرکت از جمله مواردی هستند که در زمره لیست های نامرتب قرار می‌گیرد. در HTML برای ایجاد لیست های نامرتب از المان <ul> استفاده می‌شود و هر عنصر یا آیتم در این لیست ها با کمک المان های <li> تعریف می‌شود.

به عبارت ساده‌تر، هر لیست نامرتب با یک تگ <ul> شروع و با یک تگ </ul> به پایان می‌رسد. مابین این دو تگ، المان های <li> قرار می‌گیرند که هرکدام یک آیتم لیست را مشخص می‌کنند. در مثال زیر ساختار کلی برای ایجاد لیست های نامرتب در HTML را مشاهده می‌کنید:

<ul>
  <li>برنج</li>
  <li>چای</li>
  <li>روغن</li>
</ul>

نتیجه قطعه کد فوق معمولا به شکل پیشفرض مشابه با نمونه زیر توسط مرورگر نمایش داده می‌شود:

همانطور که در تصویر فوق مشاهده می‌کنید آیتم های موجود در لیست‌های نامرتب به صورت پیشفرض با کمک یک دایره مشکی رنگ (bullet) مشخص می‌شوند. این نشانگرها با کمک ویژگی list-style-type در CSS قابل تغییر هستند.

لیست های نامرتب تو در تو در HTML

شما می‌توانید در HTML یک لیست را داخل یک لیست دیگر قرار دهید. به این ترتیب می‌توانید لیستی ایجاد کنید که برخی از آیتم هایش شامل یک زیرلیست هستند.

برای این منظور (در مورد لیست های نامرتب)، کافیست یک المان <ul> را همراه با آیتم هایش مشابه با نمونه زیر مابین تگ شروع <li> و تگ پایان </li> مربوط به یک آیتم از لیست اصلی قرار دهید.

<ul>
  <li>برنج
    <ul>
      <li>ایرانی</li>
      <li>خارجی</li>
    </ul>
  </li>
  <li>چای</li>
  <li>روغن</li>
</ul>

نتیجه قطعه کد فوق نیز مشابه با نمونه زیر رندر می‌شود:

ایجاد یک لیست بدون ترتیب از پیوندها

یکی از کاربردهای رایج برای لیست های نامرتب، ایجاد بخشی حاوی پیوندهای ناوبری (مانند بخش منو) در یک سایت است. در این حالت هر آیتم لیست، شامل یک پیوند یا المان <a> می‌شود. در ادامه نمونه‌ای از این لیست‌ها را همراه با نتیجه آن مشاهده می‌کنید.

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#blog">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

بازگشت به فهرست مجموعه آموزشی HTML