| 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. |
Examples of HTML Unordered Lists
Below are some examples showing the use of HTML Unordered lists.
Example 1: Implementation of value list type HTML unordered lists.
HTML
<!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:
HTML Unordered Lists Example Output
Example 2: Implementation of list style type to disc in unordered lists.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Disc type unordered list
</title>
</head>
<body>
<h2>Disc type unordered list </h2>
<ul style="list-style-type:disc;">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Output:
Disc type unordered list Example Output
Example 3: Implementation of list style type to square in unordered lists.
HTML
<!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:
Square type unordered list Example Output
Example 4: Implementation of list style type to a circle.
HTML
<!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:
Circle type unordered list Example Output
Example 5: Implementation of list style to none in unordered lists.
HTML
<!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:
None type unordered list Example Output
Nested Unordered List
An Unordered List can be nested, i.e., the list can be defined inside of another list.
Example: Implementation of nested list and use the type attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Nested unordered list</title>
</head>
<body>
<h2>Nested unordered list</h2>
<ul>
<li>Geeks</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:
Nested Unordered List Example 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.
HTML
<!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:
Horizontal Unordered List Example Output
Conclusion
The <ul> tag in HTML is a versatile tool for creating unordered lists, with various styling options to suit different needs. Whether you’re using default bullets, circles, squares, or no markers at all, you can create clear and organized lists to enhance your web content. Nested and horizontal lists add further flexibility, making <ul> an essential element in web design.
HTML Unordered Lists – FAQs
What is an HTML unordered list?
An HTML unordered list is a list of items that are displayed with bullet points, with no particular order.
How to create an unordered list in HTML?
Use the <ul> tag with nested <li> (list item) tags to create an unordered list.
What does the <ul> tag represent?
The <ul> tag represents an unordered list, which typically displays items with bullet points.
What is the default bullet style for an unordered list?
The default bullet style for an unordered list is a disc (filled circle).
How to change the bullet style of an unordered list?
Use the list-style-type CSS property to change the bullet style (e.g., circle, square, none). Example: ul { list-style-type: square; }
How to nest unordered lists in HTML?
Place a <ul> tag inside an <li> tag of another <ul> to create a nested unordered list.
Can you mix unordered and ordered lists?
Yes, you can nest an ordered list (<ol>) within an unordered list (<ul>) and vice versa.
.gif){kind=small}
