HTML <ol> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 11 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

List is a collection of items which are related. Lists create a well structured and easy-to-read information. In HTML there are 3 types of list available.

  1. Ordered list <ol>
  2. unordered List <ul>
  3. Description List <dl>

Ordered list <ol>

An HTML ordered list (<ol>) is used to display a list of items in a specific sequence, typically numbered. Ordered list uses some kind of sequence to list items. This sequence can be letters, Numbers or Roman Numerals. The HTML <ol> element is used to create ordered list. The <li> element is used to create list items.

Syntax : 


<ol> 
  <li> item1-content </li> 
  <li> item2-content </li> 
  <li> item3-content </li> 
  <li> item4-content </li> 
</ol>

Example : 


<ol> 
  <li> Chapter-1 </li> 
  <li> Chapter-2 </li> 
  <li> Chapter-3 </li> 
  <li> Chapter-4 </li> 
</ol>

Output :

  1. Chapter-1
  2. Chapter-2
  3. Chapter-3
  4. Chapter-4


Tag Omission

The HTML <ol> element must have both start tag and end tag.

ATTRIBUTES

a. Type

It is used to specify the sequence type. The values it can take are:

  • a - used for lowercase letters
  • A - used for uppercase letters
  • 1 - used for number (default)
  • i - used for lowercase Roman Numerals
  • I - used for Uppercase Roman Numerals
            
<ol type="a"> 
  <li> Chapter-1 </li> 
  <li> Chapter-2 </li>
  <li> Chapter-3 </li> 
  <li> Chapter-4 </li> 
</ol>

  1. Chapter-1
  2. Chapter-2
  3. Chapter-3
  4. Chapter-4


b. reversed

This attribute is used to reverse the sequence of list. It is of boolean type ( possible values are True or False). If set to true, then list is reversed ie list items will be numbered in descending ordered (high to low). 


<ol reversed > 
  <li> Chapter-1 </li> 
  <li> Chapter-2 </li> 
  <li> Chapter-3 </li> 
  <li> Chapter-4 </li> 
</ol>

  1. Chapter-1
  2. Chapter-2
  3. Chapter-3
  4. Chapter-4


c. Start

This attribute specifies the starting Number Or Alphabet for sequence. For example to start sequence from Alphabet "E" use start="5" and type="A". 


<ol start="5" type="A"> 
  <li> Chapter-1 </li> 
  <li> Chapter-2 </li> 
  <li> Chapter-3 </li> 
  <li> Chapter-4 </li> 
</ol>

  1. Chapter-1
  2. Chapter-2
  3. Chapter-3
  4. Chapter-4

Frequently Asked Questions(FAQ)

How to Make an Ordered List in HTML ?
An ordered list in HTML is created using the <ol> (ordered list) tag. Each item in the list is wrapped inside <li> (list item) tags. The below syntax will make it clear. 

<ol> 
  <li> item1-content </li> 
  <li> item2-content </li> 
  <li> item3-content </li> 
  <li> item4-content </li> 
</ol>

How to create an ordered list in html with a decreasing index?
The HTML reversed attribute is used to create list in decreasing order. It is an boolean attribute, so just specifying its name in HTML <ol> makes an list reversed. ex. (<ol reversed> )

How many types of list are in html ?
HTML provides three main types of lists:
  1. Ordered list <ol>
  2. unordered List <ul>
  3. Description List <dl>

Can list items contain content other than text ?
Yes, <li> element can contain various types of content, including text, images, links, and other HTML elements.

How can you change the numbering style of an ordered list ?
The numbering style of an ordered list can be changed using the type attribute or CSS list-style-type property.

Can you nest ordered and unordered lists within each other ?
Yes, ordered and unordered lists can be nested within each other.

How can you increase the space between the number and the text in a list item ?
You can increase the space between the number (or bullet) and the text in a list item using CSS. You can adjust the space between the number and the text using CSS, such as modifying the margin or padding property of the <li> elements.

Why is my ordered list (<ol>) not displaying numbers ?
If your ordered list (<ol>) is not displaying numbers, here are some possible reasons and solutions:

1. In CSS list-style-type: none; is Applied.
Sol: You need to remove list-style-type: none; or explicitly set it to decimal.

2. In CSS display: block; is set on <li> Items
Sol: Use list-style-type: decimal; or list-style-position: inside;

3. When an ordered list is placed inside another element that affects its styles, the numbers might disappear.
Sol: Ensure proper structure and correct nesting of <ol> inside parent elements.

4. Some browsers might not display numbers due to inherited styles.
Sol: Try adding list-style-type: decimal; styling to <ol> element.

Why do list markers disappear when display: block; is applied to <li> elements in a <ul> or <ol> ?
By default, list items (<li>) have CSS display: list-item; rule applied on them by default. This special list-item; display mode allows the browser to render markers (bullets/numbers) automatically.

When you change display to block, The <li> now behaves like a standard block element and It loses the built-in list styling (i.e., numbers in <ol> or bullets in <ul>).

If you need display: block but still want the list markers, use list-style-position: inside;. 


li {
    display: block;
    list-style-position: inside;
}


or If list-style-position doesn't work, you can add markers manually using ::before as shown below. 


ol li{
    display: block;
    counter-increment: list-counter;
    position: relative;
}
    
ol{
    counter-reset: list-counter;
}
    
ol li::before{
    content: counter(list-counter) ". ";
    position: absolute;
    left: -20px;
}