An HTML Unordered List is defined with the <ul> tag, where “ul” stands for “unordered list.” Each item within the list is marked by a <li> tag, standing for “list item.”
The items in an unordered list
are typically displayed with bullet points, which can be styled or changed
using CSS.
Syntax:
<ul>
<li>Item
1</li>
<li>Item
2</li>
</ul>
HTML
Unordered Lists Examples
Below are some examples showing
the use of HTML Unordered lists.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>
HTML Unordered Lists
</title>
</head>
<body>
<h2>HTML Unordered Lists</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Output:
Unordered
Lists Style Types
|
Values |
Descriptions |
|
disc |
This value sets the list marker to a bullet (default). |
|
circle |
This value sets the list marker to a circle. |
|
square |
This value sets the list marker to a square. |
|
none |
This value unmarks the list of items. |
Example 2: Implementation of list style type to square in
unordered lists.
<!DOCTYPE html>
<html>
<head>
<title>
Square type unordered list
</title>
</head>
<body>
<h2>Square type unordered list</h2>
<ul style="list-style-type: square">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Output:
Example 3: Implementation of list style type to
a circle.
<!DOCTYPE html>
<html>
<head>
<title>
Circle type unordered list
</title>
</head>
<body>
<h2> Circle type unordered list</h2>
<ul style="list-style-type:circle;">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Output:
Example 4: Implementation of list style type to none in
unordered lists.
<!DOCTYPE html>
<html>
<head>
<title>
None type unordered list
</title>
</head>
<body>
<h2>None type unordered list</h2>
<ul style="list-style-type:none;">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Output:
Nested Unordered List
An Unordered List can be
nested, i.e., the list can be defined inside of another list.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Nested unordered list</title>
</head>
<body>
<h2>Nested unordered list</h2>
<ul>
<li>Prodip</li>
<li>
Web Development
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Javascript</li>
</ul>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
Output:
Horizontal Unordered List
An Unordered list can also be
aligned in the Horizontal manner, which acts similar to the Nav bar.
Example: Implementation of Unordered List horizontally.
<!DOCTYPE html>
<html>
<head>
<title>HTML Horizontal Unordered List</title>
<style>
body {
text-align: center;
}
ul {
overflow: hidden;
background-color: #1d6b0d;
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">Course</a></li>
<li><a href="#Blog">Blogs</a></li>
<li>
<a href="#Content">Content</a>
</li>
</ul>
</body>
</html>
Output:
