تُستخدم القوائم المتداخلة nested list لإنشاء قوائم رئيسية وفرعية، حيث يمكن مزج القوائم المرقمة وغير المرقمة، أو إنشاء قوائم رئيسية وفرعية مرقمة بترقيم مختلف.

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

HTML nested list

إنشاء قائمة رئيسية غير مرقمة باستخدام عنصر <ul>, تحتوي على قائمة فرعية مرقمة باستخدام عنصر <ol>.

<ul>
    <li>Front-end
      <ol>
        <li>HTML</li>
        <li>CSS </li>
        <li>JS </li>
      </ol>
    </li>
    <li>Back-End</li>
    <li>Mobile Development</li>
  </ul>

جربها بنفسك

</> HTML Nested Lists Syntax
طريقة كتابة القوائم المتداخلة في لغة HTML

طريقة إنشاء القوائم المتداخلة في لغة HTML:

1. نقوم بإنشاء عنصر <ul> لبناء حاوية القوائم الرئيسية.

2. نضيف بداخلها عنصر <li> لإضافة عناصر رئيسية للقائمة.

3. أسفل كل عنصر <li>, يمكننا وضع قائمة فرعية متداخلة باستخدام عنصر <ul> لقوائم غير مرقمة أو <ol> لقوائم مرقمة، حسب الحاجة.

4. نضع العناصر الفرعية داخل القائمة المتداخلة باستخدام عنصر <li>.

Unordered list element

أولًا، نستخدم عنصر <ul> لإنشاء قائمة غير مرقمة.

<ul>

<ul>

Main Items in Unordered List

ثانياً، لإضافة عناصر رئيسية إلى القائمة غير المرقمة، نستخدم العنصر <li> داخل عنصر <ul> لكتابة البيانات التي نريدها.

<ul>
  <li>Main Item</li>
  <li>Main Item</li>
  <li>Main Item</li>
  <li>ٍMain Item</li>
<ul>

Nested lists sub items

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

<ul>
  <li>Main Item</li>
  <ul>
    <li>sub Item</li>
    <li>sub Item</li>
    <li>sub Item</li>
    <li>sub Item</li>
  </ul>
  <li>Main Item</li>
  <li>Main Item</li>
  <li>Main Item</li>
</ul>

<Nested Lists: <ul> into <ol

طريقة كتابة القوائم المتداخلة في لغة HTML عندما تكون لديك قائمة غير مرقمة داخل قائمة مرقمة، باستخدام عنصر <ul> داخل عنصر <ol>.

<ol>
   <li>Front-end
      <ul>
        <li>HTML</li>
        <li>CSS </li>
        <li>JS </li>
      </ul>
    </li>
   <li>Back-End</li>
   <li>Mobile Development</li>
</ol>

جربها بنفسك

<Nested Lists: <ol> into <ul

طريقة كتابة القوائم المتداخلة في لغة HTML عندما تكون لديك قائمة مرقمة داخل قائمة غير مرقمة، باستخدام عنصر <ol> داخل عنصر <ul>.

<ul>
   <li>Front-end
      <ol>
        <li>HTML</li>
        <li>CSS </li>
        <li>JS </li>
      </ol>
    </li>
   <li>Back-End</li>
   <li>Mobile Development</li>
</ul>

جربها بنفسك

<Nested Lists: <ul> into <ul

طريقة كتابة القوائم المتداخلة في لغة HTML عندما تكون لديك قائمة غير مرقمة داخل قائمة غير مرقمة، باستخدام عنصر <ul> داخل عنصر <ul>.

<ul>
   <li>Front-end
      <ul>
        <li>HTML</li>
        <li>CSS </li>
        <li>JS </li>
      </ul>
    </li>
   <li>Back-End</li>
   <li>Mobile Development</li>
</ul>

جربها بنفسك

<Nested Lists: <ol> into <ol

طريقة كتابة القوائم المتداخلة في لغة HTML عندما تكون لديك قائمة مرقمة داخل قائمة مرقمة، باستخدام عنصر <ol> داخل عنصر <ol>.

<ol>
   <li>Front-end
      <ol>
        <li>HTML</li>
        <li>CSS </li>
        <li>JS </li>
      </ol>
    </li>
   <li>Back-End</li>
   <li>Mobile Development</li>
</ol>

جربها بنفسك

ملاحظة

يمكنك وضع أي نصوص أو عناصر HTML أخرى داخل القائمة الوصفية، سواء داخل العناصر الرئيسية أو الفرعية.
باستخدام CSS، يمكنك التحكم في تنسيق القوائم الوصفية الرئيسية والفرعية وتعديل مظهرها.

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

HTML Nested List
القوائم المتداخلة في لغة HTML

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML Nested List HTML