Creating Lists in HTML

Unordered Lists: When Order Doesn't Matter

Let's start with the most common type of list: the unordered list. You use this when you have a set of items where the sequence is not important. Think of a list of ingredients for a pizza or key features of a product. The browser typically displays these items with bullet points.

To create an unordered list, you use two types of tags:

• <ul>: The "unordered list" tag. This acts as a wrapper for the entire list.
• <li>: The "list item" tag. Each item in the list gets its own <li> tag, placed inside the <ul> element.

Let's watch a quick video that demonstrates how to create one.

As you saw, the structure is <ul> wrapping one or more <li> elements.

<!-- Example of an Unordered List -->
<ul>
  <li>Pizza dough</li>
  <li>Tomato sauce</li>
  <li>Cheese</li>
</ul>

Ordered Lists: When Order is Key

What if the sequence of your items is important? For instructions, steps in a process, or a ranked list, you need an ordered list. Browsers will display these items with numbers by default.

The structure is very similar to an unordered list, but you use the <ol> tag instead:

• <ol>: The "ordered list" tag. This is the main container.
• <li>: The same "list item" tag is used for each item inside the <ol>.

Let's see this in action.

Here's the code for a basic ordered list:

<!-- Example of an Ordered List -->
<ol>
  <li>Eat breakfast</li>
  <li>Take a shower</li>
  <li>Leave for work</li>
</ol>

As the video mentioned, you can change the numbering style using the type attribute on the <ol> tag (e.g., <ol type="a"> for lowercase letters or <ol type="I"> for uppercase Roman numerals).

Reading: Reinforcing Your Knowledge

Videos are great for a quick overview, but reading documentation helps solidify the details. The MDN Web Docs are an essential resource for any web developer. Please read the following sections to get a more in-depth understanding of unordered and ordered lists.

Other List Types and Nesting

While ordered and unordered lists are the most common, HTML provides a third type: the description list. It's used for pairs of terms and their definitions, like in a glossary. It uses <dl> (description list), <dt> (description term), and <dd> (description definition).

A more powerful feature is nesting lists, where you place a list inside another list item. This is perfect for creating outlines or sub-items.

To nest a list, you simply start a new <ul> or <ol> inside an <li> element.

Let's watch one last quick clip to see how this works.

To understand the rule for nesting correctly, a quick read is in order.

Practice: Adding Lists to Your Page

It's time to apply what you've learned. Open your index.html file and add the following section to the <body>, right below the "My Goals" section you created in the last lesson.

Instructions:

1. Add a new <h2> with the text "My Learning Plan".
2. Below this heading, create an ordered list (<ol>) for the main learning phases.
3. The list items should be: "Master the Frontend" and "Conquer the Backend".
4. Inside the "Master the Frontend" list item, nest an unordered list (<ul>) with the following technologies to learn: "HTML", "CSS", and "JavaScript".

Here is the unstructured text to guide you:

My Learning Plan

Master the Frontend
HTML
CSS
JavaScript

Conquer the Backend

Once you've added the tags, save the file and check the result in your browser. It should look like a numbered list with a bulleted sub-list.

<h2>My Learning Plan</h2>
<ol>
  <li>
    Master the Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Conquer the Backend</li>
</ol>

Conclusion

Excellent work! You can now organize content into structured lists, a skill you'll use constantly as a web developer.

Here are the key takeaways from this lesson:

• Use <ul> for unordered lists where the sequence doesn't matter (bullet points).
• Use <ol> for ordered lists where the sequence is important (numbered items).
• Use <li> for each list item inside both <ul> and <ol>.
• Lists can be nested inside other list items to create hierarchical structures.

In our next lesson, we'll take a significant step forward by learning about semantic HTML. We'll explore tags like <header>, <footer>, <main>, and <nav>, which give even more meaning and structure to different sections of your webpage. You'll see how the <ul> you learned today is the standard way to build navigation menus inside a <nav> element.