HTML5 Lists Practice Questions with Solutions

Lists are one of the most frequently used elements in HTML5. They help organize information into a structured format, making webpages easier to read and navigate. HTML5 Lists practice questions with solutions help to understand the concepts.

HTML5 provides three main types of lists:

Ordered Lists (<ol>) – Items are displayed in a numbered sequence.
Unordered Lists (<ul>) – Items are displayed with bullet points.
Description Lists (<dl>) – Used for terms and their descriptions.

Lists are commonly used in:

Navigation menus
Product features
Course outlines
FAQs
Recipe ingredients
Step-by-step instructions
Website sidebars

Why Learn HTML Lists?

HTML lists help you:

Organize information clearly.
Improve webpage readability.
Build navigation menus.
Display instructions in order.
Present grouped information professionally.
Create SEO-friendly structured content.

Basic Syntax

Ordered List

<ol>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ol>

Unordered List

<ul>

    <li>Apple</li>

    <li>Banana</li>

    <li>Mango</li>

</ul>

Description List

<dl>

    <dt>HTML</dt>

    <dd>HyperText Markup Language</dd>

</dl>

1. Create an Ordered List

Problem Statement

Create an ordered list displaying the following programming languages:

HTML
CSS
JavaScript
Python

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Ordered List</title>

</head>

<body>

    <h1>Programming Languages</h1>

    <ol>

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

        <li>Python</li>

    </ol>

</body>

</html>

Expected Output

Programming Languages

1. HTML

2. CSS

3. JavaScript

4. Python

Explanation

The <ol> element creates a numbered list.

Each list item is placed inside an <li> element.

Concepts Covered

Ordered List
<ol>
<li>

2. Create an Unordered List

Problem Statement

Create an unordered list displaying four fruits.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Unordered List</title>

</head>

<body>

    <h1>Fruits</h1>

    <ul>

        <li>Apple</li>

        <li>Banana</li>

        <li>Mango</li>

        <li>Orange</li>

    </ul>

</body>

</html>

Expected Output

Fruits

• Apple

• Banana

• Mango

• Orange

Explanation

The <ul> element creates a bullet list.

Browsers display bullets by default.

Concepts Covered

Unordered List
Bullet List
<ul>

3. Display Student Subjects Using a List

Problem Statement

Create an unordered list displaying the following subjects:

Mathematics
Science
English
Computer

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Student Subjects</title>

</head>

<body>

    <h1>Subjects</h1>

    <ul>

        <li>Mathematics</li>

        <li>Science</li>

        <li>English</li>

        <li>Computer</li>

    </ul>

</body>

</html>

Expected Output

Subjects

• Mathematics

• Science

• English

• Computer

Explanation

Lists are commonly used for displaying:

Subjects
Features
Categories
Menu Items

Concepts Covered

HTML Lists
<ul>
<li>

4. Create a Numbered To-Do List

Problem Statement

Create an ordered list showing the following daily tasks:

Wake Up
Exercise
Study HTML
Complete Homework
Sleep

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>To-Do List</title>

</head>

<body>

    <h1>Daily Tasks</h1>

    <ol>

        <li>Wake Up</li>

        <li>Exercise</li>

        <li>Study HTML</li>

        <li>Complete Homework</li>

        <li>Sleep</li>

    </ol>

</body>

</html>

Expected Output

Daily Tasks

1. Wake Up

2. Exercise

3. Study HTML

4. Complete Homework

5. Sleep

Explanation

Ordered lists are ideal when the sequence of items matters.

Examples include:

Daily routines
Cooking recipes
Installation steps
Tutorials

Concepts Covered

Ordered Lists
Sequential Information
HTML Lists

5. Create a Shopping List

Problem Statement

Create an unordered list displaying shopping items.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Shopping List</title>

</head>

<body>

    <h1>Shopping List</h1>

    <ul>

        <li>Milk</li>

        <li>Bread</li>

        <li>Rice</li>

        <li>Vegetables</li>

        <li>Eggs</li>

    </ul>

</body>

</html>

Expected Output

Shopping List

• Milk

• Bread

• Rice

• Vegetables

• Eggs

Explanation

Since the order of shopping items is not important, an unordered list is the better choice.

Concepts Covered

