انتقل إلى محتوى الدرس

Common List Anti Patterns الأخطاء الشائعة وسوء استخدام القوائم

تعلم أساسيات قوائم HTML: اكتشف أهمية القوائم في تنظيم المحتوى، وقارن بين القوائم النقطية والرقمية والوصفية، وأتقن استخدام عنصر li وبناء أشرطة التنقل الميسرة لذوي الإعاقة.
5 صفوف تعليمية
لغة HTML
11,597 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
من أخطر الأخطاء الشائعة في كتابة لغة HTML وضع نصوص حرة أو فقرات أو عناوين مباشرة داخل وسم <ul> أو <ol> دون تغليفها داخل وسم <li>. تنص معايير W3C على أن وسوم <li> وحدها هي المسموح بها كأبناء مباشرين داخل القوائم.
الصف 2 صورة توضيحية
مقارنة الشجرة الدلالية لعناصر القائمة الصالحة مقابل النصوص الشاردة المحظورة
الصف 3 شرح توضيحي
عند إدراج عناصر غير صالحة داخل القوائم، يضطر مفسر المتصفح إلى الدخول في وضع معالجة الأخطاء التلقائي. يتسبب ذلك في تشويه شجرة الإتاحة، وتعطل حسابات قارئات الشاشة لعدد العناصر، وفشل محددات CSS التي تستهدف أبناء القائمة بدقة.
الصف 4 كود برمجي
HTML
<!-- Broken Anti-Pattern -->
<ul>
  Orphan plain text! <!-- Invalid child -->
</ul>

<!-- Correct Accessible Syntax -->
<ul>
  <li>Valid item with rich content</li>
</ul>
الصف 5 ملاحظة هامة