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.

Lesson Overview

This section contains a general overview of topics that you will learn in this lesson.

  • 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. Each individual item in them is 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

Knowledge Check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

Additional Resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord

Are you interested in accelerating your web development learning experience?

Get started
Thinkful Logo

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship