In this section, we will learn what the HTML <ol> element is and how to use it.

Ordered Lists in HTML: How Can You Make a Numbered List HTML and What is <ol> Tag in HTML?

HTML <ol> element stands for Ordered List and is the element that we use to create an ordered list in an HTML document.

When we say ordered list, that means each item on that list has a number or alphabetic character attached to it and with that, we can see the rank of that item on the list.

By default, when creating a list using the <ol> element, each item is declared with a number.

For example, if there are 3 items in the list, then the first item will take the value 1, the next item appears with the value 2, and the last one will have the value 3.

Also, to add items to such list, we use the <li> element which stands for “List Item”.

HTML <ol> Tag Syntax:

<ol>

<li> item one… </li>

<li> item two… </li>

<li> item X… </li>

</ol>

HTML <ol> Tag Values

The values we set for the <ol> element are basically the items of that list and we use <li> element for this, as you saw in the syntax section.

Example: HTML numbered lists

See the Pen HTML numbered lists by Omid Dehghan (@odehghan) on CodePen.

<ol> Styles in HTML

Using CSS, we can change the style of an <ol> element as well.

For example, instead of number, we can set alphabetical characters to be used instead. This is done with the help of CSS list-style-type property.

Example: ol style

See the Pen ol style by Omid Dehghan (@odehghan) on CodePen.

Example: ordered list alphabetical

See the Pen ordered list alphabetical by Omid Dehghan (@odehghan) on CodePen.

HTML <ol> Tag Attributes

Name	Description
reversed	This attribute specifies that the order of the list items should be reversed.
start	This attribute specifies the number (or value) of an ordered list.
type	This attribute specifies the kind of marker to use in the list.