شرح العنصر (li) في HTML

شرح عنصر <li> في HTML

HTML

عنصر <li> في HTML (لغة ترميز النصوص التشعبية) هو عنصر يُستخدم لتحديد عنصر قائمة (List Item) داخل قائمة. يُعتبر جزءًا أساسيًا من القوائم في صفحات الويب، سواء كانت قوائم مرقمة (مرتّبة) أو غير مرقمة (غير مرتّبة). فيما يلي شرح وافٍ وكامل وشامل لعنصر <li>، يغطي استخداماته، خصائصه، الأمثلة، وكل ما يتعلق به:

تعريف عنصر <li>

• الاسم: List Item (عنصر قائمة).
• الوظيفة: يُستخدم لتمثيل بند أو عنصر واحد داخل قائمة.
• القوائم المدعومة:
  • القوائم غير المرتبة (<ul>): تظهر العناصر مع رموز (مثل النقاط أو الدوائر).
  • القوائم المرتبة (<ol>): تظهر العناصر مع أرقام أو حروف تسلسلية.
  • قوائم التعريف (<dl>): يُستخدم مع عناصر <dt> و<dd> في بعض الحالات الخاصة (لكنه أقل شيوعًا).
• النوع: عنصر Block-level (يأخذ عرضه الكامل ويبدأ في سطر جديد).
• العناصر الأم: يجب أن يكون داخل <ul>, <ol>, أو في بعض الحالات النادرة <menu>.

الاستخدام الأساسي

يتم وضع عنصر <li> داخل عنصر قائمة أم مثل <ul> أو <ol>. كل <li> يمثل بندًا واحدًا في القائمة.

القوائم غير المرتبة (<ul>):

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

3</li>
</ul>

النتيجة في المتصفح:

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

القوائم المرتبة (<ol>):

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

النتيجة في المتصفح:

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

خصائص وسم <li> (Attributes)

عنصر <li> يدعم مجموعة من الخصائص التي تُستخدم لتخصيص سلوكه أو مظهره:

الخصائص القياسية (Global Attributes):

مثل جميع عناصر HTML، يدعم <li> الخصائص العامة، مثل:

• class: لتحديد فئة لتنسيق CSS.
• id: لتحديد معرف فريد.
• style: لإضافة تنسيقات مباشرة.
• title: لإضافة نص توضيحي يظهر عند التمرير بالماوس.
• data-*: لتخزين بيانات مخصصة.

الخصائص الخاصة بـ <li>:

• value (يُستخدم فقط مع <ol>):
• يُحدد قيمة رقمية لبند معين في القائمة المرتبة، مما يغير ترقيم العناصر التالية.
• مثال:

<ol>
  <li>الأول</li>
  <li value="5">الثاني</li>
  <li>الثالث</li>
</ol>

النتيجة:

1. الأول
5. الثاني
6. الثالث

ملاحظة: خاصية value ليست شائعة الاستخدام، حيث يمكن تحقيق نفس التأثير باستخدام CSS أو تحديد الترقيم مباشرة.

خصائص مهجورة (Deprecated):

في إصدارات HTML القديمة، كانت هناك خصائص مثل:

• type: لتحديد نوع الترقيم (مثل أرقام، حروف، أو رموز رومانية).
• هذه الخصائص لم تَعُد مدعومة في HTML5، ويُوصى باستخدام CSS بدلاً منها.

تنسيق <li> باستخدام CSS

يمكن تخصيص مظهر عنصر <li> باستخدام CSS لتغيير الرموز، الألوان، الهوامش، أو حتى إضافة تأثيرات.

تغيير رموز القائمة غير المرتبة:

ul {
  list-style-type: square; /* مربعات بدلاً من النقاط */
}

ul li {
  color: blue; /* لون النص */
}

تغيير ترقيم القائمة المرتبة:

ol {
  list-style-type: upper-roman; /* ترقيم روماني كبير (I, II, III) */
}

إزالة الرموز أو الترقيم:

ul, ol {
  list-style: none; /* إزالة النقاط أو الأرقام */
}

إضافة تنسيقات مخصصة:

li:hover {
  background-color: #f0f0f0; /* لون خلفية عند التمرير */
}

استخدام صور كرموز:

ul {
  list-style-image: url('icon.png'); /* صورة مخصصة كنقطة قائمة */
}

استخدامات متقدمة

القوائم المتداخلة (Nested Lists):

يمكن وضع قوائم داخل عناصر <li> لإنشاء قوائم فرعية.

<ul>
  <li>الفئة الأولى
    <ul>
      <li>عنصر فرعي 1</li>
      <li>عنصر فرعي 2</li>
    </ul>
  </li>
  <li>الفئة الثانية</li>
</ul>

النتيجة:

• الفئة الأولى
  • عنصر فرعي 1
  • عنصر فرعي 2
• الفئة الثانية

القوائم كقوائم تنقل (Navigation Menus):

تُستخدم <li> غالبًا لإنشاء قوائم تنقل في مواقع الويب:

<ul class="nav">
  <li><a href="#home">الرئيسية</a></li>
  <li><a href="#about">من نحن</a></li>
  <li><a href="#contact">اتصل بنا</a></li>
</ul>

مع تنسيق CSS:

.nav {
  list-style: none;
  display: flex;
}
.nav li {
  margin-right: 20px;
}
.nav a {
  text-decoration: none;
  color: #333;
}

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

• عنصر <li> مدعوم في جميع المتصفحات الحديثة (Chrome, Firefox, Safari, Edge، إلخ).
• لا توجد مشاكل توافق مع <li> في HTML5.

إمكانية الوصول (Accessibility)

• الدورgett الافتراضي: عنصر <li> يتم التعرف عليه تلقائيًا بواسطة قارئات الشاشة كجزء من قائمة.
• ARIA: إذا تم استخدام <li> خارج قائمة <ul> أو <ol> (غير موصى به)، قد تحتاج إلى إضافة دور مثل role="listitem".
• النص البديل: تأكد من أن المحتوى داخل <li> واضح ومفهوم للمستخدمين الذين يعتمدون على قارئات الشاشة.

أخطاء شائعة وكيفية تجنبها

• وضع <li> خارج <ul> أو <ol>:
  • خطأ: <li>عنصر</li> (غير صحيح).
  • الحل: دائمًا ضع <li> داخل <ul> أو <ol>.
• استخدام خصائص مهجورة:
  • بدلاً من type في HTML، استخدم CSS list-style-type.
• إغلاق الوسم بشكل غير صحيح:
  • تأكد من إغلاق كل <li> بـ </li>.

مقارنة مع عناصر أخرى

• مقارنة مع <div>:
  • <li> مخصص للقوائم، بينما <div> عام ويُستخدم لتقسيم الصفحة.
• مقارنة مع <dt> و<dd>:
  • <dt> و<dd> يُستخدمان في قوائم التعريف (<dl>)، بينما <li> للقوائم العادية.

نصائح عملية

• استخدم <ul> للقوائم التي لا تحتاج ترتيبًا (مثل قوائم الخصائص).
• استخدم <ol> للقوائم التي تحتاج ترتيبًا (مثل خطوات إرشادية).
• قم بتنسيق القوائم بـ CSS لتحسين المظهر بدلاً من الاعتماد على HTML فقط.
• اختبر القوائم في قارئات الشاشة لضمان إمكانية الوصول.

مثال شامل

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مثال على القوائم</title>
  <style>
    ul {
      list-style-type: square;
      color: darkblue;
    }
    ol {
      list-style-type: lower-roman;
    }
    li:hover {
      background-color: #e0e0e0;
    }
  </style>
</head>
<body>
  <h5>قائمة غير مرتبة</h5>
  <ul>
    <li>التفاح
      <ul>
        <li>تفاح أحمر</li>
        <li>تفاح أخضر</li>
      </ul>
    </li>
    <li>البرتقال</li>
    <li>الموز</li>
  </ul>

  <h5>قائمة مرتبة</h5>
  <ol>
    <li value="10">البداية</li>
    <li>الخطوة التالية</li>
    <li>النهاية</li>
  </ol>
</body>
</html>

الخلاصة

عنصر <li> هو أداة أساسية لتنظيم المحتوى في شكل قوائم، سواء مرقمة أو غير مرقمة. يتميز بسهولة الاستخدام، مرونة التنسيق عبر CSS، ودعم إمكانية الوصول. باتباع الممارسات الجيدة وتجنب الأخطاء الشائعة، يمكن استخدامه لإنشاء قوائم جذابة وعملية تُحسّن تجربة المستخدم.

إذا كنت بحاجة إلى توضيح نقطة معينة أو أمثلة إضافية، أخبرني!

كيف كان المقال؟