انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 26
دورة لغة HTML

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

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

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
2
الأمثلة
8
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
5,434
محتوى الدرس
في هذا الدرس 2تصفّح المواضيع

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

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

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

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

HTML nested list

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

HTML 
<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> لإنشاء قائمة غير مرقمة.

HTML 
<ul>

</ul>

Main Items in Unordered List

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

HTML 
<ul>
  <li>Main Item</li>
  <li>Main Item</li>
  <li>Main Item</li>
  <li>Main Item</li>
</ul>

Nested lists sub items

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

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

Nested Lists: ul inside ol

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

Unordered List inside an Ordered List

HTML 
<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 inside ul

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

Ordered List inside an Unordered List

HTML 
<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 inside ul

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

Unordered List inside an Unordered List

HTML 
<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 inside ol

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

Ordered List inside an Ordered List

HTML 
<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>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…