HTML Lists: Ordered and Unordered Lists Explained with Examples

HTML Lists: Ordered and Unordered Lists Explained with Examples

5 mins read1.1L Views Comment
clickHere
Esha
Esha Gupta
Associate Senior Executive
Updated on Jan 23, 2024 10:54 IST

Do you know what HTML Lists are? If not, don't worry because, in this blog, we will be learning about HTML Lists, their types and more. Let's begin!

2022_04_HTML-Lists-1.jpg

A list refers to any information displayed in a logical or linear form. It is a series of items written together in a meaningful group or sequence and marked by bullet points, numbers, etc. In HTML, there are three list types, each with a specific purpose and tag. In this guide, we will lean what is list in HTML. We will understand different HTML list tags and how to create HTML lists.

Must Check: How to Create Table in HTML

Table of Content

What is an HTML List?

List in HTML helps to display a list of information semantically.

There are three types of lists in HTML

  • Unordered list or Bulleted list (ul)
  • Ordered list or Numbered list (ol)
  • Description list or Definition list (dl)

Explore Popular HTML Courses

HTML Unordered List or Bulleted List

In HTML unordered list, the list items have no specific order or sequence. An unordered list is also called a Bulleted list, as the items are marked with bullets. It begins with the <ul> tag and and closes with a </ul> tag. The list items begin with the <li> tag and end with </li> tag.

Syntax

<ul>List of Items</ul>

Example of HTML Unordered List


 
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</body>
</html>
Copy code

Output

2022_04_HTML-Unordered-List.jpg

Ordered List or Numbered List (ol)

In HTML, all the list items in an ordered list are marked with numbers by default instead of bullets. An HTML ordered list starts with the <ol> tag and ends with the </ol> tag. The list items start with the <li> tag and end with </li> tag.

Syntax

<ol>List of Items</ol>

Example of HTML Ordered List


 
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ol>
</body>
</html>
Copy code

Output

2022_04_HTML-Ordered-List.jpg

Different Types of Ordered Lists in HTML

Instead of numbers, you can mark your list items with the alphabet: A, B, C or a,b,c, or roman numerals: i, ii, iii, etc. You can do this by using the <ol> tag type attribute. Let’s explore how to order lists with alphabets and roman numbers.

To mark the list items with letters A, B, C, etc., you must specify A as the type attribute’s value in the <ol> tag.

 

Here is an example to show the use of Upper case letters to list the items.


 
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol type="A">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
</html>
Copy code

Output

2022_04_Ordered-Uppercase.jpg

Here is an example to show the use of Lower case letters to list the items.


 
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol type="a">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
</html>
Copy code

Output

2022_04_Ordered-Lowercase.jpg

Here is an example to show the use of Roman numerals to list the items.


 
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol type="i">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
</html>
Copy code

Output

2022_04_Ordered-Roman.jpg

HTML Description List or Definition List

In an HTML Description list or Definition List, the list items are listed like a dictionary or encyclopedia. Each item in the description list has a description. You can use a description list to display items like a glossary. You will need the following HTML tags to create a description list:

  • <dl> (Definition list) tag – Start tag of the definition list
  • <dt> (Definition Term) tag – It specifies a term (name)
  • <dd> tag (Definition Description) – Specifies the term definition
  • </dl> tag (Definition list) – Closing tag of the definition list

Example of HTML Description List


 
<!DOCTYPE html>
<html>
<head>
<title>HTML Description List</title>
</head>
<body>
<dl>
<dt><b>Apple</b></dt>
<dd>A red colored fruit</dd>
<dt><b>Honda</b></dt>
<dd>A brand of a car</dd>
<dt><b>Spinach</b></dt>
<dd>A green leafy vegetable</dd>
</dl>
</body>
</html>
Copy code

Output

2022_04_Description-List.jpg
HTML Underline Tag – Understand u Tag with Examples
HTML Underline Tag – Understand u Tag with Examples
This blog explains the u tag to underline text in HTML. You will also understand when to use the underline tag.
Learn How to Write HTML Comments
Learn How to Write HTML Comments
Have you ever wondered how developers leave notes or disable parts of HTML code without affecting the webpage? This is done using HTML comments. Let us understand more! Learn what...read more
HTML Heading and Paragraph Tags Explained With Examples
HTML Heading and Paragraph Tags Explained With Examples
This tutorial explains how to create headings and paragraphs in HTML documents using heading and paragraph tags.

HTML Nested Lists

An HTML Nested list refers to a list within another list. We can create a nested ordered list, a nested unordered list, or a nested ordered list inside an unordered list.

Let us explore some examples of HTML lists within lists:

Example of an HTML Nested Ordered List


 
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Ordered List</title>
</head>
<body>
<ol>
<li>Banana</li>
<li> Apple
<ol>
<li>Green Apple</li>
<li>Red Apple</li>
</ol>
</li>
<li>Pineapple</li>
<li>Orange</li>
</ol>
</body>
</html>
Copy code

Output

2022_04_Nested-Ordered-List.jpg

Example of an HTML Nested Unordered List


 
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Unordered List</title>
</head>
<body>
<ul>
<li>Fruits</li>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Orange</li>
</ul>
<li>Vegetables</li>
<ul>
<li>Spinach</li>
<li>Cauliflower</li>
<li>Beetroot</li>
</ul>
<li>Cereals</li>
<li>Nuts</li>
</ul>
</body>
</html>
Copy code

Output

2022_04_Nested-Unordered-List.jpg

Check out- Top 62 HTML Interview Questions and Answers for 2023

Explore the world of HTML/CSS with online courses from leading colleges. Enroll now to advance your career in web development.

Conclusion

We hope this tutorial gave you an understanding of What is List in HTML and how to add them to your web pages. To learn more about adding Forms in HTML, check our HTML Forms article.

Top Trending Tech Articles
Career Opportunities after BTech | Online Python Compiler | What is Coding | Queue Data Structure | Top Programming Language | Trending DevOps Tools | Highest Paid IT Jobs | Most In Demand IT Skills | Networking Interview Questions Features of Java | Basic Linux Commands | Amazon Interview Questions

 

FAQs

What is the use of HTML lists?

HTML lists help users display a list of data or information on a web page. The items in a list are related pieces of information. An HTML list shows these related items in an easy-to-read manner. In HTML, a list may contain one or more list items.

How to create a simple list in HTML?

You can create a simple list in HTML with bullet points by using the HTML unordered list element . The unordered list will start with the tag and end with the tag. Each item within the unordered list will have a start tag and a closing tag .

How to create an HTML list with items numbered 1, 2, 3, 4...?

You can create an ordered list in HTML to list items marked with numbers by default. An ordered list begins with the tag and closes with the tag. Each list item has a starting tag and closing tag.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer with a focus on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself ... Read Full Bio

Comments