HTML Unordered List – A Complete Guide

What is an Unordered List in HTML?

An unordered list in HTML is a list of items without a specific order, usually displayed with bullet points (•).

✅ Use Cases:
✔ Listing items like grocery lists, features, or menus
✔ Grouping related links in navigation bars
✔ Structuring FAQs or documentation

Basic Syntax of ul

The <ul> tag is used to create an unordered list, and each item is wrapped in <li> (list item) tags.

✅ Example:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

✅ Output:

Apple
Banana
Cherry

Customizing Bullet Styles

By default, bullets are solid discs (•), but you can change them using the list-style-type property in CSS.

3.1 Circle Bullets

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

✅ Output:
○ Item 1
○ Item 2

3.2 Square Bullets

<ul style="list-style-type: square;">
    <li>Item A</li>
    <li>Item B</li>
</ul>

✅ Output:
▪ Item A
▪ Item B

3.3 Removing Bullets

If you don’t want bullets, set list-style-type: none;.

<ul style="list-style-type: none;">
    <li>Item X</li>
    <li>Item Y</li>
</ul>

✅ Output:
Item X
Item Y

Nested Unordered Lists (Sub-lists)

You can create a multi-level list by nesting <ul> inside <li>.

✅ Example:

<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

Best Practices for Using (UL)

✔ Use unordered lists for non-sequential data.
✔ Avoid excessive nesting to keep lists readable.
✔ Use CSS for styling lists instead of deprecated attributes.
✔ Ensure list items are clear and concise.
✔ Use semantic HTML for accessibility and SEO.