تگ ol در HTML

تگ ol در HTML چیست؟‌ چگونه در یک صفحه وب می‌توانیم لیست‌های ترتیبی بسازیم؟ چگونه لیست‌های ordered را استایل‌دهی کنیم. در این مقاله به صورت کامل در رابطه با تگ ol صحبت می‌کنیم و شما را با این تگ آشنا می‌کنیم.

تگ ol در HTML

تگ ol برای ساخت لیست‌های ترتیبی یا Ordered Lists مورد استفاده قرار می‌گیرد.

هنگامی که در لیست‌های ما ترتیب اهمیت پیدا می‌کند، می‌بایست از لیست‌های ترتیبی استفاده کنیم به این علت که این لیست‌ها با قرار دادن ترتیب مانند (۱. ۲. ۳. و غیره) یا نوع های دیگر باعث ترتیب بندی کردن عناصر لیست شما می‌شوند. در لیست‌های ترتیبی با تغییر ترتیب لیست ممکن است باعث تغییر معنای لیست شویم.

اگر لیستی که می‌خواهید بسازید نیازی به ترتیب‌بندی ندارد، می‌توانید از تگ ul استفاده کنید. همچنین اگر در رابطه با لیست‌ها اطلاعی ندارید می‌توانید مقاله ما در رابطه با آشنایی با لیست‌ها را مشاهده کنید.

تگ زیرمجموعه li

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

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

یک نمونه از کد لیست‌های ترتیبی را در زیر می‌توانید مشاهده کنید.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

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

شما می‌توانید لیست‌های ترتیبی‌ای که می‌سازید را به صورت تو در تو نیز معرفی کنید که باعث می‌شود خروجی دقیق‌تری را در لیست‌هایتان داشته باشید. نمونه کد لیست‌های ترتیبی تو در تو را در زیر مشاهده می‌کنید.

<ol>
<li>first item</li>
<li>second item <!-- closing </li> tag not here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li> <!-- Here's the closing </li> tag -->
<li>third item</li>
</ol>

خاصیت‌های تگ ol

انواع لیست‌های ترتیبی

همانطور که در جدول خاصیت ها موجود است ما ۵ نوع متفاوت از لیست‌های ترتیبی داریم. در کد زیر می‌توانید انواع آن را مشاهده کنید :

 

<!---- Numberic List ---->

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Alphabet Uppercase List ---->

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Alphabet lowercase List ---->

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Roman Numbers lowercase List ---->

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<!---- Roman Numbers Uppercase List ---->

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

نتیجه گیری

در این مقاله با لیست‌های ترتیبی، خصوصیات آن‌ها و نحوه پیاده‌سازی آن‌ها در صفحات HTML آشنا شدیم و انواع لیست ترتیبی را شناختیم.

امیدوارم مطالب مورد نیاز در رابطه با تگ‌های ol را به صورت کامل یاد گرفته باشید.

خیلی خوشحال میشم که سوالات، انتقادات و پیشنهاداتتان را در بخش نظرات میزفا بفرستید.