RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-unordered-lists/ below:

HTML Unordered Lists - GeeksforGeeks

HTML Unordered Lists

Last Updated : 23 Jul, 2025

An unordered list in HTML is used to group a set of list items that don't need to be in a specific order. The items in an unordered list are usually displayed with bullet points by default. Here are the some key features of HTML unordered lists:

No Order: Lists items without a specific sequence.
Customizable Bullets: Bullets can be changed with CSS.
Nesting: Allows lists within lists.
Simple Syntax: Created with <ul> and <li>.

Syntax

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

In the above syntax

<ul>: This tag defines the unordered list. It tells the browser that the following items are part of a list where the order does not matter.
<li>: This tag defines each list item. Each <li> represents an individual item in the list.

Now let's understand this with the help of example:

HTML


 <html>
<head>
    <title>
        HTML Unordered Lists
    </title>
</head>
<body>
    <h2>HTML Unordered Lists</h2>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>React</li>
    </ul>
</body>
</html>

Output

Unordered Lists Style Types

In HTML, unordered lists (<ul>) are used to display items without any specific order, and by default, they show bullet points. However, the appearance of these bullets can be changed using CSS with different styles.

Here are some common list-style-type values that you can apply to unordered lists to change the bullet style.

1. Square Bullet Style

To change the bullets in an unordered list to squares, the list-style-type property in CSS can be set to square. Let's understand this with the help of example

HTML


 <html>
<head>
    <title>
        Square type unordered list
    </title>
</head>
<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>

Output:

Output 2. Circle Bullet Style

To change the bullets in an unordered list to circles, the list-style-type property in CSS can be set to circle. Let's understand this with the help of example

HTML


 <html>
<head>
    <title>
        Circle type unordered list
    </title>
</head>
<body>
    <h2> Circle type unordered list</h2>

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

Output:

Output 3. Removing Bullets

To remove the default bullets in an unordered list, the list-style-type property in CSS can be set to none. Let's understand this with the help of example

HTML


 <html>
<head>
    <title>
        None type unordered list
    </title>
</head>
<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>

Output:

Output Nested Unordered List

A nested unordered list is simply an unordered list (<ul>) inside another list item (<li>) of an existing unordered list. This is useful for representing hierarchical or grouped information, like categories and subcategories. Let's understand this with the help of example.

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>

Output

Output Horizontal Unordered List

The unordered list may need to be displayed horizontally, such as in a navigation menu. This can be accomplished with the help of CSS. Let's understand this with the help of example . Let's understand this with the help of example:

HTML


 <html>
<head>
    <title>HTML Horizontal Unordered List</title>
    <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>

Output

Output Using Unordered Lists for Navigation

Unordered lists are often used for creating navigation menus on websites. They are great for displaying a list of links where the order of the items doesn’t matter. Let's understand this with the help of example.

HTML


 <html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Menu</title>
    <style>
        ul {
            list-style-type: none; 
            padding: 0;
        }
        li {
            display: inline; 
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <h1>Website Navigation</h1>
    <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>
</body>
</html>

Output

Conclusion

An unordered list in HTML groups items without a specific order using <ul> and <li> tags. It displays bullet points by default, which can be customized with CSS (e.g., circles, squares, or no bullets). Unordered lists are useful for organizing content, including nested and horizontal lists, and are commonly used for navigation menus.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4