لیست‌های تو در تو (Nested Lists)

لیست‌های تو در تو (Nested Lists): نظم در عمق! 🌳⬆️

سلام دوستان خوش‌سلیقه! تا اینجا یاد گرفتیم که چطور با <ul>، <ol>، و <dl> لیست‌های ساده بسازیم. اما دنیای لیست‌ها گاهی پیچیده‌تر و عمیق‌تر می‌شه! وقتی یه آیتم لیست خودش شامل چند زیرمجموعه یا اطلاعات جزئی‌تره، نیاز به “لیست‌های تو در تو” پیدا می‌کنیم.

لیست‌های تو در تو مثل شاخه‌های درختی هستن که از یه تنه اصلی منشعب می‌شن و به ما کمک می‌کنن اطلاعات رو با سطوح مختلف جزئیات سازماندهی کنیم.

چطور لیست تو در تو بسازیم؟ 🤔

خیلی ساده! کافیه که به جای قرار دادن متن مستقیم داخل یه تگ <li>، یه تگ لیست دیگه (<ul>، <ol> یا حتی <dl>) رو درون اون <li> قرار بدید.

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

مثال ۱: لیست علاقه‌مندی‌ها با دسته‌بندی (استفاده از ul تو در تو) 📚

فرض کنید می‌خوایم لیستی از کتاب‌ها درست کنیم و اون‌ها رو بر اساس ژانر دسته‌بندی کنیم:

<h2>کتاب‌های مورد علاقه من:</h2>
<ul> <!-- لیست اصلی -->
  <li>رمان:</li>
  <ul> <!-- لیست تو در تو برای ژانر رمان -->
    <li>صد سال تنهایی ✒️</li>
    <li>جنگ و صلح 📖</li>
  </ul>

  <li>علمی تخیلی:</li>
  <ul> <!-- لیست تو در تو برای ژانر علمی تخیلی -->
    <li>مریخی 👽</li>
    <li>بنیاد 🚀</li>
  </ul>

  <li>فانتزی:</li>
  <ul>
    <li>ارباب حلقه‌ها 💍</li>
  </ul>
</ul>

نتیجه:

• رمان:
  • صد سال تنهایی ✒️
  • جنگ و صلح 📖
• علمی تخیلی:
  • مریخی 👽
  • بنیاد 🚀
• فانتزی:
  • ارباب حلقه‌ها 💍

مثال ۲: مراحل با زیرمراحل (استفاده از ol تو در تو) ⚙️

فرض کنید می‌خوایم مراحل آماده‌سازی یک پروژه رو مشخص کنیم که هر مرحله خودش شامل چند قدم باشه:

<h2>مراحل انجام پروژه:</h2>
<ol> <!-- لیست اصلی -->
  <li>فاز برنامه‌ریزی:</li>
  <ol type="a"> <!-- لیست تو در تو با حروف لاتین -->
    <li>تعیین اهداف</li>
    <li>جمع‌آوری نیازمندی‌ها</li>
    <li>تهیه طرح اولیه</li>
  </ol>

  <li>فاز اجرا:</li>
  <ol type="a">
    <li>توسعه کد</li>
    <li>آزمایش و رفع اشکال</li>
  </ol>

  <li>فاز مستندسازی:</li>
  <ol type="a">
    <li>نوشتن راهنمای کاربر</li>
    <li>تهیه مستندات فنی</li>
  </ol>
</ol>

نتیجه:

1. فاز برنامه‌ریزی:
   1. تعیین اهداف
   2. جمع‌آوری نیازمندی‌ها
   3. تهیه طرح اولیه
2. فاز اجرا:
   1. توسعه کد
   2. آزمایش و رفع اشکال
3. فاز مستندسازی:
   1. نوشتن راهنمای کاربر
   2. تهیه مستندات فنی

ترکیب انواع لیست‌ها! 🤯

شما حتی می‌تونید انواع لیست‌ها رو با هم ترکیب کنید! مثلاً یه لیست نامرتب که داخلش یه لیست مرتب داره، یا برعکس!

<h2>برنامه‌های روزانه:</h2>
<ul>
  <li>صبح:</li>
  <ol>
    <li>بیدار شدن</li>
    <li>صبحانه خوردن 🍳</li>
  </ol>
  <li>ظهر:</li>
  <ol>
    <li>ناهار</li>
    <li>استراحت کوتاه</li>
  </ol>
  <li>شب: استراحت و تفریح 🌙</li>
</ul>

وقتی لیست‌های تو در تو رو استفاده می‌کنید، مرورگرها به طور پیش‌فرض ظاهر نشانه‌ها (bullets و numbers) رو تغییر می‌دن تا سطوح مختلف لیست مشخص بشه. با CSS می‌تونید این ظاهر رو کنترل کنید و زیباتر هم بکنید!

لیست‌های تو در تو یه ابزار قدرتمند برای سازماندهی اطلاعات پیچیده هستن. با استفاده درست از اون‌ها، می‌تونید محتوایی بسازید که هم برای کاربرها خیلی خوانا و قابل فهم باشه و هم ساختار منظمی داشته باشه. پس از این قابلیت خلاقانه استفاده کنید! ✨