HTML Unordered List

What’s an HTML Unordered List?

An HTML unordered list is just a simple way to group a bunch of items when the order doesn’t matter. Think of it like a shopping list or a list of your favorite things—there’s no specific order, and it’s all about listing items clearly. In HTML, you use the <ul> tag to create the list, and the <li> tag is used for each individual item.

How to Create an Unordered List

Here’s a basic example of how it looks:

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
</ul>

• <ul>: This tag starts the unordered list.
• <li>: These are the list items, the things you want to display in the list.

When you view this in a browser, you’ll see each item as a bullet point.

Customizing the List Style

Maybe the default bullet points aren’t your style. No worries! You can easily change them using a little CSS. For example, you can switch the bullets to squares:

<style>
    ul {
        list-style-type: square;
    }
</style>

Or, if we prefer circles instead of solid dots:

<style>
    ul {
        list-style-type: circle;
    }
</style>

This lets you tweak the look of your list in just a few lines of code.

Nesting Lists

Sometimes you might want to organize things into categories or subcategories. That’s when you can nest lists inside each other.

For example:

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

Here, we have a main list (Fruits and Vegetables) and nested lists for the items under each category. It helps break down the information into neat, easy-to-follow sections.

conclusion

So, HTML unordered lists are pretty straightforward, right? They let you group things in a list format without any concern for order. You can customize them with CSS, and even nest them inside each other for more organized, structured content. It’s a handy tool for making any webpage look neat and clear!