One of the most popular elements in HTML is lists- ordered and unordered.

The main difference between the two is that ordered lists use numbers while unordered lists use bullet points.

We'll start with ordered lists. Create a new <div> , and inside it, add a tag called <ol>. This tag stands for "ordered lists". Before you continue, close both tags then, between the opening and closing <ol> tags, add your items with the tag <li> (stands for "list"). At the end of each item, make sure to include a closing </li> tag.

So, it should appear as below::

<div>
  <ol>
    <li>My first point</li>
    <li>My second point</li>
    <li>My third point</li>
  </ol>
</div>

The output will be an ordered list.

Remember, when you use <ol> tag, it'll display a numbered list, regardless of the content you put against each list. For example, if you put the second item as "My third point", the output will be:

1. My third point

You can also have nested tags inside your <li> tag. For example, you are able to link the content of your list to another website

<div>
  <ol>
    <li>My first point, with <a href="http//yahoo.com">reference materials</a></li>
    <li>My second point</li>
    <li>My third point</li>
  </ol>
</div>

So, anytime you want to have an ordered list of items, use the tag <ol>, and list each element within a nested <li> tag.