THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML <ol> Tag


Example

Two different ordered lists (the first list starts at 1, and the second starts at 50):

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

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

The <li> tag is used to define each list item.

Tip: Use CSS to style lists.

Tip: For unordered list, use the <ul> tag. 


Browser Support

Element
<ol> Yes Yes Yes Yes Yes


Attributes

Attribute Value Description
reversed reversed Specifies that the list order should be reversed (9,8,7...)
start number Specifies the start value of an ordered list
type 1
A
a
I
i
Specifies the kind of marker to use in the list

Global Attributes

The <ol> tag also supports the Global Attributes in HTML.


Event Attributes

The <ol> tag also supports the Event Attributes in HTML.


More Examples

Example

Set different list types (with CSS):

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

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

Example

Display all the different list types available with CSS:

<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>
Try it Yourself »

Example

Reduce and expand line-height in lists (with CSS):

<ol style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

Example

Nest an unordered list inside an ordered list:

<ol>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ol>
Try it Yourself »

Related Pages

HTML tutorial: HTML Lists

HTML DOM reference: Ol Object

CSS Tutorial: Styling Lists


Default CSS Settings

Most browsers will display the <ol> element with the following default values:

Example

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
Try it Yourself »