How to create an unordered list in HTML?

Updated On: 2024-06-02

HTML unordered list (<ul>) is used to create a list of items where the order of items does not matter.

Each item in the list is represented by a <li> (list item) element. The default bullet style for items in an unordered list is a filled circle (disc), but we can change it using CSS.

Basic Unordered List in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Unordered List</title>
</head>
<body>
    <h1>Basic Unordered List in HTML</h1>
    <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ul>
</body>
</html>

Customizing unordered lists

We can customize the unordered lists using it value like disc, circle and square.

`list-style-type: disc`

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Unordered List with Disc Bullets</title> </head> <body> <h1>Unordered List with Disc Bullets</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> <li>Cheese</li> </ul> </body> </html>

`list-style-type:circle`

<!DOCTYPE html>
<html>

<body>
    <h2>Welcome To W3codehub</h2>
  
    <ul style="list-style-type:circle;">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>React</li>
    </ul>
</body>

</html>

`list-style-type: square`

<!DOCTYPE html>
<html>
    <body>
        <h2>square type unordered list</h2>

        <ul style="list-style-type: square">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>React</li>
        </ul>
    </body>
</html>

`list-style-type:none;`

<!DOCTYPE html>
<html>
    <body>
        <h2>None type unordered list</h2>

        <ul style="list-style-type:none;">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>React</li>
        </ul>
    </body>
</html>

Nested Unordered List

<!DOCTYPE html>
<html>
    <head>
        <title>Nested unordered list</title>
    </head>

    <body>
        <h2>Nested unordered list</h2>

        <ul>
            <li>Geeks</li>
            <li>
                Web Development
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                </ul>
            </li>
            <li>Javascript</li>
        </ul>

        <ul type="square">
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
        </ul>
    </body>
</html>

Horizontal Unordered List

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                text-align: center;
            }

            ul {
                overflow: hidden;
                background-color: #1d6b0d;
                list-style-type: none;
            }

            li {
                float: left;
            }

            li a {
                text-decoration: none;
                color: white;
                padding: 0.5rem;
            }
        </style>
    </head>

    <body>
        <h3>HTML Horizontal Unordered List</h3>

        <ul>
            <li><a href="#course">Course</a></li>
            <li><a href="#Blog">Blogs</a></li>
            <li>
                <a href="#Content">Content</a>
            </li>
        </ul>
    </body>
</html>

Related Resources

For more information, you can use the following resources:

HTML Unordered Lists at Geeksforgeeks

The Unordered List element at mdn web docs

HTML Unordered Lists at W3schools

How to Create an Unordered List at FreeCodeCamp

How To

How to create an unordered list in HTML?

Basic Unordered List in HTML

Customizing unordered lists

`list-style-type: disc`

`list-style-type:circle`

`list-style-type: square`

`list-style-type:none;`

Nested Unordered List

Horizontal Unordered List

Related video

Related Resources

How To

How to create an unordered list in HTML?

Basic Unordered List in HTML

Customizing unordered lists

list-style-type: disc

list-style-type:circle

list-style-type: square

list-style-type:none;

Nested Unordered List

Horizontal Unordered List

Related video

Related Resources

Related Reads

`list-style-type: disc`

`list-style-type:circle`

`list-style-type: square`

`list-style-type:none;`