Complete Web Designing Course for Beginners

📋 Lesson 1.5 – Lists in HTML (Ordered, Unordered & Description Lists)

🗂️ Organizing Information Professionally Using HTML Lists

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand what lists are

✅ Create Ordered Lists

✅ Create Unordered Lists

✅ Create Description Lists

✅ Use nested lists

✅ Organize webpage content professionally

✅ Build menus and information sections using lists

📖 Introduction

Imagine a college website displaying departments like this:

Computer Science
Mechanical Engineering
Civil Engineering
Electrical Engineering
Electronics Engineering

It works, but it looks unorganized.

Now look at this:

• Computer Science

• Mechanical Engineering

• Civil Engineering

• Electrical Engineering

• Electronics Engineering

Much better.

Lists help organize information in a clean and professional manner.

Almost every website uses lists.

Examples:

Navigation Menus
Product Categories
Course Modules
Features
Instructions
Department Lists

🤔 What is a List?

A list is a collection of related items grouped together.

Examples:

Shopping List

Rice
Sugar
Milk
Tea

Student Subjects

Mathematics
Physics
Chemistry
English

Programming Languages

HTML
CSS
JavaScript

🌍 Types of Lists in HTML

HTML provides three types of lists:

1️⃣ Ordered List

Numbered List

2️⃣ Unordered List

Bullet List

3️⃣ Description List

Term and Description List

1️⃣ Ordered List (OL)

An Ordered List displays items in a numbered sequence.

HTML Tag:

<ol>

List Item Tag:

<li>

🎯 When to Use Ordered Lists

Use Ordered Lists when order matters.

Examples:

Step-by-step instructions
Ranking
Procedures
Algorithms

Example 1

<ol>

<li>Wake Up</li>

<li>Brush Teeth</li>

<li>Take Bath</li>

<li>Go to College</li>

</ol>

Output

1. Wake Up

2. Brush Teeth

3. Take Bath

4. Go to College

Example 2 – Web Development Learning Path

<ol>

<li>Learn HTML</li>

<li>Learn CSS</li>

<li>Learn JavaScript</li>

<li>Build Projects</li>

</ol>

Output

1. Learn HTML

2. Learn CSS

3. Learn JavaScript

4. Build Projects

🔹 List Item Tag

Every list item must be written using:

<li>

Example:

<li>HTML</li>

Without <li>, lists will not work correctly.

2️⃣ Unordered List (UL)

An Unordered List displays items using bullets.

HTML Tag:

<ul>

List Item Tag:

<li>

🎯 When to Use Unordered Lists

Use when order is not important.

Examples:

Subjects
Features
Services
Categories

Example

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>Python</li>

</ul>

Output

• HTML

• CSS

• JavaScript

• Python

Real Life Example

College Departments:

<ul>

<li>Computer Science</li>

<li>Mechanical Engineering</li>

<li>Civil Engineering</li>

<li>Electrical Engineering</li>

</ul>

Output

• Computer Science

• Mechanical Engineering

• Civil Engineering

• Electrical Engineering

🎯 Ordered List vs Unordered List

Ordered List	Unordered List
Uses Numbers	Uses Bullets
Order Matters	Order Doesn’t Matter
Uses `<ol>`	Uses `<ul>`
Example: Steps	Example: Categories

🏗️ Nested Lists

A list inside another list is called a Nested List.

Example

<ul>

<li>Programming Languages

    <ul>

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

    </ul>

</li>

</ul>

Output

• Programming Languages

• HTML

• CSS

• JavaScript

Real World Example

<ul>

<li>Engineering

<ul>

<li>Computer Science</li>

<li>Mechanical</li>

<li>Civil</li>

</ul>

</li>

</ul>

Output

• Engineering

• Computer Science

• Mechanical

• Civil

3️⃣ Description List

Description Lists are used to define terms and explanations.

HTML Tags:

<dl>

Description List

<dt>

Description Term

<dd>

Description Definition

Example

<dl>

<dt>HTML</dt>

<dd>Used to create webpage structure.</dd>

<dt>CSS</dt>

