HTML Ordered Lists

The topic of discussion is HTML Lists Ordered. An ordered list is defined by the HTML <ol> tag. There are two types of ordered lists: numerical and alphabetical.

HTML Lists Ordered

Using an ordered list in HTML, items can be arranged in a specific order, with sequential numbers assigned to each item. Unlike an unordered list, where each item is denoted by a bullet point or other symbol.

In order to create an ordered list in HTML, the <ol> tag is used to indicate the start of the list and the <li> tag is used to identify each item in the list. In order to generate the numbers for each item in the list, the browser automatically generates the numbers starting with 1 and incrementing them with each subsequent item in the list.

CSS allows you to customize the look and feel of the ordered list in a variety of ways, such as changing the numbering style, adding a background color, or adjusting the spacing between the items within the ordered list. There are many ways in which ordered lists are used in web content, such as step-by-step instructions, top 10 lists, and other types of ranking content.

A number will be assigned to each item in the list by default:


<!DOCTYPE html> <html> <body> <ol> <li>web 3.0</li> <li>Blockchain</li> <li>Meta</li> </ol> </body> </html>

Html Lists Ordered- The Type Attribute

The <ol> tag’s type parameter specifies the kind of list item marker:

Type Overview
type=”A” Uppercase letters will be used to number the items on the list
type=”1″ List items are numbered (by default)
type=”I” List items will be numbered in uppercase roman numerals
type=”a” List items will be numbered in lowercase
type=”i” Roman numerals will be used to number the items on the list


<!DOCTYPE html> <html> <body> <ol type="1"> <li>Web 3.0</li> <li>Blockchain</li> <li>Meta</li> </ol> </body> </html>

Lowercase Letters:

<!DOCTYPE html> <html> <body> <ol type="a"> <li>Web 3.0</li> <li>Blockchain</li> <li>Meta</li> </ol> </body> </html>

Uppercase Letters:

<!DOCTYPE html> <html> <body> <ol type="A"> <li>Web 3.0</li> <li>Blockchain</li> <li>Meta</li> </ol> </body> </html>

Lowercase Roman Numbers:

<!DOCTYPE html> <html> <body> <ol type="i"> <li>Web 3.0</li> <li>Blockchain</li> <li>Meta</li> </ol> </body> </html>

Uppercase Roman Numbers:

<!DOCTYPE html> <html> <body> <ol type="I"> <li>Web 3.0</li> <li>Blockchain</li> <li>Meta</li> </ol> </body> </html>

Control List Counting

An ordered list counts from 1 by default. You can use the start attribute if you want to start counting from a specified number, such as:


<!DOCTYPE html> <html> <body> <ol start="50"> <li>Web 3.0</li> <li>Blockchain</li><li>Meta</li> </ol> </body> </html>

Reversed HTML Lists

The reversed attribute is a boolean attribute.

It specifies that the list order should be descending (9,8,7…) rather than ascending (1, 2, 3…).


<!DOCTYPE html> <html> <head> <title>List Reversed</title> <style> </style> </head> <body> <p>An ordered list reversed</p> <ol reversed> <li>Hot Tea</li> <li>Cold Juice</li> <li>Cappuccino Coffee</li> </ol> </body> </html>

Another example of reversed ordered list using the alphabatical order:


<!DOCTYPE html> <html><body><br><br><br><title>List Reversed</title><br><style><br>li{<br>list-style-type: lower-alpha;<br>}<br></style><br><br><br><p>An unordered list</p><br><ol reversed><br><li>Hot Tea</li><br><li>Cold Juice</li><br><li>Cappuccino Coffee</li><br></ol><br><br> </body></html>

Here is the combined list of all the ol types:


<!DOCTYPE html> <html><body><br><br><br><style><br></style><br><br><br><p>An unordered list</p><br><ol reversed><br><li>Hot Tea</li><br><li>Cold Juice</li><br><li>Cappuccino Coffee</li><br></ol><br><ol type="1"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><ol type="A"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><ol type="a"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><ol type="I"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><ol type="i"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><ol start="50"><br><li>Web 3.0</li><br><li>Blockchain</li><br><li>Meta</li><br></ol><br><br> </body></html>

HTML Lists Ordered Nested

There is the ability to nest lists (list inside list within a list) HTML lists are ordered as follows:


<!DOCTYPE html> <html> <body> <ol> <li>Web 3.0</li> <li>Blockchain <ol><li>Meta</li> <li>quantum computing</li> </ol></li> <li>machine learning</li> </ol> </body> </html>

Note: A list item (<li>) may include additional HTML elements, such as links and photos, as well as a new list.

HTML Lists Ordered – Tags

Tag Overview
<dt> Delivers a term’s definition in a description list.
<ul> List that is arranged in order in HTML Lists Ordered
<li> List items are defined by this property
<dl> A description list is specified
<ol> Lists that are ordered
<dd> Provides a description list for the term

Visit our HTML Tag Reference to see a complete list of all HTML tags.

Chapter Summary

  • Representing an ordered list using HTML’s <ol> element
  • Determining the numbering type with the HTML type attribute
  • To describe a list item, use the HTML <li> element
  • Nested lists are viable
  • HTML elements can be included in list items
To get connected to the latest technical information of this site do subscribe to our Newsletter below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *