Signup/Sign In

How to make an unordered list without any bullets?

HTML list is used to structure the items within the webpage. It can be in the ordered form with some numerical or alphanumeric numbers or it can be just listed out with bullets using an unordered list. Here, we are going to discuss an unordered list with and without bullets.

Creating an unordered list using HTML

To create an unordered list use <ul> tag, and add items to the <li> element within <ul> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
    <h2> Unordered List </h2>
    <ul> 
	    <li>Item1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
</body>
</html>

Output

In the output, we can see that the list contains the bullets.

unordered list

Removing bullets from the unordered list

We can remove the bullets from the unordered list using CSS. Add a list-style-type property with none value. Let's create an unordered list without bullets.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
  ul {
     list-style-type: none;
  }
</style>
</head>
<body>
    <h2> Unordered List without bullets </h2>
    <ul> 
	    <li>Item1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
</body>
</html>

Output

In the output given below, we have a list of items without bullets.

Unordered list without bullets

Conclusion

So, we have learned to create an unordered list. An unordered list can be easily created without using the bullets. Just use the CSS property to remove the bullets from the list.



About the author: