HTML الوسم <li>
تعريفه
نستخدم الوسم <li> على هذا النحو <li>content</li> لإضافة عنصر في القائمة التي يتم إنشاءها بواسطة الوسم <ol> أو <ul> أو <menu>.
مكان الكلمة content نمرر النص أو الرابط الذي نريد عرضه بداخل العنصر.
يمكنك وضع ما شئت بداخل العنصر و لكن في العادة يتم وضع إما نص عادي فيه أو رابط.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <li>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | 3 | 1 | 18 | 4 | ≤12.1 | 1 | 1.0 |
خصائصه
نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.
الخاصية value
في حال كان الوسم <li> موضوع بداخل وسم <ul> يمكن إضافتها له لتغيير قيمة ترقيمه التلقائي.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 |
إستخدامه
في المثال التالي قمنا بعرض قائمة نوعها <ol>.
المثال الأول
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>
في المثال التالي قمنا بعرض قائمة نوعها <ul>.
المثال الثاني
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>
في المثال التالي قمنا بعرض قائمة نوعها <menu>.
ملاحظة: الوسم <menu> يعمل فقط في متصفح Firefox.
المثال الثالث
<menu>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</menu>
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
li {
display:-item;
}
نصائح و ملاحظات
في حال أردت تغيير نوع الترقيم الذي يعتمده الوسم <li> في حال كان موضوعاً بداخل وسم <ol> أو في حال أردت تغيير نوع التنقيط الذي يعتمده الوسم <li> في حال كان موضوعاً بداخل وسم <ul> يجب فعل ذلك بواسطة الخاصية list-style-type في CSS.
مثال
<ol>
<li>Apple</li>
<li style="list-style-type:upper-alpha">Orange</li>
<li>Mango</li>
</ol>
<ul>
<li>Apple</li>
<li style="list-style-type:circle">Orange</li>
<li>Mango</li>
</ul>
