Lesson 9

Lists

Why use lists?

One of my secret skills is shooting a BB gun in a straight line. When I shoot the bullets in a straight line, it’s easier to see where they go than if they went all over the place.

Bullet lists also help make things easier to see. Instead of having a long paragraph of information, you can put it into a list. Lists organize information in a visual way so users can understand it faster.

What kinds of lists are there?

There are two kinds of lists, ordered lists and unordered lists. An ordered list is one with numbers. This is best if you want to make a list of steps for how to do something or if you’re ranking how important something is.

An unordered list is one where the order doesn’t matter, so it uses bullet points instead of numbers. This is better for something like a shopping list, where the order can change.

It’s easy to switch a list from one to the other.

  • This
  • is
  •  an
  • ordered
  • list

 

  1. This
  2. is
  3. an
  4. unordered
  5. list

How do you make a list?

To make a list, you start with <ol> or <ul>. This tells the computer you’re starting a list. The next element you place is the <li> tag for list item. <li> is used for both kinds of lists. Each line includes the full <li> element, with the opening and closing tags. Once you reach the end of your list, put the closing <ol> or <ul> tag.

<ol>
     <li> </li>
     <li> </li>
     <li> </li>
</ol>

Are you ready to learn?

Make an ordered list of your top 3 favorite magical creatures

Make an unordered list of your favorite desserts

The ordered list will look blue and the unordered list will look green.

Build with us!

HTML

CSS

JavaScript

Output