The HTML unordered lists are used to build lists without any specific ordering. When you do not want any ordering in your list, just the pointers, you can use these unordered lists. They provide different formats that can be chosen based on your preference.
Lists are a very important part of HTML in webpages, which are used to arrange data in an organized format. Here, let us know more about HTML unordered lists in detail, along with their syntax, uses, and benefits.
The HTML Unordered Lists
The unordered list in HTML is a way of organising a group of items related in an unordered format using bullet points. It helps organise information in a clear and concise format, making content more user-friendly, structured, and readable.
The unordered lists can be defined using the <ul> element. Each list item is enclosed within the <li> tag. By default, lists are marked with small black circles i,e. Bullets.
- The HTML unordered list groups together a set of related items in a list, which does not need to be in a specific sequence or order.
- The list is marked with dark bullet pointers, which can be customised using the custom CSS.
- The unordered lists begin with the <ul> and end with the </ul> tag.
- All the related list items begin with the <li> tag and end with the </li> tag.
The HTML Unordered List Syntax
The syntax of HTML unordered lists is very simple to implement and understand. You can start the unordered list with a simple <ul> element, and when completed, you have to close it using the </ul> element.
| <ul>
<li> list item 1</li> <li> list item 2</li> <li> list item 3</li> <li> list item 4</li> </ul> |
- <ul> tag: The <ul> tag here defines the HTML unordered lists by telling the browser that this part of the list contains a list with no specific ordering.
- <li> tag: This tag contains each list item inside, which is related to each other.
Read More: HTML List & Ordered, Unordered, And Definition Lists With Examples
Example of HTML Unordered Lists
Let us clear our concept of HTML unordered lists using a simple example given below.
In this example, I am arranging all my favorite online programs on PW Skills using simple HTML unordered lists.
| <!DOCTYPE html>
<html> <head> <title>PW Skills Online Programs</title> </head> <body> <h2>My Favorite Online Programs on PW Skills</h2> <ul> <li>Data Science</li> <li>Full Stack Web Development</li> <li>Digital Marketing</li> <li>AI & Machine Learning</li> <li>Cloud Computing</li> </ul> </body> </html> |
Output
 |
Here, in this HTML document, you can see the unordered list containing favorite online programs arranged with simple pointers.
Different Style Types In HTML Unordered Lists
You can change the appearance of your unordered HTML lists with different styling using CSS. Let us check some of the major styling types used with unordered lists.
1. Circle Bullet Style
| <ul style= “list-style-type: circle;”> |
This CSS styling makes your unordered list markers circles. You can implement this styling using the list-style-type property in CSS. Let us understand it using the same example we took above.
| <!DOCTYPE html>
<html> <head> <title>PW Skills Online Programs</title> </head> <body> <h2>My Favorite Online Programs on PW Skills</h2> <ul style= “list-style-type: circle;”> <li>Data Science</li> <li>Full Stack Web Development</li> <li>Digital Marketing</li> <li>AI & Machine Learning</li> <li>Cloud Computing</li> </ul> </body> </html> |
Output
|
2. Square Bullet Style
| <ul style= “list-style-type: square;”> |
This type of styling in an unordered list changes the default circle appearance to a square. Let us take the same example and display it using the square bullets.
| <!DOCTYPE html>
<html> <head> <title>PW Skills Online Programs</title> </head> <body> <h2>My Favorite Online Programs on PW Skills</h2> <ul style=”list-style-type: square”> <li>Data Science</li> <li>Full Stack Web Development</li> <li>Digital Marketing</li> <li>AI & Machine Learning</li> <li>Cloud Computing</li> </ul> </body> </html> |
Output
 |
3. Without Bullets
You can also make unordered lists without any bullet pointers, just simply arranging items in a group. All you need is a “none” attribute in the list style type.
| <!DOCTYPE html>
<html> <head> <title>PW Skills Online Programs</title> </head> <body> <h2>My Favorite Online Programs on PW Skills</h2> <ul style=”list-style-type: none”> <li>Data Science</li> <li>Full Stack Web Development</li> <li>Digital Marketing</li> <li>AI & Machine Learning</li> <li>Cloud Computing</li> </ul> </body> </html> |
Output
 |
