لیست‌های نامرتب (ul) و آیتم‌های لیست (li)

لیست‌های نامرتب (

) و آیتم‌های لیست (
• ): نظم دلنشین! 🌸

سلام به روی ماهتون! یکی از راه‌های خیلی ساده و در عین حال کاربردی برای دسته‌بندی و نمایش اطلاعات، استفاده از لیست‌هاست. امروز می‌خوایم در مورد لیست‌های نامرتب یا همون Bulleted Lists صحبت کنیم که برای نمایش آیتم‌هایی به کار می‌رن که ترتیبشون خیلی مهم نیست، اما می‌خوایم کنار هم مرتب دیده بشن.

تصور کنید یه لیست خرید دارید، یا چند تا از ویژگی‌های یه محصول. ترتیب این آیتم‌ها معمولاً اونقدر حیاتی نیست، درسته؟ اینجاست که لیست‌های نامرتب به دادمون می‌رسن!

تگ <ul>: جعبه جادویی آیتم‌ها 🎁

تگ <ul> مخفف Unordered List (لیست نامرتب) هست. این تگ مثل یه جعبه یا کانتینر عمل می‌کنه که آیتم‌های لیست شما رو داخل خودش نگه می‌داره.

مرورگرها به طور پیش‌فرض، آیتم‌های داخل <ul> رو با یه نقطه یا دایره سیاه (Bullet) نمایش می‌دن. اما این ظاهر رو با CSS می‌شه حسابی خوشگل کرد!

ساختار کلی:

<ul>
  <!-- آیتم‌های لیست اینجا قرار می‌گیرند -->
</ul>

تگ <li>: هر آیتم، یه دنیا حرف! 🌟

تگ <li> مخفف List Item (آیتم لیست) هست. هر چیزی که می‌خواید توی لیست نامرتبتون نمایش داده بشه، باید داخل یه تگ <li> قرار بگیره.

نکته مهم: تگ <li> همیشه باید داخل یه تگ <ul> (یا <ol> برای لیست‌های مرتب) باشه. اگه تنها استفاده بشه، مرورگر ممکنه درست نمایشش نده.

مثال کاربردی: لیست علاقه‌مندی‌ها

<h2>کارهایی که دوست دارم انجام بدم:</h2>
<ul>
  <li>مطالعه کتاب‌های داستانی 📚</li>
  <li>پیاده‌روی در طبیعت 🌳</li>
  <li>آشپزی غذاهای جدید 🍳</li>
  <li>گوش دادن به موسیقی آرامش‌بخش 🎶</li>
</ul>

نتیجه این کد به شکل زیر نمایش داده می‌شه:

• مطالعه کتاب‌های داستانی 📚
• پیاده‌روی در طبیعت 🌳
• آشپزی غذاهای جدید 🍳
• گوش دادن به موسیقی آرامش‌بخش 🎶

نکته جالب: لیست‌های تو در تو (Nested Lists)! nesting

شما می‌تونید داخل یه آیتم لیست (<li>)، یه لیست دیگه (<ul> یا <ol>) قرار بدید. این برای مواقعیه که می‌خواید یه آیتم خودش چند زیرمجموعه داشته باشه.

<h2>میوه‌های مورد علاقه من:</h2>
<ul>
  <li>مرکبات:</li>
  <ul> <!-- لیست نامرتب تو در تو -->
    <li>پرتقال 🍊</li>
    <li>نارنگی 🍊</li>
  </ul>
  <li>هسته‌دار:</li>
  <ul>
    <li>گیلاس 🍒</li>
    <li>زردآلو 🍑</li>
  </ul>
  <li>سیب 🍎</li>
</ul>

نتیجه کد بالا:

• مرکبات:
  • پرتقال 🍊
  • نارنگی 🍊
• هسته‌دار:
  • گیلاس 🍒
  • زردآلو 🍑
• سیب 🍎

به یاد داشته باشید که ظاهر پیش‌فرض این لیست‌ها خیلی ساده است. با استفاده از CSS می‌تونید انواع نشانه‌ها (مثل مربع، دایره توخالی، یا حتی آیکون‌های سفارشی) رو برای لیست‌های نامرتب انتخاب کنید!

استفاده از <ul> و <li> راهی عالی برای سازماندهی اطلاعاته که هم خوانایی رو بالا می‌بره و هم به مرورگرها و موتورهای جستجو کمک می‌کنه محتوای شما رو بهتر درک کنن. پس حسابی ازشون استفاده کنید! 😊