HTML Unordered Lists
Last Updated :
15 Mar, 2024
HTML Unordered List displays the elements in a bulleted format, which can be defined as an unordered list item using the <ul> tag. It contains the list items <li> element. The <ul> tag requires an opening and closing tag.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
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. |
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>
<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>
<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>
<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>
<body>
<h2>Welcome To GeekforGeeks</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>
<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>
<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
Share your thoughts in the comments
Please Login to comment...