Nested lists

Intro

It’s possible to create lists with multiple levels in HTML. These are called nested lists.

Steps

Add ol

First, copy and paste the ordered list below it. For this example, we’ll add the nested list to the first list item. Put your cursor right before the closing </li> tag and press Enter. VS Code should add a blank line in between the tags.

<ol>
  <li>Star Wars

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

Type ol on the blank line and press Tab.

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

Add li

Press Enter in between the ol tags to create a blank line. Then type li and press Tab.

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

In this example, I’m ordering the Star Wars movies in the order that I prefer. So I’ll type Empire Strikes Back for the first item.

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

If you check the preview, you should see a new list item appear that’s slightly indented starting with the number 1.

Add more li

Next, add two more <li> elements and type A New Hope for the middle item and Return of the Jedi for the last item.

<ol>
  <li>Star Wars
    <ol>
      <li>Empire Strikes Back</li>
      <li>A New Hope</li>
      <li>Return of the Jedi</li>
    </ol>
  </li>
  <li>Lord of the Rings</li>
  <li>Indiana Jones</li>
</ol>

If you check the preview, you should now see three items in the indented list.

Unordered list example

You can also create nested lists using unordered lists. You can repeat the process above for the unordered list we created before. This time, I added the nested list to the second list item. In this example, I’m listing different types of bread I want to buy.

<ul>
  <li>Milk</li>
  <li>Bread
    <ul>
      <li>Sliced bread</li>
      <li>English muffins</li>
    </ul>
  </li>
  <li>Eggs</li>
</ul>

If you check the preview, you should see an indented list with two items with outline bullet points rather than solid black bullet points.

Final code

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

<ol>
  <li>Star Wars
    <ol>
      <li>Empire Strikes Back</li>
      <li>A New Hope</li>
      <li>Return of the Jedi</li>
    </ol>
  </li>
  <li>Lord of the Rings</li>
  <li>Indiana Jones</li>
</ol>

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<ul>
  <li>Milk</li>
  <li>Bread
    <ul>
      <li>Sliced bread</li>
      <li>English muffins</li>
    </ul>
  </li>
  <li>Eggs</li>
</ul>