آموزش تگ 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 - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

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

نظرات

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

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