لیست‌ها یکی از پرکاربردترین عناصر در صفحات وب هستند. با آن‌ها می‌توانیم مجموعه‌ای از آیتم‌ها را مرتب و خوانا نمایش دهیم. در این درس علاوه بر ساخت لیست ساده، با مفهوم مهم تو در تو بودن (Nesting) آشنا شدیم.

---

🧩 لیست ساده با <ul> و <li>

برای ساخت لیست بولت‌دار از تگ <ul> (unordered list) استفاده می‌کنیم. هر آیتم لیست باید داخل تگ <li> (list item) قرار بگیرد:

<h1>لیست خرید من</h1>

<ul>
  <li>شیر</li>
  <li>تخم مرغ</li>
  <li>نان</li>
</ul>

🔎 نتیجه: مرورگر آیتم‌ها را به‌صورت بولت‌دار نمایش می‌دهد.

---

🎎 مفهوم Nesting (تو در تو بودن)

HTML مثل عروسک‌های روسی است؛ عناصر می‌توانند داخل هم قرار بگیرند. برای مثال، اگر بخواهیم زیر آیتم “نان” یک لیست فرعی داشته باشیم:

<ul>
  <li>شیر</li>
  <li>تخم مرغ</li>
  <li>
    نان
    <ul>
      <li>نان سنگک</li>
      <li>نان تست</li>
      <li>نان سبوس‌دار</li>
    </ul>
  </li>
</ul>

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

---

🧠 تحلیل ساختار

• “نان تست” یک <li> است.
• این <li> داخل یک <ul> قرار دارد.
• آن <ul> داخل یک <li> دیگر (برای “نان”) قرار گرفته.
• و آن <li> داخل <ul> اصلی است.

یعنی “نان تست” در سه لایه‌ی تو در تو قرار گرفته!

---

🎯 نکته کلیدی

• Nesting پایه‌ی اصلی ساختار HTML است.
• رابطه‌ی پدر-فرزند بین تگ‌ها باعث می‌شود مرورگر بتواند محتوای صفحه را درست تفسیر کند.
• تقریباً همه‌ی مباحث بعدی HTML و CSS بر همین مفهوم استوار هستند.