Ordered lists

Intro

Let’s learn how to create lists in HTML. There are 2 types of lists in HTML: ordered lists and unordered lists.

Lists are interesting because each type of list actually requires 2 elements to actually work. First, let’s go over ordered lists.

Steps

ol element

To start, put your cursor in between the body tags. To create the ordered list, type ol and then press Tab.

<ol></ol>

Then press Enter to create a new line.

<ol>

</ol>

li element

Next, type li and press Tab.

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

This is where you’ll actually write the first item in the list. You don’t write any text directly in the <ol> element. All of your text goes in between the <li> tags.

Ordered lists are rendered in the browser as a list with numbers on the side, and if you check the preview, you’ll see the number 1 appear.

For now, just write the word Item in between the <li> tags.

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

If you check the preview now, you’ll see the word Item appear after the number 1.

Add more li elements

To add another item, first create a blank line after the <li> element. Then create another <li> element and write Item again.

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

Remember, all of your list items need to be written inside the <ol> tags. You can’t have any <li> tags outside of the <ol> tags.

Do this one more time so you have 3 items.

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

If you check the preview, you should see the numbers 1 through 3 with the word Item after each number.

Explanation

Ordered lists are used when you have a list of items where order is important. This could be a list of instructions, like in a recipe, or a list of your favorite movies or sports teams.

For this example, I’ll change the list into a list of my favorite movie franchises. You can fill in your own favorite movies if you want.

<ol>
  <li>Star Wars</li>
  <li>Lord of the Rings</li>
  <li>Indiana Jones</li>
</ol>

If you check the preview, you can see a list of my favorite movie franchises, in order.

End

So that’s how you use ordered lists in HTML.

Final code

Check the last code snippet for the code that should be in between the body tags.