Unordered Lists
Bullet Lists
HTML Structure

6. Create a Description List

Problem Statement

Create a description list explaining three web technologies.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Description List</title>

</head>

<body>

    <h1>Web Technologies</h1>

    <dl>

        <dt>HTML</dt>

        <dd>Creates the structure of webpages.</dd>

        <dt>CSS</dt>

        <dd>Designs and styles webpages.</dd>

        <dt>JavaScript</dt>

        <dd>Adds interactivity to webpages.</dd>

    </dl>

</body>

</html>

Expected Output

Web Technologies

HTML

Creates the structure of webpages.

CSS

Designs and styles webpages.

JavaScript

Adds interactivity to webpages.

Explanation

A description list contains:

<dl> → Description List
<dt> → Description Term
<dd> → Description Definition

Concepts Covered

Description List
<dl>
<dt>
<dd>

7. Display Definitions Using `<dt>` and `<dd>`

Problem Statement

Create a glossary using description list elements.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Glossary</title>

</head>

<body>

    <h1>Computer Terms</h1>

    <dl>

        <dt>CPU</dt>

        <dd>Central Processing Unit</dd>

        <dt>RAM</dt>

        <dd>Random Access Memory</dd>

        <dt>SSD</dt>

        <dd>Solid State Drive</dd>

    </dl>

</body>

</html>

Expected Output

Computer Terms

CPU

Central Processing Unit

RAM

Random Access Memory

SSD

Solid State Drive

Explanation

Description lists are commonly used for:

Dictionaries
Glossaries
FAQs
Technical documentation
Definitions

Concepts Covered

Glossary
Description Lists
HTML5 Lists

8. Create a Website Navigation Menu Using Lists

Problem Statement

Create a navigation menu using an unordered list.

Menu Items:

Home
About
Courses
Contact

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Navigation Menu</title>

</head>

<body>

    <h1>Website Menu</h1>

    <ul>

        <li><a href="index.html">Home</a></li>

        <li><a href="about.html">About</a></li>

        <li><a href="courses.html">Courses</a></li>

        <li><a href="contact.html">Contact</a></li>

    </ul>

</body>

</html>

Expected Output

Website Menu

• Home

• About

• Courses

• Contact

Each menu item is clickable.

Explanation

Most professional websites build navigation menus using unordered lists because they are easy to style later with CSS.

Concepts Covered

HTML Navigation
Lists with Links
Website Menus

9. Create a Nested Unordered List

Problem Statement

Create an unordered list of programming languages with their frameworks displayed as a nested list.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Nested Unordered List</title>

</head>

<body>

    <h1>Programming Languages</h1>

    <ul>

        <li>HTML</li>

        <li>CSS</li>

        <li>

            JavaScript

            <ul>

                <li>React</li>

                <li>Angular</li>

                <li>Vue</li>

            </ul>

        </li>

    </ul>

</body>

</html>

Expected Output

• HTML

• CSS

• JavaScript

    ○ React

    ○ Angular

    ○ Vue

Explanation

A nested list is simply a list placed inside another list item.

Nested lists are commonly used for:

Categories
Menus
Product hierarchies
Course modules

Concepts Covered

Nested Lists
Parent List
Child List

10. Create a Nested Ordered List

Problem Statement

Create a numbered list of chapters, where each chapter contains subtopics.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Nested Ordered List</title>

</head>

<body>

    <h1>HTML Course</h1>

    <ol>

        <li>

            Introduction

            <ol>

                <li>History</li>

                <li>Features</li>

            </ol>

        </li>

        <li>

            HTML Basics

            <ol>

                <li>Tags</li>

                <li>Attributes</li>

            </ol>

        </li>

    </ol>

</body>

</html>

Expected Output

1. Introduction

    1. History

    2. Features

2. HTML Basics

    1. Tags

    2. Attributes

Explanation

Nested ordered lists help organize information into multiple levels.

They are useful for:

Books
Tutorials
Course outlines
Documentation

Concepts Covered

Nested Ordered Lists
Course Structure
HTML Lists

11. Change Ordered List Numbering Using the `type` Attribute

Problem Statement

Create four ordered lists using different numbering styles.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Ordered List Types</title>

</head>

