HTML ul Tag: The Unordered List Element

The HTML <ul> tag creates an unordered list on a web page, commonly referred to as a bulleted list in HTML. In essence, unordered lists can organize information in an easy-to-read format.

How to Use the HTML ul Tag

The <ul> tag indicates the beginning and end of an unordered HTML list. The <li> tag defines the list items that belong to the list.

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

• <ul>: The tag to indicate the beginning and end of an unordered list in HTML.
• <li>: The tag to create individual list items for the unordered list.

When to Use Unordered Lists in HTML

Unordered lists are useful for creating lists and organizing information where the order of the list items is unimportant. Common use cases include product description lists, navigation bars, and sitemaps.

Listing Features

You can use an unordered list to showcase a product's features or capabilities.

<ul>
    <li>Waterproof</li>
    <li>12-hour battery life</li>
    <li>Lightweight design</li>
</ul>

Grouping Related Content

Unordered lists can help you group related content into clear sections, such as categorizing topics for a blog.

<ul>
    <li>Technology</li>
    <li>Travel</li>
    <li>Food</li>
    <li>Health</li>
</ul>

Structuring Menu Items

Your navigation menus can also use unordered lists to structure items like links or buttons.

<ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>

Examples of Using HTML Unordered Lists

Millions of web pages organize information or HTML elements using the ordered list element.

Educational Websites

Websites focusing on education might use unordered lists to outline course content, learning objectives, or resources.

<ul>
    <li>Introduction to HTML</li>
    <li>Elements and Tags</li>
    <li>Building Your First Web Page</li>
</ul>

Product Features

E-commerce sites often list product features or specifications using unordered lists to aid in consumer decision-making.

<ul>
    <li>Wireless connectivity</li>
    <li>12-hour battery life</li>
    <li>Water-resistant up to 30 meters</li>
</ul>

Todo List Applications

Todo list applications commonly use <ul> tags to display lists of tasks. The <ul> tag is suitable for this purpose because it allows developers to organize items in a non-hierarchical list, with each task typically enclosed in an <li> tag.

<ul id="todoList">
    <li onclick="toggleTask(this)">Finish homework</li>
    <li onclick="toggleTask(this)">Go to the grocery store</li>
    <li onclick="toggleTask(this)">Call the dentist</li>
    <li onclick="toggleTask(this)">Prepare for the meeting</li>
</ul>

<script>
function toggleTask(item) {
    item.classList.toggle('completed');
}
</script>

<style>
.completed {
    text-decoration: line-through;
}
</style>

Learn More About the HTML Unordered List

Nested Unordered Lists

You can nest HTML lists, unordered or ordered, within each other. Nesting lists can help you create sub-steps or hierarchical structures.

<ul>
    <li>Electronics
        <ul>
            <li>Smartphones</li>
            <li>Tablets</li>
            <li>Laptops</li>
        </ul>
    </li>
    <li>Clothing</li>
    <li>Home Appliances</li>
</ul>

Changing the List Style Type

You can customize the bullet point style of unordered lists using the list-style-type CSS property. Common styles for the bullet points include circle, square, and none.

<ul style="list-style-type: square;">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Combining Unordered Lists with Other HTML Tags

Also, you combine unordered lists with elements like <nav>, <aside>, and <article> to create semantic and organized web layouts.

<aside>
    <h3>Related Articles</h3>
    <ul>
        <li><a href="/article1">Understanding JavaScript</a></li>
        <li><a href="/article2">Mastering CSS</a></li>
        <li><a href="/article3">Web Development Trends</a></li>
    </ul>
</aside>

Ordered Lists in HTML

The <ol> tag creates an ordered or numbered list in HTML. In contrast to unordered lists, HTML ordered lists use numbers or letters.

<p>Steps to follow:</p>
<ol>
    <li>Prepare the ingredients.</li>
    <li>Mix everything in a bowl.</li>
    <li>Bake in the oven for 30 minutes.</li>
</ol>

Styling Unordered Lists with CSS

You can use CSS to style and customize the appearance of your unordered lists. For example, you can change marker styles, colors, and spacing of lists and list items.

<style>
    ul.custom {
        list-style-type: none;
        padding: 0;
    }
    ul.custom li::before {
        content: "\2022";
        color: green;
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }
</style>
<ul class="custom">
    <li>Custom styled item</li>
    <li>Another custom styled item</li>
</ul>