HTML Lists: Ordered and Unordered Lists Explained with Examples

HTML Lists: Ordered and Unordered Lists Explained with Examples

4 mins read1.1L Views 1 Comment
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.

Thus, 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.

Concept of HTML Colors
Concept of HTML Colors
HTML Colors play a pivotal role in creating the visual identity of a webpage, influencing its aesthetics, readability, user experience, and even its brand messaging. HTML colors are a way...read more

Mastering Button Tag in HTML
Mastering Button Tag in HTML
Have you ever wondered how interactive buttons on websites are created? They're often made using the HTML tag, which allows developers to add clickable elements for various actions like...read more

Learning font Tag in HTML
Learning font Tag in HTML
Have you ever wondered how web pages were styled before the widespread adoption of CSS? The tag in HTML was a key tool for this purpose. Used primarily in...read more

Learning body Tag in HTML
Learning body Tag in HTML
Do you know that the tag in HTML is where all the magic of a webpage happens? It's the container that holds everything you see on a web page, including...read more

Learning div Tag in HTML
Learning div Tag in HTML
Have you ever wondered what keeps web pages organized and styled consistently? The HTML tag plays a crucial role in this. It's a versatile, block-level element used primarily as...read more

Understanding SVG Tag in HTML
Understanding SVG Tag in HTML
Do you know the secret to crisp and scalable web graphics? It lies in the SVG tag in HTML! This powerful tool allows for the creation of vector-based graphics, ensuring...read more

All About marquee Tag in HTML
All About marquee Tag in HTML
Have you ever wondered how early websites created moving text or images? The tag in HTML was once a popular choice for this, allowing text and images to scroll across...read more

Learning ul Tag in HTML
Learning ul Tag in HTML
Have you ever wondered how to organize items on a webpage without any specific order neatly? The HTML tag is the solution, designed to create unordered lists with bullet...read more

Span Tag in HTML
Span Tag in HTML
Have you ever wondered how web developers style or manipulate specific parts of a webpage's text without affecting the whole document? This is where the tag in HTML comes into...read more

How to Link CSS to HTML
How to Link CSS to HTML
Have you ever wondered how to make your website visually appealing and well-structured? Linking CSS to HTML is the key to achieving this. Let’s understand more! Learning how to Link...read more

All About br Tag in HTML
All About br Tag in HTML
Have you ever wondered how to create a simple line break in your HTML content? The tag is your solution. It's a self-closing element used to insert line breaks,...read more

Understanding ol Tag in HTML
Understanding ol Tag in HTML
Have you ever wondered how to present steps or rank items on a webpage clearly? The tag in HTML is your solution. It creates an ordered list where each...read more

A Guide to Semantic Tags in HTML
A Guide to Semantic Tags in HTML
Have you ever heard about semantic tags in HTML? These tags give meaning to your web content, making it more accessible and understandable both to users and search engines. They...read more

Difference Between div and span Tag in HTML
Difference Between div and span Tag in HTML
Have you ever wondered about the difference between and in HTML? While is a block-level element creating a new line and used for structuring larger sections, ...read more

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 focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio

Comments

(1)

print to list with different version of windows os and android . one list should be an ordered list, the others. list. should. be. an unordered. list

Reply to Mrithul krishnan