<dd>Used for styling webpages.</dd>

<dt>JavaScript</dt>

<dd>Used for webpage interactivity.</dd>

</dl>

Output

HTML

    Used to create webpage structure.

CSS

    Used for styling webpages.

JavaScript

    Used for webpage interactivity.

🎯 When to Use Description Lists

Best for:

Definitions
FAQs
Glossaries
Technical Documentation

Real World Example

<dl>

<dt>College</dt>

<dd>An institution providing higher education.</dd>

<dt>Student</dt>

<dd>A person enrolled in a course.</dd>

</dl>

💻 Complete Example Program

<!DOCTYPE html>

<html>

<head>

<title>HTML Lists</title>

</head>

<body>

<h1>My Skills</h1>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

<h1>Learning Steps</h1>

<ol>

<li>Learn HTML</li>

<li>Learn CSS</li>

<li>Learn JavaScript</li>

</ol>

<h1>Definitions</h1>

<dl>

<dt>HTML</dt>

<dd>Structure of webpage.</dd>

<dt>CSS</dt>

<dd>Design of webpage.</dd>

</dl>

</body>

</html>

🎯 Expected Output

Displays:

My Skills

• HTML

• CSS

• JavaScript

Learning Steps

Learn HTML
Learn CSS
Learn JavaScript

Definitions

HTML

Structure of webpage.

CSS

Design of webpage.

🌟 Real World Uses of Lists

Lists are used in:

Navigation Menus

Home

About

Services

Contact

Course Modules

Module 1

Module 2

Module 3

Product Categories

Electronics

Fashion

Books

Toys

Website Features

Responsive Design

Fast Loading

SEO Friendly

⚠️ Common Beginner Mistakes

Mistake 1

Using Text Without List Tags

Wrong:

HTML

CSS

JavaScript

Correct:

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

Mistake 2

Using <li> Outside Lists

Wrong:

<li>HTML</li>

Correct:

<ul>

<li>HTML</li>

</ul>

Mistake 3

Forgetting Closing Tags

Wrong:

<ul>

<li>HTML

</ul>

Correct:

<ul>

<li>HTML</li>

</ul>

🏆 Mini Project – Student Information

Create:

<!DOCTYPE html>

<html>

<head>

<title>Student Profile</title>

</head>

<body>

<h1>My Skills</h1>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

<h1>Daily Routine</h1>

<ol>

<li>Wake Up</li>

<li>Study</li>

<li>Attend Classes</li>

<li>Practice Coding</li>

</ol>

</body>

</html>

📝 Practical Activity

Create a webpage containing:

Favorite Subjects

Using Unordered List

Daily Routine

Using Ordered List

Definitions

HTML

CSS

JavaScript

Using Description List

Run it in Chrome.

📋 Assignment

Assignment 1.5

Answer the following:

What is a list?
How many types of lists are available in HTML?
What is an Ordered List?
What is an Unordered List?
What is a Description List?
What tag is used for list items?
Write HTML code for a list of your favorite subjects.

🧠 Quiz

Q1. Which tag creates an Ordered List?

A. <ul>

B. <ol>

C. <dl>

D. <li>

✅ Answer: B

Q2. Which tag creates an Unordered List?

A. <ul>

B. <ol>

C. <dt>

D. <dd>

✅ Answer: A

Q3. Which tag creates a list item?

A. <list>

B. <item>

C. <li>

D. <ol>

✅ Answer: C

Q4. Which tag is used for Description Lists?

A. <ol>

B. <ul>

C. <dl>

D. <li>

✅ Answer: C

Q5. Which list type uses numbering?

A. Unordered List

B. Description List

C. Ordered List

D. Nested List

✅ Answer: C

📌 Lesson Summary

✅ Lists help organize webpage content.

✅ HTML provides three types of lists.

✅ Ordered Lists use <ol>.

✅ Unordered Lists use <ul>.

✅ Description Lists use <dl>.

✅ List items are created using <li>.

✅ Nested lists allow creating subcategories.

✅ Lists are widely used in menus, categories, instructions, and website content.