تگ li در HTML

با تگ li در HTML در این مقاله آشنا می شوید.

نکات اصلی تگ li

• می توانید از تگ های li به عنوان فرزندان عناصر <ol> و <ul> یا <menu> برای تعریف یک مورد واحد در لیست استفاده کنید.
• هر دو تگ شروع و پایان باید اجباری باشند.
• با استفاده از CSS می توانید عناصر  li را سبک کنید.

استفاده از تگ li در HTML

تگ <li> یک مورد لیست را در لیست مشخص می کند:

<p>This list is unordered:</p>
<ul>
  <li>Cacao</li>
  <li>Water</li>
  <li>Juice</li>
</ul>

<p>This list is ordered:</p>
<ol>
  <li>Cacao</li>
  <li>Water</li>
  <li>Juice</li>
</ol>

توجه: شما باید تگ های li در HTML را در یک عنصر والد قرار دهید: <ol> و <ul> یا <menu>.

در بیشتر مرورگرها ، عنصر <li> با این مقادیر پیش فرض نمایش داده می شود:

li {
    display: list-item;
}

با استفاده از تگ های <li> می توانید لیست هایی را در لیست ها ایجاد کنید (لیست های تو در تو):

<ul>
  <li>Cacao</li>
  <li>Water
    <ul>
      <li>Clean water</li>
      <li>Tap water</li>
    </ul>
  </li>
  <li>Juice</li>
</ul>

ویژگی های تگ li

مقدار مقدار ترتیبی مورد لیست را تعریف می کند:

<ol>
  <li value="100">Cacao</li>
  <li>Water</li>
  <li>Juice</li>
  <li>Beer</li>
  <li>Cola</li>
</ol>

مقدار فقط با لیست های شماره دار قابل استفاده است و در تعداد تعریف می شود. در HTML4 منسوخ شد ، اما سپس در HTML5 بازگردانده شد.

ویژگی نوع منسوخ شده در حال حاضر نوع گلوله را برای استفاده تعریف می کند:

<ol>
  <li>Cacao</li>
  <li type="a">Water</li>
  <li>Juice</li>
</ol>

<ul>
  <li>Cacao</li>
  <li type="square">Water</li>
  <li>Juice</li>
</ul>

توجه: به جای نوع ، از ویژگی CSS list-style-type استفاده کنید.

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

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.