Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 8

Building Lists in HTML

Recommended resources

In our last lesson, you learned how to enrich your web pages with images, making them more visually engaging and informative. Just as images help break up large blocks of text, lists provide another essential tool for organizing content, making it easier for users to scan and understand.

This lesson will teach you how to create the two most common types of lists in HTML: ordered lists, which are numbered, and unordered lists, which use bullet points. Mastering lists is crucial for a wide range of tasks, from presenting step-by-step instructions to building the navigation menus that guide users through your entire website.

Unordered and Ordered Lists: The Basics

At a high level, HTML gives us two main ways to create lists.

  • Unordered lists are for items where the sequence does not matter, like a grocery list or a list of features.
  • Ordered lists are for items where the sequence is important, like a recipe or a ranked list.

Both types of lists share a common structure: a container tag that defines the list type, and item tags for each entry in the list.

Let's watch a short video that introduces both list types and shows how to write the basic code for each.

HTML Tutorial for Beginners - 03 - Ordered and Unordered lists

This tutorial from EJ Media provides a very clear, step-by-step introduction to creating ordered and unordered lists in HTML.

First, watch the brief introduction from the start. Then, see how to create an unordered list from this section. Finally, watch the part covering ordered lists from this segment. Pay attention to the three key tags introduced: <ul>, <ol>, and <li>.

As you saw, the structure is straightforward:

  1. Unordered List: You use the <ul> tag (for unordered list) to wrap the entire list.
  2. Ordered List: You use the <ol> tag (for ordered list) to wrap the entire list.
  3. List Item: For both types of lists, each individual item is wrapped in an <li> tag (for list item).

The <li> tag is always placed inside either a <ul> or an <ol> tag.

Here is a static view that puts it all together, showing the HTML code on the left and how the browser renders it on the right. This can be a helpful reference.

This image shows the code for an ordered list (`<ol>`), an unordered list (`<ul>`), and a definition list (`<dl>`) alongside the final rendered output in a browser. Notice how the `<li>` tag is used for items in both ordered and unordered lists.

Diving Deeper into List Tags

Now that you have the basic structure, let's explore it with a comprehensive article that also introduces some useful customization options.

HTML List – How to Use Bullet Points, Ordered, and Unordered Lists

This article from freeCodeCamp reinforces the core concepts with clear code examples.

First, read the section How to Make an Unordered List for a recap of the <ul> tag. Then, review How to Make an Ordered List to solidify your understanding of the <ol> tag.

Customizing Ordered Lists

By default, an ordered list uses numbers (1, 2, 3...). However, HTML provides attributes to change this behavior.

The type attribute allows you to change the marker style. You can set it to:

  • "A" for uppercase letters (A, B, C...)
  • "a" for lowercase letters (a, b, c...)
  • "I" for uppercase Roman numerals (I, II, III...)
  • "i" for lowercase Roman numerals (i, ii, iii...)

Additionally, the start attribute lets you begin the list from a number other than 1. For example, start="5" would begin the list with "5.".

Let's see how these work in the same freeCodeCamp article.

HTML List – How to Use Bullet Points, Ordered, and Unordered Lists

This part of the article demonstrates the attributes used to customize ordered lists.

Read the section on Types of Ordered Lists to see the type attribute in action. Afterward, look at The Start Attribute to learn how to change the starting number.

While unordered lists also have a type attribute (disc, circle, square), it is considered outdated. The modern way to change bullet styles is with CSS, which we will cover in a future module.

Nested Lists

What if you need a list within a list? This is called a nested list, and it's a common way to create outlines or sub-categories. To do this, you simply place a new <ul> or <ol> element inside an <li> element.

For example, you could have a shopping list where "Toppings" is an item, and nested within it is another list for "pepperoni," "mushrooms," and "peppers."

This quick video demonstrates the concept perfectly.

Learn HTML lists in 4 minutes 📋

This clip from the Bro Code channel shows how to create a sub-list within an existing list item.

Watch the demonstration from nested list. Notice how the new <ul> tag is placed inside the <li> for "toppings" to create the sub-list.

Nested lists are fundamental for website navigation menus, where you often have main menu items with dropdown sub-menus.

Practice Time

Now it's your turn to apply what you've learned. Open your index.html file or create a new one and add the following:

  1. An Ordered List: Create a list of step-by-step instructions for a simple task, like making a cup of tea or your morning routine.

    • Use the <ol> tag.
    • Include at least three steps, each in an <li> tag.
    • Bonus: Try changing the type to "a" and use the start attribute to begin the list from the third letter, "c".

  2. An Unordered List: Create a list of your favorite books, movies, or subjects in school.

    • Use the <ul> tag.
    • Include at least three items, each in an <li> tag.

  3. A Nested List: Add a new item to your unordered list. Inside that <li> element, create a new unordered list with at least two sub-items.

Experiment with the code, save your file, and open it in your browser to see the results. This hands-on practice is the best way to make these concepts stick.

Conclusion

You have now added another essential structuring tool to your HTML toolkit. You can effectively organize related information, making your content more scannable and professional.

Key Takeaways:

  • Use <ul> for unordered (bulleted) lists where sequence doesn't matter.
  • Use <ol> for ordered (numbered) lists where sequence is important.
  • Use <li> to define each item within either type of list.
  • Ordered lists can be customized with the type and start attributes.
  • You can create nested lists by placing a <ul> or <ol> inside an <li> tag.

In the next lesson, we will move on to one of the most important topics for creating interactive websites: forms. You'll learn how to create simple forms with text inputs, labels, and submit buttons, allowing you to start collecting information from your users.