HTML Unordered Lists

An HTML unordered list (<ul>) is used to display a list of items with bullets. This format is ideal when the order of items is not important. By default, unordered lists use a disc as the bullet, but you can customize the bullet style using the list-style-type property.

Syntex:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Types of Bulleted Lists

You can use the list-style-type property in CSS to change the bullet style of the unordered list. Here are the different types:

  1. Disc (default): A filled circle.

  2.Circle: An empty circle.

  4.Square: A filled square.

  5.None: No bullets.

Example:

<!DOCTYPE html>
<html>
<head>

<title>Unordered List Examples</title>

</head>
<body>

<h3>Different Types of Unordered Lists</h3>

<h4>Disc (Default)</h4>

<ul style="list-style-type: disc;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<h4>Circle</h4>

<ul style="list-style-type: circle;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<h4>Square</h4>

<ul style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<h4>None</h4>

<ul style="list-style-type: none;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

</body>
</html>

Output:

Different Types of Unordered Lists

Disc (Default)

  • Item 1
  • Item 2
  • Item 3

Circle

  • Item 1
  • Item 2
  • Item 3

Square

  • Item 1
  • Item 2
  • Item 3

None

  • Item 1
  • Item 2
  • ItemĀ 3