آموزش و يادگيري تگ li در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <li> آشنا مي‌شويم. اين تگ براي ايجاد آيتم‌هاي فهرست درون ليست‌هاي مرتب (<ol>) و غيرمرتب (<ul>) استفاده مي‌شود.

تگ li در HTML چيست؟

تگ <li> عنصر ليست را تعريف مي‌کند و هميشه بايد داخل تگ <ul>، <ol> يا <menu> قرار گيرد. اين تگ به شما امکان مي‌دهد آيتم‌هاي متني يا حتي عناصر HTML ديگر را به صورت منظم در ليست نمايش دهيد.

مثال ساده از تگ li

<ul>
  <li>سيب</li>
  <li>موز</li>
  <li>پرتقال</li>
</ul>

<ol>
  <li>قدم اول</li>
  <li>قدم دوم</li>
  <li>قدم سوم</li>
</ol>

در اين مثال، از تگ <li> براي ايجاد آيتم‌هاي ليست در ليست‌هاي مرتب و غيرمرتب استفاده شده است.

ويژگي‌هاي مهم تگ li

ويژگي	توضيح
value	تنظيم شماره آيتم در ليست مرتب
class / id	اعمال استايل يا شناسه يکتا براي ارجاع و CSS

مثال با استايل CSS

<style>
  ul, ol {
    padding-left: 20px;
  }
  li {
    margin-bottom: 5px;
    line-height: 1.5;
  }
  li.custom {
    color: #2196f3;
    font-weight: bold;
  }
</style>

<ul>
  <li class="custom">سيب</li>
  <li>موز</li>
  <li>پرتقال</li>
</ul>