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>
Виж примера

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>
Виж примера

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>
Виж примера

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>
Виж примера

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>
Виж примера

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;
}
Виж примера