<body>

    <h2>Numbers</h2>

    <ol type="1">

        <li>HTML</li>

        <li>CSS</li>

    </ol>

    <h2>Uppercase Letters</h2>

    <ol type="A">

        <li>HTML</li>

        <li>CSS</li>

    </ol>

    <h2>Lowercase Letters</h2>

    <ol type="a">

        <li>HTML</li>

        <li>CSS</li>

    </ol>

    <h2>Roman Numbers</h2>

    <ol type="I">

        <li>HTML</li>

        <li>CSS</li>

    </ol>

</body>

</html>

Expected Output

1. HTML

2. CSS

A. HTML

B. CSS

a. HTML

b. CSS

I. HTML

II. CSS

Explanation

The type attribute changes the numbering style.

Available values:

Value	Output
`1`	1,2,3
`A`	A,B,C
`a`	a,b,c
`I`	I,II,III
`i`	i,ii,iii

Concepts Covered

Ordered List Types
Numbering Styles

12. Start Numbering from a Specific Value

Problem Statement

Create an ordered list that starts numbering from 5.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Start Attribute</title>

</head>

<body>

    <ol start="5">

        <li>Chapter Five</li>

        <li>Chapter Six</li>

        <li>Chapter Seven</li>

    </ol>

</body>

</html>

Expected Output

5. Chapter Five

6. Chapter Six

7. Chapter Seven

Explanation

The start attribute changes the starting number of an ordered list.

This is useful for:

Multi-page books
Reports
Tutorials
Continued numbering

Concepts Covered

start Attribute
Ordered Lists

13. Reverse an Ordered List

Problem Statement

Create a countdown list using the reversed attribute.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Reverse List</title>

</head>

<body>

    <ol reversed>

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

    </ol>

</body>

</html>

Expected Output

3. HTML

2. CSS

1. JavaScript

Explanation

The reversed attribute automatically counts backward.

It is useful for:

Rankings
Countdowns
Priority lists

Concepts Covered

reversed
Reverse Numbering
Ordered Lists

14. Build a Course Outline Using Nested Lists

Problem Statement

Create a course outline for an HTML5 course using nested ordered lists.

The structure should be:

Chapter 1
- Introduction
- HTML Structure
Chapter 2
- Headings
- Paragraphs
Chapter 3
- Links
- Images

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Course Outline</title>

</head>

<body>

    <h1>HTML5 Course Outline</h1>

    <ol>

        <li>

            Chapter 1

            <ol>

                <li>Introduction</li>

                <li>HTML Structure</li>

            </ol>

        </li>

        <li>

            Chapter 2

            <ol>

                <li>Headings</li>

                <li>Paragraphs</li>

            </ol>

        </li>

        <li>

            Chapter 3

            <ol>

                <li>Links</li>

                <li>Images</li>

            </ol>

        </li>

    </ol>

</body>

</html>

Expected Output

1. Chapter 1

    1. Introduction

    2. HTML Structure

2. Chapter 2

    1. Headings

    2. Paragraphs

3. Chapter 3

    1. Links

    2. Images

Explanation

Nested ordered lists are perfect for creating structured educational content such as:

Course outlines
Books
Documentation
Training manuals

Concepts Covered

Nested Ordered Lists
Course Structure
Educational Content

15. Create a Website Sidebar Menu Using HTML Lists

Problem Statement

Create a sidebar menu using an unordered list.

Menu items:

Dashboard
Courses
Assignments
Students
Settings
Logout

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Sidebar Menu</title>

</head>

<body>

    <h1>Student Portal</h1>

    <ul>

        <li><a href="#">Dashboard</a></li>

        <li><a href="#">Courses</a></li>

        <li><a href="#">Assignments</a></li>

        <li><a href="#">Students</a></li>

        <li><a href="#">Settings</a></li>

        <li><a href="#">Logout</a></li>

    </ul>

</body>

</html>

Expected Output

Student Portal

• Dashboard

• Courses

• Assignments

• Students

• Settings

• Logout

Each item appears as a clickable menu option.

Explanation

Most sidebar menus in admin dashboards are built using unordered lists.

Later, CSS is used to convert these simple lists into professional navigation panels.

Examples include:

WordPress Dashboard
Moodle
Student Portals
Admin Panels
E-commerce Dashboards

