تُستخدم القوائم المُتداخلة لعمل قوائم رئيسية وفرعية مثل القوائم الوصفية، لكن يمكن هنا عمل مزيج بين القوائم المرقمة والقوائم غير المرقمة، أو عمل قوائم رئيسية مرقمة وفرعية مرقمة كذلك بترقيم آخر.

يتم إنشاء العناصر الرئيسية في القوائم المُتداخلة عن طريق عنصر <ul> أو عنصر <ol>.
يتم استخدام العنصر <li> لعمل عناصر رئيسية داخل العنصر الرئيسي.
يستخدم العنصر <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:

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

Unordered list element

عنصر <ul> المسؤول عن بناء القوائم غير المرقمة.

<ul>

<ul>

Nested list main item

يمكن إنشاء العناصر الرئيسية عن طريق العنصر ol أو العنصر ul، وذلك حسب نوع القائمة الرئيسية التي نريدها، سواءً أكانت مرقمة أم غير مرقمة. نستخدم العنصر <li> لكتابة البيانات التي نريدها داخل القائمة.

<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