HTML <ol> tag

The <ol> tag is used to define ordered list. There must be one or more <li> inside this element. Each list is defined by <li> element.

Type: Block Element

Syntax of <ol> tag

<ol>
 <li> List 1 </li>
 <li> List 2 </li>
</ol>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<ol> Yes Yes Yes Yes Yes
<ol> tag can't be used alone without any <li> tag.

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3> Example of order list </h3>
<ol>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ol>
</body>
</html>
Run The code »

Output on the browser

Example of order list

  1. List 1
  2. List 2
  3. List 3

Attributes of <ol> tag

Attribute Value Note
type 1 (Default value)
A
a
I
i		 It specifies which bullet type will be displayed.
start number It sets the starting number.
reversed
(boolean attribute)		 It defines an ordered list in reverse order.
A boolean attribute is an attribute that does not need its value, its presence alone defines "true".

Example of type attribute (Obsolete)

<ol type="A">
  <li> List 1 </li>
  <li> List 1 </li>
</ol>

Modern CSS replacement

<ol style="list-style-type: upper-alpha;">
  <li>List 1</li>
  <li>List 2</li>
</ol>

Old type values vs CSS replacement

Old type value CSS replacement
1 list-style-type: decimal;
A list-style-type: upper-alpha;
a list-style-type: lower-alpha;
I list-style-type: upper-roman;
i list-style-type: lower-roman;

Example of using start attribute

The start attribute is valid for the <ol> tag and, it has no effect on <ul> tag

<ol start="5">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

The above list will display in the sequence 5,6,7 not 1,2,3.
This attribute helps in making custom sequence number and, in restarting the sequence from a specific number.

Example of using reverse attribute

The reverse attribute is valid for the <ol> tag and, it has no effect on <ul> tag

<h3>Top 3 movies</h3>
<ol reversed>
  <li>Batman</li>
  <li>Superman</li>
  <li>Avenger</li>
</ol>

The above list will display in the sequence 3(Batman) 2(Superman) and 1(Avenger); not 1,2,3.
This attribute helps in buiding suspence or importance.

More reference

You can make nested ordered list or multi-level list as shown in below. 

<h3>Example of nested ordered list </h3> 
<ol>

  <li> HTML
    <ol style="list-style-type: lower-alpha;">
      <li> Elements </li>
      <li> Tags </li>
      <li> Attributes</li>
    </ol>
  </li>

  <li> CSS </li>
  <li> JavaScript </li>

</ol>

Output on the browser

Example of nested ordered list

  1. HTML
    1. Elements
    2. Tags
    3. Attributes
  2. CSS
  3. JavaScript

Default CSS properties of <ol> tag

ol {
  display:list-item;
  list-style-type:decimal;
  margin:1em 0;
  padding-left:40px;
}