في هذا الدرس 6تصفّح المواضيع
تمثل القوائم إحدى أهم الركائز الهيكلية في بناء وتنسيق صفحات الويب. تعمل القوائم على تحويل الكتل النصية الطويلة والمتراصة إلى نقاط محددة وواضحة بصرياً ودلالياً، مما يقلل الجهد الذهني على القارئ، ويسهل التصفح السريع، ويمكّن محركات البحث وقارئات الشاشة من فهم العلاقات المنطقية التي تربط العناصر فوراً.
بدون عناصر القوائم الدلالية، قد يلجأ البعض لمحاكاة النقاط التوضيحية عبر فقرات عادية تفصل بينها فواصل أسطر يدوية. تفشل هذه المحاكاة الشكلية في نقل الدلالة الحقيقية، حيث تحرم مستخدمي قارئات الشاشة من معرفة عدد بنود القائمة الإجمالي أو التمييز بين بداية كل عنصر ونهايته.
تحدد مواصفات لغة HTML ثلاث عائلات مستقلة من القوائم، صُممت كل منها لسياق منطقي محدد: القوائم غير المرتبة للمجموعات التي لا يؤثر ترتيب بنودها، والقوائم المرقمة للخطوات المتسلسلة والمراحل الإلزامية، وقوائم الوصف للمصطلحات والبيانات الوصفية المزدوجة.
يوضح الجدول التالي الفروق الهيكلية والوسوم المعتمدة ونمط العلامات الافتراضي لكل عائلة من عائلات القوائم الثلاث في لغة HTML:
| نوع القائمة | عنصر الحاوية | العناصر التابعة | المظهر الافتراضي | الاستخدام النموذجي |
|---|---|---|---|---|
| قائمة غير مرتبة | <ul> |
<li> |
نقاط دائرية سوداء | مزايا المنتج، مكونات الوصفة، روابط القوائم |
| قائمة مرقمة | <ol> |
<li> |
أرقام متتابعة 1، 2، 3 | الخطوات المتسلسلة، الترتيب التنافسي، الإجراءات |
| قائمة وصفية | <dl> |
<dt> مع <dd> |
إزاحة هامشية للتعريف | قواميس المصطلحات، المواصفات الفنية، الأسئلة الشائعة |
يمثل عنصر عنصر القائمة
<li> وحدة البناء الأساسية الموحدة لكل من القوائم غير المرتبة <ul> والمرتبة <ol>. يجب تغليف كل بند مستقل أو خيار إجرائي بوسم <li> خاص به لضمان تسجيله كبند منفصل في شجرة الوثيقة.
HTML
<!-- Unordered list with li children -->
<ul>
<li>Hypertext Transfer Protocol</li>
<li>Domain Name System</li>
</ul>
<!-- Ordered list with li children -->
<ol>
<li>Initialize Repository</li>
<li>Commit Changes</li>
</ol>يمكن أن يحتوي عنصر
<li> في داخله على مختلف أنواع وسوم تدفق المحتوى، مثل النصوص المنسقة، والروابط، والصور، وحتى القوائم الفرعية المتداخلة. يمنح هذا التنوع مرونة فائقة لبناء بطاقات تفاعلية مع الحفاظ التام على سهولة الوصول.تعتمد التقنيات المساعدة وعلى رأسها برمجيات قارئات الشاشة مثل NVDA وVoiceOver اعتماداً كلياً على البنية الدلالية للقوائم. بمجرد وصول القارئ الصوتي إلى القائمة، يُعلن للمستخدم وجود قائمة مع ذكر عدد بنودها الكلي (مثل: "قائمة، 4 عناصر").
عند تنقل المستخدم بين البنود، يقرأ البرنامج كل عنصر مع رقم موضعه الفعلي (مثل: "عنصر 2 من 4"). يمنح هذا الإدراك المكاني للمستخدمين المكفوفين خريطة ذهنية واضحة لحجم المعلومات ومقدار التقدم المحرز في قراءة القائمة.
HTML
<h2>Course Chapters</h2>
<ul>
<li><a href="#syntax">Syntax Basics</a></li>
<li><a href="#tables">Tables Mastery</a></li>
<li><a href="#lists">List Structures</a></li>
</ul>من أخطر الأخطاء الشائعة في كتابة لغة HTML وضع نصوص حرة أو فقرات أو عناوين مباشرة داخل وسم
<ul> أو <ol> دون تغليفها داخل وسم <li>. تنص معايير W3C على أن وسوم <li> وحدها هي المسموح بها كأبناء مباشرين داخل القوائم.
عند إدراج عناصر غير صالحة داخل القوائم، يضطر مفسر المتصفح إلى الدخول في وضع معالجة الأخطاء التلقائي. يتسبب ذلك في تشويه شجرة الإتاحة، وتعطل حسابات قارئات الشاشة لعدد العناصر، وفشل محددات CSS التي تستهدف أبناء القائمة بدقة.
HTML
<!-- Broken Anti-Pattern -->
<ul>
Orphan plain text! <!-- Invalid child -->
</ul>
<!-- Correct Accessible Syntax -->
<ul>
<li>Valid item with rich content</li>
</ul>
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس أهمية ودور القوائم في الويب، وعائلات القوائم الثلاث الأساسية ul وol وdl، وعنصر القائمة الموحد li، ومزايا الإتاحة وقراءة قارئات الشاشة، وبناء أشرطة التنقل. الخطوة التالية تأخذنا في جولة تفصيلية متعمقة لإتقان القوائم غير المرتبة ul وتنسيقاتها.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Unordered List قائمة غير مرتبة
- مجموعة من البنود التي لا يؤثر ترتيب تسلسلها على المعنى الدلالي للمحتوى، وتُحفظ داخل وسوم ul.
- للمراجعة
- 02 Ordered List قائمة مرتبة
- مجموعة متسلسلة من البنود المرقمة التي يعبر ترتيبها عن خطوات إجرائية أو مراتب تفاضلية، وتُحفظ داخل وسوم ol.
- للمراجعة
- 03 Description List قائمة وصفية
- قائمة تجمع بين المصطلحات وشروحاتها المقابلة للمعاجم والبيانات المزدوجة، وتُحفظ داخل وسوم dl.
- للمراجعة
- 04 List Item عنصر القائمة
- العنصر التابع الموحد li الذي يمثل كل بند فردي مستقل داخل القوائم المرقمة وغير المرقمة.
- للمراجعة
- 05 Accessibility Tree شجرة الإتاحة
- النموذج الدلالي الذي ينشئه المتصفح وتستند إليه قارئات الشاشة لنطق بنية القائمة وعدد عناصرها.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 W3C W3C
- World Wide Web Consortium
- المنظمة الدولية المعنية بتطوير معايير الويب المفتوحة ومواصفات لغة HTML.
- للمراجعة
- 02 WHATWG WHATWG
- Web Hypertext Application Technology Working Group
- المجموعة المسؤولة عن تطوير معيار HTML الحي وتحديثات كائنية شجرة المستند DOM.
- للمراجعة
- 03 ARIA ARIA
- Accessible Rich Internet Applications
- مواصفة تقنية تهدف لجعل محتوى وتطبيقات الويب أكثر سهولة في الوصول لذوي الإعاقة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
اكتب قائمة نقطية سليمة باستخدام وسم ul وثلاثة عناصر li تعبر عن تقنيات ويب أساسية.
-
أنشئ قائمة مرقمة باستخدام وسم ol تتضمن ثلاث خطوات متتابعة لنشر موقع على خادم الويب.
-
افحص شيفرة قائمة معطوبة تحتوي على نصوص شاردة وأعد كتابتها لتستقر كافة النصوص داخل وسوم li.
-
صمم قائمة تنقل دلالية باستخدام قائمة نقطية ul تضم عناصر li بداخلها روابط تشعبية a قابلة للنقر.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
3أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.