04. Lists

Introduction

This lesson covers how to create ordered and unordered lists in HTML.

Learning Outcome

By the end of this lesson, you should be able to:

  • Create an ordered list.
  • Create an unordered list.

Lists

There are two types of lists you can make with HTML.

The first type is called an ordered list and it looks like this:

  1. Item one
  2. Item two
  3. Item three

The second type is called an unordered list and it looks like this:

  • Item one
  • Item two
  • Item three

As you can see, the only difference is that an ordered list shows numbers while an unordered list shows bullets.

Here is an example of the unordered list above, with HTML:

<ul> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ul>
Code language: HTML, XML (xml)

Let’s break this down. The entire list is wrapped in ul tags, which tells the browser to interpret it as a bulleted list.

Each individual list item is indicated by the li tag.

What happens if we replace the ul tag with an ol tag?

See the Pen ol List Example by Sadness (@sadness97) on CodePen.

Now we have an ordered or numbered list!

You can create ‘lists’ just as well with <br> tags, like this!

See the Pen BR List by Sadness (@sadness97) on CodePen.

But this isn’t considered an “HTML List” – it’s more of a shortcut.

Exercises

  • Open a CodePen and try making a couple different lists. No need to memorize the tags, so if you get stuck feel free to peek at the lesson again.


Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.