The Speed Coding

HTML <ol> Tag


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

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

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

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

<ol> Yes Yes Yes Yes Yes


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
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


Set different list types (with CSS):

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

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


Display all the different list types available with CSS:

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; }


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 >


Nest an unordered list inside an ordered list:

  <li > Coffee</li>
  <li > Tea
      <li>Black tea</li >
      <li>Green tea </li>
  </li >
  <li>Milk</li >
</ol >

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:


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