Menu
CoddyTech

قوائم متداخلة

جزء من قسم الأساسيات في رحلة HTML على Coddy. الدرس 14 من 60.

يمكنك وضع قائمة داخل قائمة أخرى. يُسمّى هذا قائمة متداخلة. وهذا مفيد لإنشاء بُنى هرمية، مثل المخططات التفصيلية أو القوائم متعددة المستويات. 

لإنشاء قائمة متداخلة، ما عليك سوى وضع عنصر <ul> أو <ol> داخل عنصر <li> في قائمة أخرى.

إليك مثالًا على قائمة غير مرتبة متداخلة:

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 2.1</li>
      <li>Subitem 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

يحتوي العنصر الثاني على قائمة متداخلة تضم عنصرين فرعيين. ستظهر في المتصفح بهذا الشكل:

  • العنصر 1
  • العنصر 2
    • العنصر الفرعي 2.1
    • العنصر الفرعي 2.2
  • العنصر 3

يمكنك أيضًا تضمين قوائم مرتبة متداخلة أو المزج بين النوعين. 

challenge icon

التحدي

سهل

أنشئ مستند HTML يتضمن قائمة متداخلة. ينبغي أن تبدو القائمة كما يلي:

  • Fruits
    1. Apple
    2. Banana
    3. Orange
  • Vegetables
    • Carrot
    • Broccoli
    • Spinach
  • Grains

ضع كل قائمة فرعية داخل عنصر <li> الأب، قبل وسم الإغلاق </li> لذلك العنصر (على سبيل المثال <li>Fruits <ol>...</ol></li>).

جرّب بنفسك

<!DOCTYPE html>
<html>
    <body>
        <!-- اكتب الكود هنا -->
    </body>
</html>
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس الأساسيات

تدرّب بنفسك: Playground لـ Web