HTML الوسم <li>

تعريفه

نستخدم الوسم <li> على هذا النحو <li>content</li> لإضافة عنصر في القائمة التي يتم إنشاءها بواسطة الوسم <ol> أو <ul> أو <menu>.

مكان الكلمة content نمرر النص أو الرابط الذي نريد عرضه بداخل العنصر.
يمكنك وضع ما شئت بداخل العنصر و لكن في العادة يتم وضع إما نص عادي فيه أو رابط.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <li>.

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية value

في حال كان الوسم <li> موضوع بداخل وسم <ul> يمكن إضافتها له لتغيير قيمة ترقيمه التلقائي.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بعرض قائمة نوعها <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>
	

جرب الكود