HTML Lists: Ordered Lists

In this article we are going to explain and provide examples of ordered lists, which are achieved with the ol tag, in the HTML language.

We are in it and we continue studying the HTML lists, with which to create attractive structures to present the information. In the previous chapter we saw the and now we will study the ordered lists.

ordered lists

Ordered lists are also used to present information on various elements or items, with the particularity that they will be preceded by a number or a letter to enumerate them, always in order.

To make the ordered lists we will use the OL (ordered list) tags and their closure. Each element will also be indicated by the LI label, which we have already seen in unordered lists.

Let’s give an example:

Rules of behavior at work

1. The boss is always right
2. When in doubt apply rule 1

The result is:

In the same way as for unordered lists, ordered lists offer the possibility to modify the style. Specifically, it is possible to specify the type of numbering used by choosing between numbers (1, 2, 3…), letters (a, b, c…) and their capital letters (A, B, C,…) and Roman numerals in their uppercase (I, II, III,…) and lowercase (i, ii, iii,…) versions.

To make this selection we must use, as in the previous case, the type attribute, which will be placed inside the OL tag. The values ​​that the attribute can take in this case are:

Note: We remember that in some browsers the option to change the type of bullet to display does not work.

In some cases, we may want to start our enumeration with a number or letter that does not necessarily have to be the first of all. To solve this situation, we can use a second attribute, start, which will have a number as its value. This number, which is 1 by default, corresponds to the value from which we begin to define our list. In the case of letters or Roman numerals, the browser is responsible for translating the number into the corresponding letter.

We propose an example using this type of attributes:

Sort by numbers

1. Element 1
2. Element 2

Sort by letters

1. Element a
2. Element b

Order by Roman numerals starting with 10

10. Element x
11. xi element

The result:

There is not much more to add about ordered lists, so in the next article we will talk about another type of list, which is the .