HTML Ordered List Tutorial

In this tutorial, we will talk about the HTML ordered list and look deeper of how an ordered list can do and achieve.

How Ordered List Looks

Before we start that, let me show you how it looks at the web page. The ordered list is good for listing items with a specific order, the list will start from 1 to 2 to 3 to infinite numbers. If you would like to list the items out with a specific order, this is the list you are looking for.

Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday

Ordered List In HTML Code

To create an ordered list, you will start with <ol> element and creating the <li> element of each list inside of <ol>. This is how it looks at HTML code.

<ol>
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
    <li>Sunday</li>
</ol>

Break Down Explanation for Ordered List In HTML

From the code above, you can see the list item stored inside the <ol>. If you which to add more list item. Increase the number of <li> element.

<ol>: It defines an ordered list in HTML.

<li>: It defines a list item in HTML.

Useful Attribute

Reversed (from high to low 3, 2 1)

reversed: This attribute allowed you display the ordered list in reversed order. For example, from 3, 2 ,1.

<ol reversed>
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
    <li>Sunday</li>
</ol>

Start (start from specific number 5, 6, 7)

start: The default numbers start from 1, 2, 3. If you wish to display the ordered list items with a reversed number, use reversed attribute.

Want to start from 5? You can set start attribute to 5. for example start="5"

<ol start="5">
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
    <li>Sunday</li>
</ol>

Type (start from specific number 5, 6, 7)

type: By default, the ordered list use numbers from 1, 2, 3 to display the ordered list. You can also set the numbering type for your ordered list.

1 for numbers (default 1, 2, 3)
a for lowercase letters (a, b, c)
A for uppercase letters (A, B, C)
i for lowercase Roman numerals (i, ii, iii)
I for uppercase Roman numerals (I, II, III)

If you which to change it to letters from a, b, c. Set this attribute type="a" then you are all set.

<ol type="a">
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
    <li>Sunday</li>
</ol>

Thanks for readings, if you wish to learn more about the others type of HTML Lists, read my HTML Lists tutorial to get you start in real quick.