تگ li در HTML

با استفاده از تگ li در HTML میتوانید مورد های یک لیست مرتب یا نامرتب را تعریف کنید.

مثال

در مثال زیر ما یک لیست مرتب با تگ <ol> و یک لیست نامرتب با تگ <ul> تعریف کرده ایم:

<ol>
<li>سیب</li>
<li>گیلاس</li>
<li>موز</li>
</ol>

<ul>
<li>سیب</li>
<li>گیلاس</li>
<li>موز</li>
</ul>

تست آنلاین کد

تعریف و کاربرد

تگ li در HTML یک مورد را در لیست تعریف می کند.

از تگ <li> در لیست های مرتب شده <ol> یا لیست های نامرتب <ul> یا فهرست های منو <menu> استفاده می شود.

موارد تعریف شده در لیست های <ul> یا <menu> به صورت نقطه دایره شکل تو پر نمایش داده می شود.

موارد تگ <li> در عنصر <ol> معمولاً به صورت اعداد یا حروف نمایش داده می شوند.

پشتیبانی مرورگر ها

خواص

خواص عمومی

تگ li از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ li از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر li در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

li {
  display: list-item;
}

مثال های بیشتر

استفاده از ویژگی value در لیست های مرتب شده:

<ol>
<li value="100">میز</li>
<li>صندلی</li>
<li>آب</li>
<li>درخت</li>
<li>پلنگ</li>
<li>خرس</li>
</ol>

تست آنلاین کد
تعریف انواع لیست ها با CSS:

<ol>
<li>قهوه</li>
<li style="list-style-type:lower-alpha">چای</li>
<li>شیر</li>
</ol>
<ul>
<li>سیب</li>
<li style="list-style-type:square">موز</li>
<li>هندوانه</li>
</ul>

تست آنلاین کد
ایجاد یک لیست درون لیستی دیگر ( لیست های تو در تو ):

<ul>
<li>قهوه</li>
<li>چای
<ul>
<li>چای سیاه</li>
<li>چای سبز</li>
</ul>
</li>
<li>شیر</li>
</ul>

تست آنلاین کد
یک لیست تو در تو پیچیده تر:

<ul>
<li>قهوه</li>
<li>چای
<ul>
<li>چای سبز</li>
<li>چای سیاه
<ul>
<li>آفریقا</li>
<li>چین</li>
</ul>
</li>
</ul>
</li>
<li>شیر</li>
</ul>

تست آنلاین کد