تگ ol در HTML

تگ ol در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 17 آذر 1399

در این مقاله با تگ ol در HTML و یا تگ ordered آشنا می شوید.

نکات اصلی Ordered List

  • با استفاده از تگ <ol> ، می توانید لیست آیتم های مرتب شده HTML را ایجاد کنید.
  • عناصر <li> که از نوادگان<ol> هستند موارد لیست را تعریف می کنند.
  • برای ایجاد لیست های غیر مرتب ، ازتگ <ul> استفاده کنید.
  • تگ ol از تمام ویژگی های جهانی پشتیبانی می کند.

استفاده از تگ ol در HTML

با استفاده از تگ های ol در HTML در یک سند ، می توانید لیست های شماره گذاری شده HTML ایجاد کنید:

<ol>
  <li>Action</li>
  <li>Adventure</li>
  <li>Thriller</li>
  <li>Comedy</li>
</ol>

لیست های مرتب شده HTML همچنین می توانند تو در تو قرار بگیرند:

<ol>
<li>Coffee</li>
<li>Breakfast
<ol>
  <li>Eggs</li>
  <li>Bacon</li>
  <li>Toast</li>
</ol>
</li>
<li>Cake</li>
</ol>

ویژگی های تگ ol

ویژگی type نوع شماره گذاری را برای استفاده تعریف می کند:

DescriptionValue
اعداد (مقدار پیش فرض)1
اعداد بزرگ رومیI
اعداد کوچک رومیi
حروف بزرگA
حروف کوچکa
<ol type="I">
  <li>Burger</li>
  <li>Pizza</li>
  <li>Sandwich</li>
</ol>

لیست شماره گذاری شده HTML به طور پیش فرض از شماره 1 شروع می شود. برای تغییر آن می توانید از ویژگی start استفاده کنید. این یک مقدار شروع برای شماره گذاری لیست مرتب شده HTML تعریف می کند. شروع باید همیشه در یک عدد تعریف شود ، بدون توجه به نوع شماره گذاری انتخاب شده:

<ol start="11">
  <li>Eleven</li>
  <li>Twelve</li>
  <li>Thirteen</li>
</ol>

توجه: هر دو نوع start و type در HTML4 منسوخ شده و مجدداً در HTML5 معرفی می شوند.

ویژگی reversed که به تازگی در HTML5 معرفی شده است ، ترتیب لیست را به صورت نزولی تنظیم می کند:

<ol reversed>
  <li>Apple</li>
  <li>Orange</li>
  <li>Mango</li>
</ol>

compact لیست را به سبک فشرده ارائه می دهد. با این حال ، در HTML5 منسوخ شده است و نباید استفاده شود:

<ol compact>
  <li>Action</li>
  <li>Adventure</li>
  <li>Thriller</li>
</ol>

نکته: به جای compact ، از ویژگی CSS در ارتفاع خطی استفاده کنید. مقدار 80٪ تأثیر بسیار مشابهی خواهد داشت.

پشتیبانی مرورگرها

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