Ordered list and types

Ordered lists (tag <ol>) are used to display an array of items of the same type in a strict order. You meet these kinds of lists around you in your day-to-day life. We use them to write down a to-do list for a project plan, to list all members of our teams, or to create a must-watch list for our friends.

Syntax and use cases

To create an ordered list, use an opening <ol> and a corresponding closing </ol> tag:

<ol>
</ol>

Put a <li> tag inside them for every item in the list. The <li> occurs four times in this example:

<ol>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ol>

The <li></li> tags in here act as children of <ol></ol>. The <ol></ol> is always a parent for <li></li> and it can't be vice-versa.

For now, this code doesn't do anything, so let's switch to some practical examples. Imagine your friend asked you how to become a top-notch front-end developer. You may create a special list of things they should learn. Since they are newbies, it's good to start with something simple and then move on to some advanced staff. Look at the list below: first, we have HTML, then CSS, and finally JavaScript and JavaScript Framework. Every next skill is related to the previous one, so we need to accomplish it in order one by one, starting off with the first one. That is why it is called an ordered list. The order is really important!

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>JavaScript Framework</li>
</ol>

Here's what we can get when opening the index.html file in the browser:

Now, let's expand the CSS item a little. Let's add Flexbox, Grid, and Animation. These new skills make up a new ordered list, so we'll have nested lists. In this case, every new list should be wrapped in <li></li>, like here:

<ol>
   <li>HTML</li>
   <li>
       CSS
        <ol>
          <li>Flexbox</li>
          <li>Grid</li>
          <li>Animation</li>
        </ol>
   </li>
   <li>JavaScript</li>
   <li>JavaScript Framework</li>
</ol>

Here's the output. By the way, you may create unlimited nested lists and place other HTML elements inside items like images, links, etc.

Ordered lists <ol> and unordered lists <ul> are not the same. It is important to choose the correct type of list to increase site semantics and accessibility. Ordered lists should be used only for those lists where the order is significant. For example, the steps of the recipe have to be executed in strict order, so <ol> should be used. A different example is a shopping list. Commonly, it is not relevant in which order we buy items in a grocery store, so it is better to use <ul>.

Type attribute

Lists are fun to play with! Until now, we've seen only Arabic numerals before every item, but they can be easily changed into Roman numerals or even letters. Roman numerals and letters can come in both upper and lowercase. Here is what every type represents:

• type="1" (default) — Arabic numbers (1, 2, 3, 4, …);

• type="A" — uppercase letters (A, B, C, D, …);

• type="a" — lowercase letters (a, b, c, d, …);

• type="I" — uppercase Roman numbers (I, II, III, IV, …);

• type="i" — lowercase Roman numbers (i, ii, iii, iv, …).

Using these types can help us create more complex lists with several layers of nests. In the following example, we have a small part of the table of contents of a large book on a technical subject:

<ol type="I">
  <li>
    Foundations of Data Systems
    <ol type="1">
      <li>
        Reliable, Scalable, and Maintainable Applications
        <ol type="a">
          <li>Thinking About Data Systems</li>
          <li>Reliability</li>
        </ol>
      </li>
      <li>
        Data Models and Query Languages
        <ol type="a">
          <li>Relational Model Versus Document Model</li>
          <li>Query Languages for Data</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Yeah, it can be tricky to read this code, but take a look at the resulting page below. It is quite easy to follow:

You've probably noticed that we did all our CSS magic inside HTML. That's completely fine and can be used in any project but there's more to this if we turn to another tool that provides some additional functionality. We'll cover it in the next section.

List-style-type property

List-style-type property is the most common way to change the style of the listing. Why? Because we can include it in our CSS file, thus separating our HTML from styles, plus it offers more styling opportunities for our lists. It exposes us to a larger variety of languages, such as armenian, bengali, georgian, hebrew, and many more. Check out the whole list in the CSS Docs. Pretty cool, don't you think? Now we have more freedom to deal with languages with different numbering from the usual Arabic numerals.

Imagine that we need to create a site for Georgian people stuck in an avalanche disaster. Since Georgia is a mountainous country, people need to be very careful in such situations. We'll use Georgian numbering but leave the text in English so that it makes sense to us.

Here's what HTML and CSS would look like for this task:

<h2>If you become caught in an avalanche, try to:</h2>
    <ol>
      <li>Push machinery, equipment, or heavy objects away from you to avoid injury.</li>
      <li>Grab onto anything solid (trees, rocks, etc.) to avoid being swept away.</li>
      <li>Keep your mouth closed and your teeth clenched.</li>
      <li>If you start moving downward with the avalanche, stay on the surface using a swimming motion.</li>
      <li>Try to move yourself to the side of the avalanche.</li>
    </ol>

ol {
    list-style-type: georgian;
}

And the result would be the following:

Reversed and start attributes

There are two more attributes that come with the ordered lists. The first one is reversed. It is used to change the numeration from ascending (1, 2, 3, 4, 5) to descending (5, 4, 3, 2, 1) order. You probably won't use it very often, but anyway, it's good to know that there's such a thing. It might come in handy in some rare projects. For example, we can use it to show the results of some competition. Here is the list of the top 3 countries based on the number of immigrants created using the reversed attribute:

<ol reversed>
 <li>Saudi Arabia (13,5 mill)</li>
 <li>Germany (15,8 mill)</li>
 <li>USA (50,6 mill)</li>
</ol>

The list starts with the country that has fewer immigrants, so Saudi Arabia takes the third place, then comes Germany, and finally the winner, the USA:

The start attribute lets you choose what number or letter will come first in the list. It takes a number as a value, so, if you want your list to start with 5, you need to specify it like this: start="5". What if you use Roman numerals or an alphabet-based ordered list, like in Chinese, Georgian, or Armenian? In this case, we need to know the numeric position of the character. For instance, to target the Roman IV, we'll write start="4", for the "c" letter it'll be start="3". Check out all three examples for a better understanding:

 <!-- 1) Arabic numbers -->
    <h2>Arabic numbers example:</h2>
    <ol start="5">
      <li>Hellen</li>
      <li>Mike</li>
      <li>Jen</li>
    </ol>

    <!-- 1) Roman numbers -->
    <h2>Roman numbers example:</h2>
    <ol start="4" type="I">
      <li>Hellen</li>
      <li>Mike</li>
      <li>Jen</li>
    </ol>

    <!-- 1) Letters -->
    <h2>Letters example:</h2>
    <ol start="3" type="a">
      <li>Hellen</li>
      <li>Mike</li>
      <li>Jen</li>
    </ol>

Here's the output:

Conclusion

So, now you should know when to use ordered lists, how to create simple and nested lists, and how to make them more readable and stylish. Ordered lists make information more comprehensible and accessible for people and machines, which is why it's a good idea to get thoroughly acquainted with them and use them in your code.