القوائم

القائمة النقطية (Unordered List)

عندما لا يهمّ الترتيب، نستخدم <ul> وكل عنصر داخل <li>:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

النتيجة: قائمة بنقاط •.

القائمة المرقّمة (Ordered List)

عندما يهمّ الترتيب (خطوات مثلًا)، نستخدم <ol>:

<ol>
  <li>افتح المحرّر</li>
  <li>اكتب الكود</li>
  <li>احفظ الملف</li>
</ol>

النتيجة: قائمة مرقّمة 1، 2، 3.

قوائم متداخلة

يمكن وضع قائمة داخل عنصر <li>:

<ul>
  <li>
    الواجهة الأمامية
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>الواجهة الخلفية</li>
</ul>

قائمة التعريفات (Description List)

عندما تريد ربط مصطلح بشرحه — كمعجم أو أسئلة شائعة — استخدم <dl> مع <dt> للمصطلح و<dd> لشرحه:

<dl>
  <dt>HTML</dt>
  <dd>لغة هيكلة صفحات الويب.</dd>

  <dt>CSS</dt>
  <dd>لغة تنسيق الصفحات وتصميمها.</dd>
</dl>

• <dt> (Description Term) — المصطلح نفسه.
• <dd> (Description Definition) — شرحه، ويمكن أن يتبع أكثر من dt واحد إن تشاركت الشرح.

🔑 <dl> ليست "قائمة ثالثة" عشوائية — استخدمها تحديدًا حين تكون العلاقة مصطلح ← شرح (معجم، أسئلة شائعة بصيغة مبسّطة، أو مواصفات منتج مثل "اللون: أحمر").

الأخطاء الشائعة

• ❌ استخدام <ul> لبيانات مرتّبة بخطوات — استخدم <ol> كي يفهم قارئ الشاشة أنه ترتيب له معنى.
• ❌ استخدام <dl> لقائمة عادية بلا علاقة مصطلح/شرح — استخدم <ul> أو <ol> بدلًا منها.
• ❌ نص أو عناصر مباشرة داخل <ul>/<ol> بلا <li> — كل عنصر قائمة يجب أن يُغلَّف بـ <li>.

خلاصة

استخدم <ul> حين لا يهم الترتيب، و<ol> حين يهم، و<dl> مع <dt>/<dd> تحديدًا لعلاقة مصطلح بشرحه. راجع مرجع وسم dl للمزيد من الأمثلة.

🎯 التالي: النماذج — كيف نستقبل مدخلات المستخدم.