Lesson 3
Using Lists
Introduction to Using Lists

Welcome back! Now that you’ve mastered adding paragraphs and headings, it's time to learn about another key feature of HTML: lists. Lists are fundamental for organizing content in a structured and easy-to-read format. This lesson will show you how to use lists effectively on your webpage.

What You'll Learn

By the end of this lesson, you will be able to create both ordered and unordered lists to enrich your webpage's content structure. Let’s take a look at a simple HTML document that includes a list:

HTML, XML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>My First Webpage</title>
6</head>
7<body>
8    <h1>Welcome to My Webpage</h1>
9    <h2>Topics</h2>
10    <ul>
11        <li>HTML Basics</li>
12        <li>CSS Introduction</li>
13        <li>JavaScript Fundamentals</li>
14    </ul>
15</body>
16</html>

Let's break down the key components from the code:

  • <ul>: This tag defines an unordered list. Each item in the list is marked with a bullet point.
  • <li>: This tag defines a list item. It can be used inside both unordered (<ul>) and ordered (<ol>) lists.

In the example above, we use an unordered list (<ul>) to display various topics, however you can also use an ordered list (<ol>) to display items in a numbered format. Here's an example of an ordered list:

HTML, XML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>My First Webpage</title>
6</head>
7<body>
8    <h1>Welcome to My Webpage</h1>
9    <h2>Topics</h2>
10    <ol>
11        <li>HTML Basics</li>
12        <li>CSS Introduction</li>
13        <li>JavaScript Fundamentals</li>
14    </ol>
15</body>
16</html>

The only difference between the two examples is the use of <ol> instead of <ul>. The ordered list will display the items with numbers instead of bullet points.

Why It Matters

Lists are essential for organizing information in web design. Whether you're creating a navigation menu, presenting features, or outlining steps, lists make your content more readable and user-friendly.

By mastering lists, you can enhance the usability and appearance of your web pages. Exciting, right? Now, let’s get ready to move to the practice section to apply what you’ve learned.

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.