Introduction

Whether it be IMDB’s top 250 movies or the FBI’s most-wanted, lists are everywhere on the web and you are going to need one eventually in your webpages.

Luckily, with HTML there are a couple of different types of lists at your disposal.

Learning Outcomes

  • How to create an unordered list
  • How to create an ordered list

Unordered Lists

If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order then you can use an unordered list.

Unordered lists are created using the <ul> element and each item within the list is created using the list item element <li>.

Each list item in an unordered list begins with a bullet point:

See the Pen html-unordred-list by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Ordered Lists

If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe or your top 10 favorite TV shows then you can use an ordered list.

Ordered lists are created using the <ol> element and each individual item within them, are again created using the list item element <li>. However, each list item in an ordered list begins with a number instead:

See the Pen html-ordered-list by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Assignment

To get some practice using lists, create a new HTML document and create the following lists:

  1. An unordered shopping list of your favorite foods
  2. An ordered list of todo’s you need to get done today
  3. An unordered list of places you’d like to visit someday
  4. An ordered list of your all time top 5 favorite video games or movies

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

Knowledge Check

  • What HTML tag is used to create an unordered list?
  • What HTML tag is used to create an ordered list?
  • What HTML tag is used to create list items within both unordered and ordered lists?
Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord