An unordered list is a collection of items where the order of items does not matter. By default, the item of an unordered list is marked with a bullet point (•).
The unordered list items are created using <ul> and <li> elements. The <li> elements are used to create list items, and <ul> element is used to create unordered list items.
The syntax for an unordered list is:
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>HTML Unordered List Example
Here is a basic example to create an unordered list.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Unordered Lists</title>
</head>
<body>
<h2>HTML Unordered Lists</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
</body>
</html>
Output
HTML Unordered List Styles
| Attribute Value | Descriptions |
|---|---|
| disc | Default. It creates disc bullet points. |
| circle | It creates circular bullet points. |
| square | It creates square bullet points. |
| none | It removes the bullet points. |
Example 1: Create a bullet point with a circle list marker.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Unordered Lists</title>
</head>
<body>
<h2>HTML Unordered Lists (Circle List Marker)</h2>
<ul style="list-style-type: circle;">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
</body>
</html>
Output
Example 2: Create a bullet point with a square list marker.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Unordered Lists</title>
</head>
<body>
<h2>HTML Unordered Lists (Square List Marker)</h2>
<ul style="list-style-type: square;">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
</body>
</html>
Output
Example 3: Create an unordered list without bullet points.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Unordered Lists</title>
</head>
<body>
<h2>HTML Unordered Lists (Without Bullet Points)</h2>
<ul style="list-style-type: none;">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
</body>
</html>
Output
Example 4: Creating a nested unordered list.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Unordered Lists</title>
</head>
<body>
<h2>HTML Unordered Lists (Nested)</h2>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
</li>
<li>Sweets</li>
<li>Vegitables</li>
</ul>
</body>
</html>
Output
Example 5: Creating a horizontal unordered list with CSS (Navigation Bar).
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Horizontal Unordered Lists</title>
<style>
ul {
padding: 0;
margin: 0;
list-style-type: none;
background-color: #2b80ff;
overflow: hidden;
}
li {
float: left;
}
li a {
text-decoration: none;
color: white;
display: block;
padding: 5px 15px;
}
li a:hover {
background-color: #95befc;
}
</style>
</head>
<body>
<h2>HTML Horizontal Unordered Lists</h2>
<ul>
<li><a href="#">Apple</a></li>
<li><a href="#">Mango</a></li>
<li><a href="#">Orange</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Grapes</a></li>
</ul>
</body>
</html>
Output
