HTML Unordered Lists

An HTML unordered list is used to group items where the order does not matter. Items are displayed with bullet points by default.

---

Basic Unordered List

Use the <ul> tag to create an unordered list. Each list item goes inside an <li> (list item) tag:

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Result:

• Coffee
• Tea
• Milk

---

Changing the List Marker

Use the CSS list-style-type property to change the bullet style:

Value	Description	Example
disc	Filled circle (default)	● Item
circle	Hollow circle	○ Item
square	Filled square	■ Item
none	No marker	Item

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

---

Removing Markers (list-style-type: none)

Setting list-style-type: none removes the bullet points entirely. This is commonly used to build navigation menus:

<ul style="list-style-type: none; padding: 0;">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

---

Nested Unordered Lists

You can nest a <ul> inside an <li> to create sub-lists:

<ul>
    <li>Beverages
        <ul>
            <li>Coffee</li>
            <li>Tea</li>
        </ul>
    </li>
    <li>Food
        <ul>
            <li>Bread</li>
            <li>Rice</li>
        </ul>
    </li>
</ul>

Result:

• Beverages
  • Coffee
  • Tea
• Food
  • Bread
  • Rice

---

Horizontal List with CSS

Use CSS display: inline or display: flex to make list items appear side by side — commonly used for navigation bars:

<style>
ul.nav-list {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 20px;
}
</style>

<ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>