Unordered List in HTML | Bulleted List
An unordered list in HTML is a collection of items that do not have a specific order or sequence. By default, most of the web browsers will display unordered lists with a bullet point (•) before each list item. Therefore, it is also called bulleted list in HTML. However, we can change or customize the style of these bullet points that with the CSS style sheet.
In HTML documents, we commonly use this type of list to organize items such as a list of topics, features of a product, etc. where the ordered does not matter.
Syntax to Create Unordered or Bulleted List in HTML
In HTML, an unordered list is created using the <ul> . . . </ul> tags, where “ul” stands for “unordered list.” Each item within the list is placed inside <li>. . . </li> tags, where “li” stands for “list item.”
The combination of <ul> and <li> elements allows us to create an unordered list where the order of items does not. The basic syntax to create an unordered list in HTML is as follows:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
In the above syntax,
- <ul> is the opening tag that starts the unordered list or bulleted list.
- <li> is an opening tag that starts the list item.
- </li> is the closing tag that ends the list item.
- </ul> is the closing tag that marks the end of the unordered list.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple example of unordered list</title>
</head>
<body>
<p>Unordered list of fruits:</p>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Guava</li>
<li>Mango</li>
</ul>
</body>
</html>
Output:
Customizing Unordered Lists in HTML
As with ordered lists, we can also customize unordered lists using the list-style-type property of CSS (Cascading Style Sheets). The commonly used different bullet styles are as follows:
- disc: Sets the marker of list items to bullets, which is the default for unordered lists in HTML.
- square: Sets the marker of list items to squares.
- circle: Sets the marker of list items to circles.
- none: The list items will not be marked.
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unordered lists with different bullet types</title>
</head>
<body>
<p>Common customizations of unordered lists:</p>
<ul style = "list-style-type:disc">
<li>HTML</li>
<li>CSS</li>
<li>JavaScipt</li>
<li>React JS</li>
<li>Boostrap</li>
</ul>
<ul style = "list-style-type:square">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>C#</li>
</ul>
<ul style = "list-style-type:circle">
<li>Data Science</li>
<li>Artificial Intelligence</li>
<li>Machine Learning</li>
<li>Data Analytics</li>
</ul>
</body>
</html>
Output:
We can also remove bullets from the HTML unordered list. We just need to set the list-style-type to none and optionally add padding or margin for alignment. Here’s an example:
Example 3:
<ul style = "list-style-type:none">
<li>HTML</li>
<li>CSS</li>
<li>JavaScipt</li>
<li>React JS</li>
<li>Boostrap</li>
</ul>
Adding Images as Bullets in HTML
If you don’t like any of the bullet styles used in unordered lists, you can substitute an image of your own choosing in place of them. To do so, use the list-style-image property of CSS style. By setting this property, we can use images of our choosing as the bullets in the list.
The basic syntax to insert an image at the place of bullets in the unordered list is as:
<ul style = "list-style-image: url('path to your image');">
<li> ... </li>
<li> ... </li>
</ul>
In the above syntax, the url in parentheses should point to the image you want to use. Here’s an example:
Positioning Unordered List
We can use the list-style-position property of the CSS to set the position of the list marker (such as bullets in an unordered list or numbers in an ordered list) relative to the content of list items. However, the default value is outside, and the only alternative is inside that we can change it.
The property list-style-position can take one of two values:
inside: This positions the marker inside the content flow of the list item, which means the text may wrap under the marker in multi-line items.
outside (default): This positions the marker outside the list item’s content box, meaning that the text is aligned and does not wrap under the marker even in multi-line items.
Here’s an example that illustrates the difference between inside and outside:
Example: 4
<!DOCTYPE html>
<html lang="en">
<head>
<title>List Style Position</title>
</head>
<body>
<p>list-style-position: outside (default)</p>
<ul>
<li>The two basic types of lists in HTML are ordered lists and unordered lists. By default, an unordered list is displayed as a bulleted list, while an ordered list is displayed as a numbered list.</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<p>list-style-position: inside</p>
<ul style = "list-style-position: inside";>
<li>The two basic types of lists in HTML are ordered lists and unordered lists. By default, an unordered list is displayed as a bulleted list, while an ordered list is displayed as a numbered list.</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>
</html>
Output:
We can also modify several list-related properties at once simply using the list-style property. We can specify three values for list-style: the list style type, the list style position, and the url of the image to be used as the bullet style. Here’s an example:
Example 5:
<ul style = "list-style: circle inside url("path of the image")">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Nested Unordered List in HTML
In HTML, a nested unordered list is a list within another list. In the nested unordered list, each sub-list is marked up as its own <ul> tag contained within a parent list item (<li>). It is useful when we want to create hierarchical structures, such as menus, or any content that requires multiple levels of bullet points. Here’s an example of how to create a nested unordered list in HTML:
Example 6:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nested Unordered List</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2
<ul>
<li>Subsubitem 2.2.1</li>
<li>Subsubitem 2.2.2</li>
</ul>
</li>
<li>Subitem 2.3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</body>
</html>
Output:
In this tutorial, we have elaborated nested unordered list in HTML with the help of various examples. Hope that you will have understood the basic concepts of the unordered list and practiced all examples.
Happy coding!!!
