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:
- Apple
- Microsoft
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.
