خاصية القوائم (Lists) في لغة HTML تُستخدم لعرض مجموعة من العناصر بشكل مُنظّم ومرتّب، سواء كان الترتيب مُهمًا (مثل خطوات عملية ما) أو غير مُهم (مثل قائمة مشتريات). تُسهّل القوائم قراءة المحتوى وفهمه، وتُضفي عليه شكلًا جماليًا.

يوجد ثلاثة أنواع رئيسية من القوائم في HTML:

  1. القوائم غير المرتبة (Unordered Lists):
  • تُستخدم لعرض مجموعة من العناصر لا يهم ترتيبها.
  • تُستخدم الوسم <ul> (اختصارًا لـ Unordered List) لإنشاء القائمة.
  • يتم وضع كل عنصر من عناصر القائمة داخل الوسم <li> (اختصارًا لـ List Item).
  • عادةً ما يتم عرض عناصر القائمة على شكل نقاط أو رموز أخرى.

مثال:

HTML
<ul>
<li>عنصر 1</li>
<li>عنصر 2</li>
<li>عنصر 3</li>
</ul>

سيظهر كالتالي:

  • عنصر 1
  • عنصر 2
  • عنصر 3

يمكن تغيير شكل النقاط باستخدام خاصية CSS list-style-type.

  1. القوائم المرتبة (Ordered Lists):
  • تُستخدم لعرض مجموعة من العناصر بترتيب مُعين (مثل خطوات عملية أو قائمة مُرقمة).
  • تُستخدم الوسم <ol> (اختصارًا لـ Ordered List) لإنشاء القائمة.
  • يتم وضع كل عنصر من عناصر القائمة داخل الوسم <li> (اختصارًا لـ List Item).
  • يتم ترقيم عناصر القائمة تلقائيًا بأرقام أو أحرف.

مثال:

HTML
<ol>
<li>الخطوة الأولى</li>
<li>الخطوة الثانية</li>
<li>الخطوة الثالثة</li>
</ol>

سيظهر كالتالي:

  1. الخطوة الأولى
  2. الخطوة الثانية
  3. الخطوة الثالثة

يمكن تغيير نوع الترقيم (أرقام، أحرف لاتينية، أحرف رومانية، إلخ) باستخدام خاصية CSS type أو خصائص HTML مثل start لتحديد من أين يبدأ الترقيم.

  1. قوائم الوصف (Description Lists):
  • تُستخدم لعرض قائمة من المصطلحات مع وصف لكل مُصطلح.
  • تُستخدم الوسم <dl> (اختصارًا لـ Description List) لإنشاء القائمة.
  • يتم وضع المُصطلح داخل الوسم <dt> (اختصارًا لـ Description Term).
  • يتم وضع وصف المُصطلح داخل الوسم <dd> (اختصارًا لـ Description Details).

مثال:

HTML
<dl>
<dt>HTML</dt>
<dd>لغة ترميز تُستخدم لإنشاء صفحات الويب.</dd>
<dt>CSS</dt>
<dd>لغة تُستخدم لتصميم وتنسيق صفحات الويب.</dd>
</dl>

سيظهر كالتالي:

HTML : لغة ترميز تُستخدم لإنشاء صفحات الويب. CSS : لغة تُستخدم لتصميم وتنسيق صفحات الويب.

خصائص إضافية و مهمة للقوائم:

  • خاصية start في القوائم المرتبة <ol>: تُستخدم لتحديد من أي رقم أو حرف يبدأ الترقيم. مثال: <ol start="5"> سيبدأ الترقيم من 5.
  • خاصية type في القوائم المرتبة <ol>: تُستخدم لتحديد نوع الترقيم. القيم الممكنة هي:
    • 1: أرقام (افتراضي).
    • A: أحرف كبيرة.
    • a: أحرف صغيرة.
    • I: أرقام رومانية كبيرة.
    • i: أرقام رومانية صغيرة.
  • خاصية reversed في القوائم المرتبة <ol>: تُستخدم لعكس ترتيب الترقيم. مثال: <ol reversed> سيبدأ الترقيم من الأعلى إلى الأسفل.
  • التداخل بين القوائم: يُمكن وضع قوائم داخل قوائم أخرى لإنشاء هياكل مُعقدة. مثال: قائمة رئيسية تحتوي على قوائم فرعية.

مزايا استخدام القوائم في HTML:

  • سهولة القراءة: تُسهّل القوائم قراءة المحتوى وفهمه، خاصةً عند وجود كمية كبيرة من المعلومات.
  • التنظيم: تُساعد القوائم على تنظيم المحتوى وترتيبه بشكل منطقي.
  • التصميم: تُضفي القوائم شكلًا جماليًا على صفحات الويب.
  • السيو (SEO): استخدام القوائم بشكل صحيح يُساعد محركات البحث على فهم محتوى الصفحة بشكل أفضل.

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