HTML Lists: Ordered and Unordered Lists Explained with Examples
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!
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.
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
Must Check: How to Create Table in HTML
Table of Content
- What is an HTML List?
- HTML Unordered List or Bulleted List
- Ordered List or Numbered List
- Different Types of Ordered Lists in HTML
- HTML Description List or Definition List
- HTML Nested Lists
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>
Output
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>
Output
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>
Output
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>
Output
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>
Output
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>
Output
Read Later
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>
Output
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>
Output
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.
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.
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
Top Picks & New Arrivals
Comments
(1)
M
7 months ago
Report Abuse
Reply to Mrithul krishnan