آموزش تگ li در HTML

آموزش تگ li در HTML

در HTML، تگ <li> برای تعریف یک مورد در یک لیست استفاده می‌شود، برای مثال یک مورد در یک لیست نامرتب (<ul>) یا یک مورد در یک لیست مرتب (<ol>). این تگ برای نمایش هر مورد در لیست استفاده می‌شود که می‌تواند شامل متن، تصویر، لینک و یا هر عنصر دیگری باشد.

مثال‌های استفاده از تگ li:

1. استفاده در یک لیست نامرتب:

<ul>
  <li>آیتم ۱</li>
  <li>آیتم ۲</li>
  <li>آیتم ۳</li>
</ul>

2. استفاده در یک لیست مرتب:

<ol>
  <li>مورد ۱</li>
  <li>مورد ۲</li>
  <li>مورد ۳</li>
</ol>

ویژگی‌های تگ li:

1. value:

ویژگی value برای تعیین مقدار یک مورد در یک لیست مرتب (<ol>) استفاده می‌شود. به عنوان مثال:

<ol>
  <li value="1">آیتم ۱</li>
  <li value="2">آیتم ۲</li>
  <li value="3">آیتم ۳</li>
</ol>

2. type:

ویژگی type برای تغییر نوع شماره‌گذاری در لیست مرتب (<ol>) استفاده می‌شود. مقادیر ممکن برای این ویژگی شامل 1، A، a، I، i و غیره می‌باشد.

<ol type="A">
  <li>آیتم ۱</li>
  <li>آیتم ۲</li>
  <li>آیتم ۳</li>
</ol>

3. dir:

ویژگی dir جهت متن داخل عنصر <li> را تعیین می‌کند. مقادیر ممکن برای این ویژگی شامل rtl و ltr می‌باشد.

<ul>
  <li dir="rtl">آیتم ۱</li>
  <li dir="rtl">آیتم ۲</li>
  <li dir="rtl">آیتم ۳</li>
</ul>

4. lang:

ویژگی lang زبان متن داخل عنصر <li> را مشخص می‌کند.

<ul>
  <li lang="en">Item 1</li>
  <li lang="fa">آیتم ۲</li>
  <li lang="ar">البند ۳</li>
</ul>

نکات قابل توجه:

  • تگ <li> باید درون یکی از تگ‌های <ul> یا <ol> قرار گیرد.
  • متن و محتوای هر <li> می‌تواند شامل هر نوع عنصری از جمله متن، تصویر، لینک و غیره باشد.

با استفاده از این آموزش، می‌توانید به طور کامل از تگ <li> در HTML استفاده کنید و لیست‌های متنوع و مرتب را در وبسایت‌های خود ایجاد کنید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.