Unordered lists

Intro

Let’s go over how to use unordered lists.

Steps

ul element

First, put your cursor at the end of the closing </ol> tag on line 14, and then press Enter.

To create an unordered, list, type ul and then press Tab.

<ul></ul>

Then press Enter to create a new line.

<ul>

</ul>

li element

Next, type li and press Tab.

<ul>
  <li></li>
</ul>

This is where you’ll actually write the first item in the list, just like with the ordered list.

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

<ul>
  <li>Item</li>
</ul>

Unordered lists are rendered in the browser with bullet points, so if you check the preview, you’ll see the first item appear with a bullet point.

Add more li elements

To add another item, go to the end of the line and press Enter. Then create another <li> element.

<ul>
  <li>Item</li>
  <li>Item</li>
</ul>

Remember, all of your list items need to be written inside the <ul> tags.

Next I’ll create another <li> element and write list item again. I’ll do this one more time so I have 3 items.

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

If you check the preview, you should see three bullet points with the word Item next to them.

Example

Unordered lists are meant to show a list of items when order isn’t important. An example could be a grocery list.

Let’s go back and change the list items to be the items in a grocery list. Let’s write Milk, Bread, and Eggs.

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

Check the preview to make sure the list text has been updated.

Technically, I could’ve written these items in any order, so I could make it Eggs, Milk and Bread, and the list still makes sense. It’s still a grocery list.

This wouldn’t be true if the list were a list of instructions in a recipe, however. Generally speaking, I couldn’t change the order of the instructions in a recipe, so I would use an ordered list in that example.

End

So, that’s how you use unordered lists.

Final code

If you’ve followed all of the steps so far, this is the code that should be in between the body tags.