تگ ol در HTML

قبلی بعدی

این لیست ها به صورت منظم و شماره گذاری شده هستند.

برای نمایش این لیست ها از تگ ol استفاده می شود که مخفف ordered list است.

برای نمایش آیتم ها در لیست باید از تگ li استفاده کنیم که مخفف list item است.

ساختار تگ ol به صورت زیر است:

<ol>
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
</ol>

ویژگی type در تگ ol

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

برای اینکه بتوانیم لیست را با انواع حالت های مختلف مرتب کنیم، باید از ویژگی type استفاده کنیم.

مقدار هایی که ویژگی type دریافت می کند را در جدول زیر مشاهده می کنید:

مقدار	توضیحات
1	مرتب شده بر اساس اعداد انگلیسی
A	مرتب شده بر اساس حروف انگلیسی بزرگ
a	مرتب شده بر اساس حروف انگلیسی کوچک
I	مرتب شده بر اساس اعداد رومی بزرگ
i	مرتب شده بر اساس اعداد رومی کوچک

<ol type="1">
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
</ol>

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ol>

<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ol>

<ol type="I">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ol>

<ol type="i">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ol>

ویژگی start در تگ ol

یکی دیگر از ویژگی های تگ ol ، ویژگی start است.

این ویژگی مشخص می کند که نقطه شروع لیست مورد نظر از کجا باشد.

<ol start="5">
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
</ol>

در مثال بالا دیدید که لیست مورد نظر از عدد 5 شروع شده است.

نکته: این ویژگی برای تگ ol استفاده می شود و برای تگ های ul کاربردی ندارد.

لیست های تو در تو (Nested) در HTML

لیست های منظم HTML به صورت تو در تو نیز نوشته می شوند.

یعنی اینکه می توانیم در یک لیست منظم ، از لیست های منظم دیگر استفاده کنیم.

<ol>
    <li>HTML
        <ol>
            <li>a tag</li>
            <li>img Tag</li>
        </ol>
    </li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

خلاصه درس

در این بخش بررسی کاملی از لیست منظم انجام دادیم.
با ویژگی type و start آشنا شدیم.
همچنین لیست های تو در تو (nested) را مورد بررسی قرار دادیم.

تمرین

لیست زیر را به ترتیب حروف انگلیسی بزرگ کامل کنید.

مشاهده پاسخ

قبلی بعدی

توسعه دهندگان

احسان اسلامی