القوائم في HTML: المرقمة وغير المرقمة

القوائم في كل مكان حولنا: قائمة مشتريات البقالة، وخطوات وصفة الطعام، وترتيب الفائزين في مسابقة. وفي صفحات الويب أيضاً، القوائم أسهل طريقة لعرض مجموعة عناصر مرتبطة بشكل منظم. في هذا الدرس ستتعلم أنواع القوائم الثلاثة في HTML ومتى تختار كل نوع.

القائمة غير المرقمة: ul

عندما لا يهم ترتيب العناصر، استخدم <ul> (اختصار unordered list أي «قائمة غير مرتبة»)، وكل عنصر بداخلها يُكتب بـ <li> (اختصار list item):

<h3>مشتريات اليوم</h3>
<ul>
  <li>خبز</li>
  <li>حليب</li>
  <li>طماطم</li>
</ul>

يعرض المتصفح كل عنصر في سطر مستقل، وأمامه نقطة سوداء صغيرة. لاحظ أن تبديل «حليب» مع «خبز» لا يغيّر المعنى، ولهذا اخترنا قائمة غير مرقمة.

القائمة المرقمة: ol

أما عندما يكون الترتيب مهماً، مثل الخطوات أو الترتيب في مسابقة، فاستخدم <ol> (اختصار ordered list):

<h3>طريقة عمل كوب شاي</h3>
<ol>
  <li>اغلِ الماء.</li>
  <li>ضع كيس الشاي في الكوب.</li>
  <li>اسكب الماء واتركه دقيقتين.</li>
  <li>أضف السكر حسب رغبتك.</li>
</ol>

الأرقام 1 و 2 و 3 تُكتب تلقائياً. وإذا أضفت خطوة جديدة في المنتصف، يعيد المتصفح الترقيم بنفسه، بينما لو كتبت الأرقام يدوياً لاضطررت إلى تعديلها كلها.

وهناك فائدة أخرى خفية: قارئ الشاشة يخبر الكفيف عند الوصول للقائمة بأنها «قائمة من 4 عناصر»، فيعرف حجمها قبل أن يبدأ الاستماع إليها. هذه المعلومة تضيع تماماً لو كتبت الخطوات كفقرات عادية متتالية.

كيف تختار؟

اسأل نفسك: «لو غيّرت ترتيب العناصر، هل يتغير المعنى؟» إذا كانت الإجابة نعم فاستخدم <ol>، وإلا فاستخدم <ul>.

خصائص مفيدة للقائمة المرقمة

<!-- يبدأ الترقيم من 5 -->
<ol start="5">
  <li>الخطوة الخامسة</li>
  <li>الخطوة السادسة</li>
</ol>

<!-- ترقيم تنازلي: 3، 2، 1 -->
<ol reversed>
  <li>المركز الثالث</li>
  <li>المركز الثاني</li>
  <li>المركز الأول</li>
</ol>

<!-- ترقيم بالحروف بدل الأرقام -->
<ol type="a">
  <li>الخيار الأول</li>
  <li>الخيار الثاني</li>
</ol>

• start: الرقم الذي يبدأ منه العدّ.
• reversed: عدّ تنازلي. لاحظ أنها خاصية منطقية (Boolean Attribute): مجرد وجودها يكفي، دون قيمة.
• type: نوع الترقيم: 1 للأرقام (الافتراضي)، و a أو A للحروف، و i أو I للأرقام الرومانية.

أما شكل النقاط في <ul> أو أرقام بنمط عربي مثلاً، فتتحكم فيه لاحقاً بـ CSS.

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

يمكن أن يحتوي عنصر <li> على قائمة كاملة بداخله، وهذا مفيد للتصنيفات الفرعية، مثل فهرس كتاب له فصول وداخل كل فصل دروس:

<ul>
  <li>تطوير الويب
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>تطبيقات الموبايل
    <ul>
      <li>Flutter</li>
      <li>Kotlin</li>
    </ul>
  </li>
</ul>

انتبه للمكان الصحيح: القائمة الداخلية توضع داخل <li>، قبل وسم إغلاقه </li>، وليس بين عنصرين مباشرة.

قائمة التعريفات: dl

النوع الثالث أقل شهرة لكنه مفيد جداً: قائمة مصطلحات مع شرحها، مثل القاموس أو صفحة الأسئلة الشائعة:

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

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

• <dl>: قائمة التعريفات كلها (description list).
• <dt>: المصطلح (description term).
• <dd>: شرح المصطلح (description details)، ويظهر مُزاحاً قليلاً.

القوائم في المواقع الحقيقية

قوائم التنقل أعلى المواقع (الرئيسية، من نحن، اتصل بنا) غالباً مبنية بـ <ul> و <li> وبداخلها روابط، ثم تُنسَّق بـ CSS لتظهر في صف أفقي بلا نقاط. افتح مصدر أي موقع كبير وستجدها.

جرّب بنفسك

غيّر نوع القائمة الأولى إلى <ol>، وأضف لها reversed، وأضف عنصراً جديداً للقائمة المتداخلة:

جرّب بنفسكHTML

محرر الكود (HTML)<h3>أهدافي هذا الشهر</h3> <ul> <li>إنهاء كورس HTML</li> <li>بناء صفحة شخصية</li> <li>قراءة كتاب جديد</li> </ul> <h3>خطوات رفع موقعك</h3> <ol> <li>اكتب صفحات الموقع.</li> <li>جرّبها على جهازك.</li> <li>ارفعها على خدمة استضافة.</li> </ol> <h3>كورسات أحبها</h3> <ul> <li>تطوير الويب <ul> <li>HTML</li> <li>CSS</li> </ul> </li> <li>الذكاء الاصطناعي</li> </ul>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• كتابة نص مباشرة داخل ul أو ol: العنصر المباشر الوحيد المسموح داخلهما هو <li>. لا تضع <p> أو نصاً حراً بين عناصر القائمة.
• وضع القائمة الداخلية خارج li: القائمة المتداخلة مكانها داخل <li> قبل إغلاقه.
• كتابة الأرقام يدوياً: مثل <li>1. اغلِ الماء</li> داخل <ol>، فيظهر الرقم مرتين. دع المتصفح يرقّم بنفسه.

اختبر نفسك

سؤال

تريد عرض خطوات تثبيت برنامج بالترتيب. أي وسم تختار؟

<ul><ol><dl>

سؤال

ما العنصر المسموح به مباشرة داخل ul؟

<li> فقط<p> و <li><dt> و <dd>

الخلاصة

• <ul> لعناصر لا يهم ترتيبها، و <ol> عندما يكون الترتيب مهماً.
• كل عنصر في القائمة يُكتب بـ <li>، والترقيم تلقائي.
• start و reversed و type تتحكم في ترقيم <ol>.
• القائمة المتداخلة توضع داخل <li>.
• <dl> و <dt> و <dd> للمصطلحات وشرحها.