آموزش تگ ol در HTML - راهنمای کار با لیست ترتیبی در html

برای ایجاد لیست ترتیبی یا مرتب شده از تگ ol استفاده می شود. برای نشانه گذاری لیست های ترتیبی می توان از اعداد و حروف استفاده کرد.

برای تعریف آیتم های لیست از تگ li استفاده می شود.

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

مثال تگ ol در HTML

مثال 1: لیست ترتیبی با نشانگر عددی

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

مثال 2: لیست ترتیبی با نشانگر عددی شروع از 10

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

مثال 3: لیست ترتیبی با نشانگر حروف انگلیسی

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

مثال 4: لیست ترتیبی با نشانگر شماره معکوس شده

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

مثال 5: لیست ترتیبی با نشانگر رومی

<ol style="list-style-type:upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

مثال 6: لیست ترتیبی با نشانگر حروف کوچک انگلیسی

<ol style="list-style-type:lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

مثال 7: لیست ترتیبی با نشانگر اعداد فارسی

<ol style="list-style-type:persian">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

مثال 8: لیست ترتیبی با نشانگرهای مختلف

<html>
<head>
<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>
</head>
<body>

<h1>All the different list types for ol with CSS</h1>

<ol class="a">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="b">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="c">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="e">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="f">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="g">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="h">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="i">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="j">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="k">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="l">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="m">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="n">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="o">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="p">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="q">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="r">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="s">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>

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

تگ <ol> در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.

مرورگر	کروم	فایرفاکس	اپرا	سافاری	اینترنت اکسپلورر / اج
پشتیبانی	بله	بله	بله	بله	بله

ویژگی ها

ویژگی	مقدار	توضیحات
compact	compact	مشخص می کند که لیست باید کوچکتر از حالت نرمال باشد. این ویژگی در HTML5 پشتیبانی نمی شود.
reversed	reversed	مشخص می کند که نشانگر لیست باید به صورت نزولی باشد.
start	number	مقدار شروع شماره گذاری آیتم های لیست را مشخص می کند.
type	1 A a I i	نوع نشانگر لیست را مشخص می کند.