HTML Ordered Lists Tutorial

In this section, we will learn how we can create an ordered list in HTML.

Ordered List in HTML

Ordered list are those types of lists that you see a number or an alpha character associated with each item in the list.

For example:

  1. Apple
  2. Microsoft
  3. Google

In HTML, we can create these types of lists using an element called <ol>. The <ol> element stands for Ordered List and by default, when creating a list using this element, each item will have a number as a marker associated with it.

How Can you Make a Numbered List HTML: HTML <ol> Element

This is how we use the <ol> element in HTML:


<li> item </li>

<li> item </li>


Note that each item of an ordered list is added using an HTML element called <li>. This element stands for List Item and the content that we use within the body of this element will be the actual item of the created list.

Example: Numbered List in HTML

See the Pen Numbered List in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML <ol> Element type Attribute

The <ol> element has an attribute called type by which we can set the type of marker we want to use for the items on a list.

By default, the markers are set to numbers (meaning the first item takes the number one, the second one takes the number two and so on…), but using the `type` attribute, we can change the marker and set it to other types, like alphabet characters or roman numbers, etc.

These are the type of values we can set for the `type` attribute:

<ol type="1|a|A|i|I">

1 Default. Decimal numbers (1, 2, 3, 4)

a Alphabetically ordered list, lowercase (a, b, c, d)

A Alphabetically ordered list, uppercase (A, B, C, D)

i Roman numbers, lowercase (i, ii, iii, iv)

I Roman numbers, uppercase (I, II, III, IV)

Example: ordered list alphabetical

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

Note: there’s a CSS property called `list-style-type` by which we can apply the same change to a list. Be aware that developers mainly use this CSS property to apply changes to the marker of a list.


Top Technologies