في هذا الدرس 6تصفّح المواضيع
تنشأ القائمة المتداخلة عندما يستقر عنصر قائمة فرعي داخل أحد بنود قائمة أخرى، مما يشيد تسلسلاً هرمياً للمعلومات يربط بين الأب وأبنائه. تُعد القوائم المتداخلة ركيزة لا غنى عنها لتمثيل فهارس الكتب متعددة المستويات، وهياكل مجلدات الملفات، وأشرطة التنقل المنسدلة المعقدة.
تتيح لغة HTML دمج عائلات القوائم المختلفة بحرية كاملة: فيمكن لقائمة مرقمة أن تحتضن قوائم نقطية فرعية لتفصيل النقاط، أو لقائمة غير مرتبة أن تحتضن خطوات إجرائية مرقمة. يتولى المتصفح تلقائياً ضبط هوامش الإزاحة وأشكال النقاط بناءً على عمق كل مستوى.
تتمثل القاعدة الذهبية الصارمة في تداخل قوائم HTML في أن القائمة الفرعية (
<ul> أو <ol>) يجب أن تُدرج بالكامل داخل عنصر <li> الأب، وتحديداً قبل وسم إغلاق ذلك العنصر الأب </li>.
HTML
<ul>
<li>Chapter 1: Foundations
<ul>
<li>1.1 Semantic Tags</li>
<li>1.2 Document Flow</li>
</ul>
</li> <!-- Parent li closes AFTER nested list -->
<li>Chapter 2: Layouts</li>
</ul>لاحظ بدقة أن وسم إغلاق عنصر الأب
</li> يستقر بعد وسم إغلاق القائمة الفرعية </ul>. يضمن هذا الترتيب تبعية القائمة الفرعية موضوعياً وهيكلياً للبند الأب داخل شجرة المستند الدلالية.من أكثر الأخطاء شيوعاً بين المبتدئين إغلاق وسم
<li> الأب قبل كتابة القائمة الفرعية. يؤدي هذا الإغلاق المبكر إلى جعل القائمة الفرعية عنصراً شقيقاً معزولاً بدلاً من أن تكون تابعة دلالياً للبند الأب المقصود.
HTML
<!-- BROKEN ANTI-PATTERN: Orphan sub-list -->
<ul>
<li>Chapter 1</li> <!-- Closed prematurely! -->
<ul> <!-- Invalid direct child of outer ul! -->
<li>Section 1.1</li>
</ul>
</ul>عندما تتحول القائمة الفرعية إلى شقيق معزول، تفشل قارئات الشاشة في نقل المستوى الهرمي بدقة للمستخدم، وتعجز محددات التنسيق في CSS عن استهداف العناصر التابعة، وتضطرب محاذاة الهوامش التلقائية بين المتصفحات.
تتطلب التوثيقات البرمجية الضخمة والمناهج الأكاديمية والكتيبات الفنية في كثير من الأحيان ثلاثة مستويات أو أكثر من التداخل الهرمي. يتيح الجمع بين القوائم المرقمة بأنماطها الرومانية والأبجدية صياغة فهارس احترافية بالغة الدقة.
HTML
<ol type="I">
<li>Architecture Foundations
<ol type="A">
<li>Frontend Systems
<ol type="1">
<li>HTML5 Parsing</li>
<li>CSS Cascade</li>
</ol>
</li>
</ol>
</li>
</ol>رغم قدرة لغة HTML على دعم مستويات تداخل لا نهائية، إلا أن أفضل ممارسات تجربة المستخدم تقتضي حصر التداخل العملي في 3 أو 4 مستويات كحد أقصى تجنباً للهوامش العريضة التي تشوه القراءة على شاشات الهواتف المحمولة.
تمثل القوائم النقطية المتداخلة الأساس المعماري لكافة أشرطة التنقل العالمية ذات القوائم المنسدلة (Dropdown Menus). تشكل القائمة العلوية شريط التنقل الأفقي، بينما تمثل القوائم المتداخلة البطاقات المنسدلة التفاعلية.
تتولى قواعد تنسيق CSS إخفاء القائمة الفرعية تلقائياً عبر
display: none أو الشفافية، ثم إظهارها بسلاسة فور تحويم المؤشر :hover أو تركيز لوحة المفاتيح :focus-within على عنصر <li> الأب.تتميز قارئات الشاشة بقدرة فائقة على ترجمة القوائم المتداخلة المبنية وفق المعايير السليمة. عند الدخول في قائمة فرعية، يعلن البرنامج: "قائمة مستوى 2، 3 عناصر"؛ وعند الانتهاء والعودة للأب يعلن: "الخروج من قائمة المستوى 2، استئناف المستوى 1".
ترسم هذه التوجيهات الصوتية الدقيقة مساراً مكانياً واضحاً للمطورين والمستخدمين المكفوفين، مما يمكنهم من إدراك موضعهم بدقة متناهية داخل وثائق المشاريع الضخمة دون أي ارتباك أو فقدان للسياق العام.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس مفهوم القوائم المتداخلة الهرمية، وقاعدة التداخل الصارم داخل عنصر li الأب، وتجنب أخطاء الإغلاق المبكر، وتخطيط الفهارس متعددة المستويات، وهندسة القوائم المنسدلة. الخطوة التالية تقودنا إلى احتراف خصائص القوائم والتحكم بأرقام البداية والترقيم التنازلي.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Nested List قائمة متداخلة
- عنصر قائمة (ul أو ol) يستقر داخل عنصر قائمة آخر لإنشاء تسلسل هرمي متعدد المستويات.
- للمراجعة
- 02 Parent List Item عنصر القائمة الأب
- عنصر li الخارجي الذي يحتوي على النص الرئيسي وقائمة فرعية كاملة قبل وسم إغلاقه.
- للمراجعة
- 03 Premature Tag Closure إغلاق الوسم المبكر
- خطأ بنائي يحدث عند إغلاق وسم li قبل القائمة الفرعية التابعة له، مما يحولها إلى شقيق معزول.
- للمراجعة
- 04 Multi-Level Outline فهرس متعدد المستويات
- بنية مستند منظمة تعرض الأبواب والفصول والنقاط الفرعية عبر قوائم متداخلة متعاقبة.
- للمراجعة
- 05 Dropdown Navigation Menu قائمة تنقل منسدلة
- مكون تنقل في المواقع يعتمد على قوائم متداخلة تظهر قوائمها الفرعية عند تفاعل المستخدم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 HTML HTML
- HyperText Markup Language
- لغة التوصيف القياسية المستخدمة لبناء المستندات والتجارب التفاعلية عبر شبكة الويب العالمية.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- لغة تنسيق صفحات الويب المطبقة على القوائم المتداخلة لإنشاء القوائم المنسدلة والتأثيرات البصرية.
- للمراجعة
- 03 WAI WAI
- Web Accessibility Initiative
- مبادرة منظمة W3C الهادفة لجعل شبكة الويب متاحة وميسرة بالكامل للأشخاص ذوي الإعاقة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ قائمة مرقمة تتكون من محورين تعليميين، مع تضمين قائمة نقطية بالمواضيع داخل كل عنصر li أب.
-
حدد قائمة فرعية معزولة أُغلقت قبل أوانها وانقلها لتستقر داخل عنصر li الأب قبل وسم إغلاقه.
-
صمم شريط تنقل دلالي يحتوي على قائمة ul متداخلة داخل وسم li لتمثيل عناصر قائمة منسدلة.
-
افحص شجرة سهولة الوصول لقائمة متداخلة للتأكد من إعلان قارئ الشاشة عن الانتقال بين المستوى 1 والمستوى 2.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
3أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.