إعلان
تعلم الآن

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>
	

جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة