Let’s begin with Lecture 9 of the HTML5 & CSS3 series. Creating Lists in HTML – Unordered and Ordered. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Know how to create unordered lists (
<ul>) for bullet points - Know how to create ordered lists (
<ol>) for numbered lists - Be able to use
<li>tags to add list items - Understand when to use each type of list
- Create a fun webpage with your favorite things listed neatly!
📋 What Are Lists in HTML?
Lists help organize information so it’s easy to read.
Think of it like this:
If your webpage is like a school notebook, then lists are like your neat bullet points or numbered steps in homework.
There are two main types of lists in HTML:
- Unordered List (
<ul>) – for bullet points (no specific order) - Ordered List (
<ol>) – for numbered lists (order matters)
Each item inside a list is written using the <li> tag — short for list item.
🔘 Unordered List – <ul>
Example:
<ul>
<li>Pizza</li>
<li>Burgers</li>
<li>Fries</li>
</ul>🎯 Output:
- Pizza
- Burgers
- Fries
🔢 Ordered List – <ol>
Use <ol> When the order is important, like steps to make a sandwich or the top 5 games.
Example:
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Eat breakfast</li>
</ol>🎯 Output:
- Wake up
- Brush teeth
- Eat breakfast
🧠 When to Use Which?
| Type | Use For | Example |
|---|---|---|
<ul> | Items without a special order | Favorite movies, shopping list |
<ol> | Items in a specific order | Instructions, rankings |
💻 Try This: Make a “My Favorites” Page
Let’s create a new HTML file that shows off your favorite things using both types of lists.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
my-favorites.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>My Favorites</title>
</head>
<body>
<h1>My Favorite Things!</h1>
<h2>My Favorite Foods (unordered list)</h2>
<ul>
<li>Pizza</li>
<li>Ice Cream</li>
<li>Cookies</li>
<li>Chocolate Milk</li>
</ul>
<h2>Top 3 Video Games I Love (ordered list)</h2>
<ol>
<li>Minecraft</li>
<li>Roblox</li>
<li>Super Mario</li>
</ol>
<h2>My Hobbies</h2>
<ul>
<li>Playing Games</li>
<li>Reading Books</li>
<li>Drawing</li>
</ul>
<p><a href="index.html">Back to Home</a></p>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve created a neat page showing off your favorites using lists!
🧪 Try It Yourself!
- Add an ordered list of your top 5 favorite songs.
- Make an unordered list of your weekend plans.
- Style one of the list items with bold or italic text.
- Link one of the hobbies to a fun image or video about it.
🚀 Next Lecture Preview:
In Lecture 10, we’ll learn how to build tables in HTML using <table>, <tr>, <th>, and <td> — Perfect for organizing data like scores, schedules, or game stats!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
Making Clickable Links with Tag| Lecture 8
