03. Unordered Lists

Introduction

Unordered lists (<ul>) display items in a list format without a specific order or sequence. They’re commonly used for navigation menus, feature lists, and collections where order doesn’t matter. Unordered lists are rendered with bullet points by default.

Basic Syntax

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Common Use Cases

Navigation Menus

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Feature Lists

<ul>
    <li>Fast performance</li>
    <li>Secure</li>
    <li>Easy to use</li>
</ul>

Styling

Customize bullet points with CSS:

<ul class="custom-list">
    <li>Item</li>
</ul>

<style>
    .custom-list {
        list-style-type: square;
        list-style-position: inside;
    }
</style>

References

• MDN Web Docs - ul element