HTML Unordered List

An HTML unordered list (<ul>) is used to group a collection of items that do not require a specific order. Each item in the list is marked with a bullet point.

Creating an Unordered List

Unordered lists are created using the <ul> element, with each list item enclosed within <li> tags.

Basic Syntax

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Output:

• Item one
• Item two
• Item three

Types of Bullet Points

The list-style-type CSS property allows you to change the bullet point style of the unordered list.

1. Disc (default)

<ul style="list-style-type: disc;">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Output:

• Item one
• Item two
• Item three

2. Circle

<ul style="list-style-type: circle;">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Output: 

○ Item one
○ Item two
○ Item three

3. Square

<ul style="list-style-type: square;">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Output:

■ Item one
■ Item two
■ Item three

Nesting Unordered Lists

You can nest unordered lists within other lists to create hierarchical structures.

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

Output:

• Fruits
  • Apple
  • Banana
• Vegetables
  • Carrot
  • Broccoli

Customizing Bullet Points

You can use CSS to customize bullet points further.

<ul style="list-style-type: none;">
  <li style="list-style-type: disc;">Item one</li>
  <li style="list-style-type: circle;">Item two</li>
  <li style="list-style-type: square;">Item three</li>
</ul>

Output:

• Item one ○ Item two ■ Item three

Summary

HTML unordered lists (<ul>) are used to group items without a specific order. By default, they use disc-shaped bullet points, but you can customize them with the list-style-type property. Unordered lists can also be nested to create more complex structures.