العنصر <li>

من موسوعة حسوب
اذهب إلى: تصفح، ابحث

يستعمل العنصر <li> لتمثيل عنصر في قائمة، ويجب أن يحتوى هذا العنصر في عنصر أب الذي يكون قائمة مرتبة <ol> أو قائمة غير مرتبة <ul> أو قائمة <menu>.

تُعرَض عناصر القوائم العادية <menu> والقوائم غير المرتبة وقبلها نقطة (bullet point)، أما في القوائم المرتبة فتعرض عناصرها بترتيبٍ تصاعدي وقبلها رقم أو حرف يدل على ترتيبها.

مثال عن قائمة مرتبة <ol> عادية فيها ثلاثة عناصر:
<ol>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ol>
مثال عن قائمة مرتبة <ol> يبدأ الترقيم فيها من الرقم 3، وسيُعرَض الترتيب بالأرقام الرومانية ذات الحالة الكبيرة:
<ol type="I">
  <li value="3">العنصر الثالث</li>
  <li>العنصر الرابع</li>
  <li>العنصر الخامس</li>
</ol>
قائمة غير مرتبة <ul> فيها ثلاثة عناصر:
<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ul>
لأمثلة أكثر تعقيدًا عن القوائم فانظر صفحة العنصر <ul> و <ol>.

بطاقة العنصر

تصنيفات المحتوى لا يوجد.
المحتوى المسموح محتوى تنظيمي.
الوسم المختصر يمكن حذف وسم النهاية إذا أتى بعد العنصر عنصر <li> آخر، أو لم يعد هنالك محتوى إضافي في العنصر الأب.
واجهة DOM HTMLLIElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

value

قيمة هذه الخاصية يجب أن تكون رقمًا صحيحًا الذي يُشير إلى ترتيب عنصر القائمة إذا كان ضمن قائمة مرتبة <ol>، لا يُسمَح إلا بالقيم العددية لهذه الخاصية حتى لو كانت القائمة مرتبة باستخدام الأحرف أو الأرقام الرومانية، والعناصر التي تلي العنصر الذي تُستعمَل تلك الخاصية عليه ستتابع الترقيم من القيمة المحددة في هذه الخاصية.

لن يكون لهذه الخاصية أي معنى إذا استعملت في القوائم غير المرتبة (مثل <ul> أو <menu>).

يجدر بالذكر أنَّ هذه الخاصية كانت مهملة في HTML 4، لكن أعيد استخدامها في HTML5.

type

تُحدِّد هذه الخاصية نوع الترقيم:

  • a: الأحرف اللاتينية بالحالة الصغيرة
  • A: الأحرف اللاتينية بالحالة الكبيرة
  • i: الأرقام الرومانية بالحالة الصغيرة
  • I: الأرقام الرومانية بالحالة الكبيرة
  • 1: الأرقام العادية

ضبط هذه الخاصية سيؤدي إلى تجاهل القيمة المضبوطة في عنصر <ol> إن وجدت.

لاحظ أنَّ هذه الخاصية أصبحت مهملة، ويجدر بك استخدام خاصية list-style-type في CSS بدلًا منها، لكن ذكرناها هنا لتعلم بوجودها.

التنسيق الافتراضي

أغلبية المتصفحات تعرض العنصر <li> مع ضبط الخاصية display إلى list-item:
li {
  display: list-item;
}

مصادر ومواصفات