HTML Lists

Lists are used all the time on web pages as a helpful way to organize information. In this tutorial, we’ll learn how to add lists to our web pages using HTML and practice making different kinds of lists.

Unordered Lists

Unordered lists are formatted using bullets and look like this:

• Item
• Item
• Item
• Item

The ul Tag
The <ul> tag defines the entire unordered list.

<ul>
    List content goes here
</ul>

The li Tag
The <li> tag defines each individual list item inside a list.

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Milk</li>
    <li>Bread</li>
</ul>

Explore!

Take a look at this example of how to use an unordered list. Play around and change the items in the list. Try to add or delete an item. Click on RUN after each change to see its effect. Can you form a new second list?

You Try!

Use the unordered list tag <ul> to create a webpage listing at least 5 bucket list tasks that you’d like to complete one day.

Be careful of these common errors:

• Don’t forget to include closing tags.
• Don’t close the <ul> tag too soon! This closing tag should be at the very end of your list. All <li> tags should be placed inside the <ul> tags.

Ordered Lists

Ordered lists are formatted using bullets and look like this:

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

The ol Tag
The <ol> tag defines the entire ordered list.

<ol>
    List content goes here
</ol>

The li Tag
The <li> tag is still used to define each individual list item inside the list.

<ol>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Milk</li>
    <li>Bread</li>
</ol>

You Try!

Use the ordered list tag <ol> to create a webpage that lists your top five favorite movies.

Nested Lists

If one list is not enough, you can create a list within a list! This is called a nested list. Here is an example:

• Apples
• Cookies
• Chocolate Chip
1. White Chocolate Chip
2. Dark Chocolate Chip
• Peanut butter
• Milk

There are no new tags needed to create a nested list. Using nested tags can get messy however. You’ll want to keep track of your opening and closing tags by indenting with each nested list. This is how the list above was formated using HTML:

<ul>
    <li>Apples</li>
    <li>Cookies</li>
    <li>Chocolate Chip</li>
    <ol>
        <li>White Chocolate Chip</li>
        <li>Dark Chocolate Chip</li>
    </ol>
    <li>Peanut butter</li>
    <li>Milk</li>
</ul>

You Try!

Create a nested to-do list for the week. The days of the week should be listed as an unordered list and the items to be completed on each day should be written as an ordered list. Here is a sample of what this might look like:

• Monday
1. Clean room
2. Do homework
• Tuesday
1. Practice piano
2. Study for test

Now that you know how to create and format lists using HTML, take it one step further and learn how to format tables!