4. Horizontal Bullet List
You can also arrange the HTML unordered list in horizontal order. The default listing direction is usually vertical. This is generally used in a navigational menu on websites. Let us understand using a simple example.
| <!DOCTYPE html>
<html> <head> <title>HTML Horizontal Unordered List</title> <style> body { text-align: center; } ul { overflow: hidden; background-color: orange; list-style-type: none; } li { float: left; } li a { text-decoration: none; color: white; padding: 0.5rem; } </style> </head> <body> <h3>HTML Horizontal Unordered List</h3> <ul> <li><a href=”#course”> PW Skills Course</a></li> <li><a href=”#Blog”>Blogs</a></li> <li> <a href=”#Content”>Content</a> </li> </ul> </body> </html> |
Output
 |
Nesting Of HTML Unordered Lists
An unordered list can be nested using the simple <ul> tag and <li> tags. All you have to do is put an <ul> tag inside a <li> tag till the depth you need. This practice is useful when you want to represent a hierarchical structure or information in a group.
| <!DOCTYPE html>
<html> <head> <title>PW Skills Online Programs</title> </head> <body> <h2>PW Skills Online Programs</h2> <ul> <li>Data Science <ul> <li>Python for Data Science</li> <li>Machine Learning</li> <li>Data Visualization</li> </ul> </li> <li>Full Stack Web Development <ul> <li>Frontend (HTML, CSS, JavaScript)</li> <li>Backend (Node.js, Express)</li> <li>Database (MongoDB)</li> </ul> </li> <li>Digital Marketing <ul> <li>SEO</li> <li>Social Media Marketing</li> <li>Email Marketing</li> </ul> </li> </ul> </body> </html> |
Output
 |
HTML Unordered Lists Vs Ordered Lists
The unordered list and the ordered list are two types of lists that share some major differences.
| HTML Unordered Lists | HTML Ordered Lists |
| The HTML unordered lists display items without any specific ordering. | The HTML ordered lists display items with a specific ordering or sequence. |
| It displays items inside using bullets. | It displays items with numbers, letters, or Roman numbers. |
| You can define the unordered list using the <ul> tag. | You can define the ordered lists in HTML using <ol> tags. |
| There are no major specific types of HTML unordered lists, but you can style them. | It consists of types like Numbers, letters, Roman numbers in uppercase or lowercase formats. |
| It is used to list items where sequences are not that important. | It is used to list items where sequences are important. |
For example,
|
For example,
|
Uses of Unordered Lists In HTML
Let us check some of the major applications of HTML unordered lists below.
- Unordered lists, as the name specifies, are used where the sequence of items doesn’t matter.
- They are commonly used for creating navigation bars, menus, and more.
- They can organise a group of related information together to make it more structured and user-friendly.
- They can also be used to create sublists under the main topics.
- They can be used in sidebars and places that need a little more highlight and structuring.
Learn Full Stack Web Development With PW Skills
Become a master in web development with the PW Skills Full Stack Web Development Course, consisting of the latest industry-oriented curriculum and tutorials on advanced concepts and tools for web development.
What’s More In There For You?
- Get guidance from industry experts and professionals
- Build your job ready portfolio with advanced skills and tools
- Prepare for interviews with guidance and interview preparation from dedicated mentors
- Get complete live SME Doubt Support sessions
- Get weekend live sessions for better flexibility and learning
- Get certification of completion from PW Skills
HTML Unordered Lists FAQs
Q1. What is an HTML unordered List?
Ans: The unordered list in HTML is a way of organising a group of items related in an unordered format using bullet points. It helps organise information in a clear and concise format.
Q2. How to define HTML unordered lists?
Ans: You can define unordered lists in HTML using simple <ul elements. It begins with <ul and ends with </ul tags.
Q3. What is the UL tag in HTML?
Ans: The ul tag in HTML is used for listing related items in a structured manner without any specific order. You can define the ul tag using the <ul element in HTML.
Q4. Why is ul used?
Ans: The ul tag in HTML is used for listing relevant items without any specific order. They are generally marked with bullets.