Concepts Covered

Sidebar Navigation
HTML Lists
Navigation Menu
HTML Links

Chapter Summary

In this chapter, you learned how to organize content using the three types of HTML5 lists:

Ordered Lists (<ol>)
Unordered Lists (<ul>)
Description Lists (<dl>)

Lists are one of the most commonly used HTML elements because they help present information in a clean, structured, and easy-to-read format.

You practiced creating:

Numbered lists
Bullet lists
Description lists
Nested lists
Shopping lists
To-do lists
Navigation menus
Course outlines
Sidebar menus
Different numbering styles
Reverse ordered lists
Custom starting numbers

These concepts are widely used in blogs, business websites, admin dashboards, e-commerce websites, documentation, and educational platforms.

Key Takeaways

<ol> creates numbered lists.
<ul> creates bullet lists.
<li> represents a list item.
<dl> creates a description list.
<dt> defines the term.
<dd> defines the description.
Nested lists help organize hierarchical information.
The type attribute changes ordered list numbering styles.
The start attribute changes the starting number.
The reversed attribute displays items in reverse order.
Lists are commonly used for navigation menus and structured content.

Frequently Asked Questions (FAQs)

1. What is the difference between `<ol>` and `<ul>`?

Ordered List (<ol>)

Displays items in a numbered sequence.

<ol>

    <li>HTML</li>

    <li>CSS</li>

</ol>

Unordered List (<ul>)

Displays items with bullet points.

&lt;ul>

    &lt;li>HTML&lt;/li>

    &lt;li>CSS&lt;/li>

&lt;/ul>

2. What is the purpose of the `<li>` tag?

The <li> tag defines a list item.

It is used inside both:

<ol>
<ul>

Example:

&lt;ul>

    &lt;li>Apple&lt;/li>

&lt;/ul>

3. When should we use a Description List?

Description lists are useful for:

Glossaries
Dictionaries
FAQs
Definitions
Technical documentation

Example:

<dl>

    <dt>HTML</dt>

    <dd>HyperText Markup Language</dd>

</dl>

4. Can lists be nested?

Yes.

Lists can contain another list inside a list item.

Example:

<ul>

    <li>

        Programming

        <ul>

            <li>HTML</li>

            <li>CSS</li>

        </ul>

    </li>

</ul>

Nested lists are commonly used for categories and menus.

5. What does the `type` attribute do?

The type attribute changes the numbering style of an ordered list.

Example:

&lt;ol type="A">

    &lt;li>Item&lt;/li>

&lt;/ol>

Available values:

6. What is the purpose of the `start` attribute?

The start attribute changes the starting number.

Example:

<ol start="5">

    <li>Chapter Five</li>

</ol>

Output:

5. Chapter Five

7. What does the `reversed` attribute do?

It displays the ordered list in reverse order.

Example:

<ol reversed>

    <li>HTML</li>

    <li>CSS</li>

</ol>

Output:

2. HTML

1. CSS

8. Why are HTML lists important?

Lists improve:

Readability
Content organization
Website navigation
User experience
Accessibility

Professional websites use lists for:

Navigation menus
Sidebars
Product features
Tutorials
Documentation
FAQs

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar

Why Learn HTML Lists?

Basic Syntax

Ordered List

Unordered List

Description List

1. Create an Ordered List

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

2. Create an Unordered List

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

3. Display Student Subjects Using a List

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

4. Create a Numbered To-Do List

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

5. Create a Shopping List

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

6. Create a Description List

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

7. Display Definitions Using <dt> and <dd>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

8. Create a Website Navigation Menu Using Lists

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

9. Create a Nested Unordered List

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

10. Create a Nested Ordered List

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

11. Change Ordered List Numbering Using the type Attribute

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

12. Start Numbering from a Specific Value

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

13. Reverse an Ordered List

Problem Statement

HTML Solution

7. Display Definitions Using `<dt>` and `<dd>`

11. Change Ordered List Numbering Using the `type` Attribute

1. What is the difference between `<ol>` and `<ul>`?

2. What is the purpose of the `<li>` tag?

5. What does the `type` attribute do?

6. What is the purpose of the `start` attribute?

7. What does the `reversed` attribute do?