آموزش تگ li در HTML - راهنمای کار با لیست ها در html

تگ li برای تعریف آیتم های یک لیست به کار می رود. از این تگ معمولا در لیست های ترتیبی <ol>، لیست های غیر ترتیبی <ul> و لیست های منو <menu> استفاده ...

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

مثال تگ li در HTML

مثال 1: استفاده از تگ li در عنصر ul

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

مثال 2: استفاده از تگ li در عنصر ol

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

مثال 3: استفاده از ویژگی value در تگ ol

<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>

مثال 4: تغییر لیست شمارشگر با استفاده از css

<ol>
<li>Coffee</li>
<li style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>

مثال 5: لیست تو در تو

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>

مثال 6: لیست های تو در تو

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
</li>
<li>Milk</li>
</ul>

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

تگ li در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.

مرورگر	کروم	فایرفاکس	اپرا	سافاری	اینترنت اکسپلورر / اج
پشتیبانی	بله	بله	بله	بله	بله

ویژگی ها

ویژگی	مقدار	توضیحات
type	1 A a I i disc square circle	نوع آیتم های شمارشگر لیست را مشخص می کند. این ویژگی در HTML5 پشتیبانی نمی شود.
value	number	تعداد آیتم های یک لیست را مشخص می نماید و آیتم از مقدار مشخص شده به ترتیب افزایش پیدا می کنند. فقط برای لیست های مرتب <ol> استفاده می شود.