HTML Ordered Lists Tutorial

  • Post author:
  • Post category:HTML

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:

<ol>

<li> item </li>

<li> item </li>

</ol>

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.

Leave a Reply