HTML - Unordered Lists
Ads by
Build Free Contact
Stop
Forms
seeing this ad
Unlimited Submissions
Why this ad?
Build customizable forms with free support.
Beginner-friendly. Unlimited submissions.
Ninja Forms
Learn More
HTML Unordered List is used to display a collection of related items that do not have a specific order or
sequence. We can make unordered in HTML using <li> element nested with <ul> element.
The below image shows an unordered list of groceries:
Anzeige
Tummy Tuck Surgery in Turkey: Expert
Care at Low Prices
Unordered HTML List - Choose List Item Marker
The type attribute for <ul> tag is used to specify the type of bullet to the unordered list in HTML. By default,
disc bullet type is used. But, we can change this with the help of following options.
Attribute Value Description
disc It is the default type of marker.
square List items will be displayed with a square marker.
circle It will set the marker to a hollow circle.
Examples of Unordered List
Below examples will illustrate the HTML Unordered list, where and how we should use this property of
HTML.
Create a Unordered List
The following example demonstrates how to create an unordered list in HTML. The below example
displays an unordered list with default disc bullets.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Beetroot
Ginger
Potato
Radish
Nested Unordered List
In the following example we will create nested unordered list by defining list inside the list.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Unordered List</title>
</head>
<body>
<ul>
<li>Tutorialspoint</li>
<li> Web Development
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Javascript</li>
</ul>
</body>
</html>
Tutorialspoint
Web Development
HTML
CSS
Javascript
Changing Marker type of Unordered List
The following example illustrates different types of unordered list in HTML.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<p>
An unordered list with hollow circle marker:
</p>
<ul type="circle">
<li>Rice</li>
<li>Pulses</li>
<li>Flour</li>
<li>Beans</li>
</ul>
<p>
An unordered list with square marker:
</p>
<ul type="square">
<li>Nuts</li>
<li>Oats</li>
<li>Eggs</li>
<li>Dates</li>
</ul>
<p>
An unordered list with default disc marker:
</p>
<ul type="disc">
<li>Apple</li>
<li>Guava</li>
<li>Carrot</li>
<li>Orange</li>
</ul>
</body>
</html>
Rice
Pulses
Flour
Beans
An unordered list with square marker:
Nuts
Oats
Eggs
Dates
An unordered list with default disc marker:
Apple
Guava
Carrot
Orange
Unordered List without Bullets
By setting style="list-style-type: none" attribute for ul tag, you can create unordered list without bullet
markers. Following code demonstrates this process.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul style="list-style-type: none">
<li>Abdul</li>
<li>Jason</li>
<li>Yadav</li>
</ul>
</body>
</html>
Abdul
Jason
Yadav
Horizontal Unordered List
Here in this example we will create an unordered list and make that list horizontal using CSS properties.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Horizontal Unordered List</title>
<style>
ul {
overflow: hidden;
background-color: gray;
list-style-type: none;
}
li {
float: left;
text-decoration: none;
color: white;
padding: 0.5rem;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ul>
</body>
</html>
HTML CSS JavaScript Bootstrap
Styling Unordered Lists
Styling an unordered list (HTML <ul>) using CSS allows for customization of the list's appearance, including
modifying bullet points, spacing, and overall design. Below is the example program.
Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled Unordered List</title>
<style>
ul {
list-style-type: square;
/* Custom bullet type */
padding: 0;
/* Removes default padding */
}
li {
margin-bottom: 8px;
/* Adds spacing between list items */
background-color: #f0f0f0;
/* Background color */
border: 1px solid #ccc;
/* Border */
padding: 8px;
/* Padding inside each list item */
transition: background-color 0.3s;
/* Smooth transition effect */
}
li:hover {
background-color: #e0e0e0;
/* Change background on hover */
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Item 1
Item 2
Item 3
