لیست های مرتب در HTML – المان های <ol> و <li>

لیست های مرتب (Ordered lists) به لیست‌هایی گفته می‌شود که ترتیب عناصر در آن‌ها مهم است. لیست مراحل انجام تنظیمات در یک نرم افزار یا مراحل تولید یک محصول از جمله مواردی هستند که در زمره لیست های مرتب قرار می‌گیرند. در HTML برای ایجاد لیست های مرتب از المان <ol> استفاده می‌شود و هر عنصر یا آیتم در این لیست ها با کمک المان های <li> تعریف می‌شود.

به عبارت ساده‌تر، هر لیست مرتب با یک تگ <ol> شروع و با یک تگ </ol> به پایان می‌رسد. مابین این دو تگ، المان های <li> قرار می‌گیرند که هرکدام یک آیتم لیست را مشخص می‌کنند. در مثال زیر ساختار کلی برای ایجاد لیست های مرتب در HTML را مشاهده می‌کنید:

<ol>
  <li>به بخش تنظیمات مراجعه کنید</li>
  <li>زبان موردنظر خود را از لیست کشویی زبان در پنجره تنظیمات انتخاب کنید</li>
  <li>روی دکمه تأیید کلیک کنید</li>
</ol>

نتیجه قطعه کد فوق معمولا به شکل پیشفرض مشابه با نمونه زیر توسط مرورگر نمایش داده می‌شود:

همانطور که در تصویر فوق مشاهده می‌کنید آیتم های موجود در لیست‌های مرتب به صورت پیشفرض با کمک اعداد مشخص می‌شوند. البته این نحوه نشانه گذاری توسط خصوصیت type در تگ <ol> قابل تغییر است.

تغییر نشانه برای عناصر لیست های مرتب با کمک خصوصیت type

در HTML می‌توانید به جای اعداد معمولی (حالت پیشفرض)، از اعداد رومی یا حروف برای عناصر لیست های مرتب استفاده کنید. برای تعیین نوع نشانه می‌توانید از مقادیر زیر برای خصوصیت type در تگ شروع <ol> کمک بگیرید:

• type=”1″ برای شماره گذاری عناصر لیست با استفاده از اعداد معمولی
• type=”a” یا type=”A” برای استفاده از حروف کوچک یا بزرگ در ابتدای عناصر لیست
• type=”i” یا type=”I” برای شماره گذاری عناصر لیست با استفاده از اعداد رومی کوچک یا بزرگ

در مثال زیر نمونه استفاده از خصوصیت type برای ایجاد لیست مرتب با حروف بزرگ را مشاهده می‌کنید:

<ol type="A">
  <li>به بخش تنظیمات مراجعه کنید</li>
  <li>زبان موردنظر خود را از لیست کشویی زبان در پنجره تنظیمات انتخاب کنید</li>
  <li>روی دکمه تأیید کلیک کنید</li>
</ol>

نتیجه قطعه کد فوق نیز مشابه با نمونه زیر خواهد بود:

تغییر عدد آغازین در لیست های مرتب با کمک خصوصیت start

همانطور که مشاهده کردید در حالت پیشفرض شماره‌گذاری عناصر لیست با اعداد معمولی از عدد 1 آغاز می‌شود. شما می‌توانید با کمک خصوصیت start در تگ <ol> این عدد را تغییر دهید. برای مثال در نمونه زیر، شماره‌گذاری عناصر لیست از 20 شروع می‌شود:

<ol start="20">
  <li>به بخش تنظیمات مراجعه کنید</li>
  <li>زبان موردنظر خود را از لیست کشویی زبان در پنجره تنظیمات انتخاب کنید</li>
  <li>روی دکمه تأیید کلیک کنید</li>
</ol>

نتیجه قطعه کد فوق نیز مشابه با لیست زیر خواهد بود:

لیست‌های مرتب تو در تو

شما می‌توانید در HTML یک لیست را داخل یک لیست دیگر قرار دهید. به این ترتیب می‌توانید لیستی ایجاد کنید که برخی از آیتم هایش شامل یک زیرلیست هستند.

برای این منظور (در مورد لیست های مرتب)، کافیست یک المان <ol> را همراه با آیتم هایش مشابه با نمونه زیر مابین تگ شروع <li> و تگ پایان </li> مربوط به یک آیتم از لیست اصلی قرار دهید.

<ol>
  <li>عنصر اول
    <ol>    
      <li>عنصر اول</li>
      <li>عنصر دوم</li>
    </ol>
  </li>
  <li>عنصر دوم</li>
  <li>عنصر سوم</li>
</ol>

نتیجه قطعه کد فوق نیز مشابه با نمونه زیر رندر می‌شود:

بازگشت به فهرست مجموعه آموزشی HTML