List Basics: Ordered and Unordered Lists

The Two Main Types of Lists

In HTML, there are two primary types of lists you'll use constantly:

• Unordered lists: For a collection of items where the order does not matter. These are typically displayed with bullet points.
• Ordered lists: For a sequence of items where the order is important. These are displayed with numbers.

Creating Unordered Lists for Items Without a Sequence

Let's start with an unordered list. Imagine you want to list the subjects offered on your educational website. The order you list them in doesn't really matter. This is a perfect use case for the <ul> tag, which stands for Unordered List.

Each item within the list is then created with an <li> tag, which stands for List Item.

The basic structure looks like this:

<ul>
  <li>Accounting</li>
  <li>Web Development</li>
  <li>Design Principles</li>
</ul>

This short video provides a very clear and quick demonstration of how to create an unordered list.

Now, let's add an unordered list to your index.html file. Below the content you added in the last lesson, add a new section for course topics:

<h2>Course Topics</h2>
<ul>
  <li>HTML Basics</li>
  <li>Styling with CSS</li>
  <li>Interactive JavaScript</li>
</ul>

Save your file and look at the result in your browser. You should see a new subheading with a clean, bulleted list below it.

Creating Ordered Lists for Sequential Steps

Next, let's tackle ordered lists. These are used when the sequence of items is crucial. For example, if you were listing the steps to complete a registration process, the order would be very important. For this, we use the <ol> tag, which stands for Ordered List.

Just like with unordered lists, each individual item is marked up with the <li> tag.

<ol>
  <li>Create an account</li>
  <li>Enroll in a course</li>
  <li>Start learning!</li>
</ol>

Let's continue with the video you started watching, which now explains ordered lists.

Let's add an ordered list to your project. Below the unordered list you just created, add a "Getting Started" guide:

<h2>How to Get Started</h2>
<ol>
  <li>Browse our courses</li>
  <li>Sign up for an account</li>
  <li>Check your email for confirmation</li>
</ol>

Save and refresh your browser. You'll now see a numbered list showing the clear sequence of steps.

Creating Structure with Nested Lists

What if you need a list within a list? For example, you might have a course outline where each module (in an ordered list) contains several topics (in an unordered list). HTML makes this easy by allowing you to "nest" lists inside one another.

To do this, you simply place a new <ul> or <ol> inside an <li> element.

The final part of the video you've been watching demonstrates this concept perfectly.

Let's apply this to your index.html file by updating the "Course Topics" list. We can make "Styling with CSS" have its own sub-list of topics.

Modify your existing unordered list to look like this:

<h2>Course Topics</h2>
<ul>
  <li>HTML Basics</li>
  <li>Styling with CSS
    <ul>
      <li>Colors and Fonts</li>
      <li>The Box Model</li>
      <li>Layouts with Flexbox</li>
    </ul>
  </li>
  <li>Interactive JavaScript</li>
</ul>

When you view this in the browser, you'll see a nicely indented sub-list under "Styling with CSS". This is a powerful way to organize complex information.

<ol>
  <li>Boil water</li>
  <li>Add tea bag
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Pour water into cup</li>
  <li>Let it steep for 3-5 minutes</li>
</ol>

Conclusion

Excellent work today! You now have another fundamental tool for structuring content. Knowing when to use an ordered list versus an unordered list is key to presenting information clearly and logically.

Key Takeaways:

• Use <ul> to create an unordered (bulleted) list for items where sequence doesn't matter.
• Use <ol> to create an ordered (numbered) list for items where sequence is important.
• Use <li> to define each individual item within any list.
• You can nest lists inside other lists to create sub-items and more complex hierarchies.

Preview of the Next Lesson:

So far, our page is all text. In the next lesson, we'll make it more visually engaging by learning how to add images to a webpage. You'll discover the <img> tag and the importance of providing alternative text for accessibility.