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:
- An unordered shopping list of your favorite foods
- An ordered list of todo’s you need to get done today
- An unordered list of places you’d like to visit someday
- An ordered list of your all time top 5 favorite video games or movies
Knowledge check
The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
Additional resources
This section contains helpful links to related content. It isn’t required, so consider it supplemental.