HTML Unordered Lists

Unordered lists are used to display a collection of related items where the order of the items is not important.

---

1. What is an Unordered List?

An unordered list is created using the <ul> element. Each item inside the list is created using the <li> element.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

2. The ul Element

The <ul> element defines the unordered list. It acts as the container for all list items.

<ul>

    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>

</ul>

3. The li Element

The <li> element represents an individual item in the list.

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

4. Default Bullet Style

By default, browsers usually display unordered list items using a filled circular bullet.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

5. Unordered List with Text

List items can contain normal text.

<ul>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ul>

6. Unordered List with Links

Each list item can contain a hyperlink. This is commonly used to create navigation menus.

<ul>

    <li>
        <a href="index.html">Home</a>
    </li>

    <li>
        <a href="courses.html">Courses</a>
    </li>

    <li>
        <a href="contact.html">Contact</a>
    </li>

</ul>

7. Unordered List with Images

A list item can contain an image along with text.

<ul>

    <li>
        <img src="html.png"
             alt="HTML"
             width="30">
        HTML
    </li>

    <li>
        <img src="css.png"
             alt="CSS"
             width="30">
        CSS
    </li>

</ul>

8. Change Bullet Style Using CSS

CSS can be used to change the appearance of unordered list markers.

<ul style="list-style-type: square;">

    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>

</ul>

9. Common Bullet Styles

Style	CSS Value	Typical Appearance
Disc	disc	Filled circle
Circle	circle	Open circle
Square	square	Square marker
None	none	No marker

10. Disc Style

<ul style="list-style-type: disc;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

11. Circle Style

<ul style="list-style-type: circle;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

12. Square Style

<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

13. Remove Bullet Points

Set list-style-type to none when you want to remove the default bullets.

<ul style="list-style-type: none;">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

14. Unordered List with CSS Class

It is usually better to use CSS classes instead of inline styles.

<style>

    .course-list {
        list-style-type: square;
    }

</style>

<ul class="course-list">

    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>

</ul>

15. Nested Unordered Lists

One unordered list can be placed inside another list item.

<ul>

    <li>
        Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>
        Backend
        <ul>
            <li>C#</li>
            <li>.NET</li>
            <li>SQL</li>
        </ul>
    </li>

</ul>

16. Multi-Level Nested Lists

Lists can contain multiple levels of nested lists.

<ul>

    <li>
        Web Development

        <ul>

            <li>
                Frontend

                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>

            </li>

            <li>
                Backend

                <ul>
                    <li>C#</li>
                    <li>.NET</li>
                    <li>SQL</li>
                </ul>

            </li>

        </ul>

    </li>

</ul>

17. Unordered List for Navigation

Navigation menus are often built using unordered lists.

<nav>

    <ul class="navigation">

        <li>
            <a href="index.html">Home</a>
        </li>

        <li>
            <a href="courses.html">Courses</a>
        </li>

        <li>
            <a href="about.html">About</a>
        </li>

        <li>
            <a href="contact.html">Contact</a>
        </li>

    </ul>

</nav>

18. Horizontal Navigation with CSS

<style>

    .navigation {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .navigation li {
        display: inline-block;
        margin-right: 20px;
    }

</style>

<nav>

    <ul class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">Courses</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

</nav>

19. Unordered List with Icons

CSS or icon libraries can be used to replace the default marker with a custom visual style.

<ul class="feature-list">

    <li>Fast Performance</li>
    <li>Responsive Design</li>
    <li>Easy Maintenance</li>

</ul>

Example CSS

<style>

    .feature-list {
        list-style-type: none;
        padding: 0;
    }

    .feature-list li::before {
        content: "✓";
        margin-right: 8px;
    }

</style>

20. Using Lists for Features

<h2>Course Features</h2>

<ul>
    <li>Live Projects</li>
    <li>Interview Preparation</li>
    <li>Practical Assignments</li>
    <li>Mentor Support</li>
</ul>

21. Lists Inside a List Item

A list item can contain paragraphs, links, images, and even another list.

<ul>

    <li>

        Web Development

        <p>
            Learn modern web development technologies.
        </p>

        <ul>
            <li>Frontend</li>
            <li>Backend</li>
        </ul>

    </li>

</ul>

22. Unordered List Best Practices

• Use <ul> when item order is not important.
• Use <li> for each individual list item.
• Use nested lists when information has a hierarchy.
• Use CSS for visual customization.
• Use semantic navigation elements when creating navigation menus.
• Keep list content logically grouped.

23. Common Mistakes

• Using <ul> without <li> items.
• Using unnecessary nested lists.
• Using lists only for visual spacing.
• Using a table when the content is actually a simple list.
• Using ordered lists when item order is not important.
• Removing list markers without providing another clear visual structure.

24. Complete Practice Example

<!DOCTYPE html>
<html>

<head>

    <title>Unordered List Example</title>

    <style>

        .course-list {
            list-style-type: square;
        }

        .course-list a {
            text-decoration: none;
        }

    </style>

</head>

<body>

    <h1>Programming Courses</h1>

    <ul class="course-list">

        <li>
            <a href="html.html">HTML</a>
        </li>

        <li>
            <a href="css.html">CSS</a>
        </li>

        <li>
            <a href="javascript.html">JavaScript</a>
        </li>

        <li>
            Backend
            <ul>
                <li>C#</li>
                <li>.NET</li>
                <li>SQL</li>
            </ul>
        </li>

    </ul>

</body>

</html>