HTML Unordered Lists

❮ Previous Next ❯

HTML Unordered Lists: Grouping Unsequenced Data

An unordered list in HTML is used to group a set of related list items that do not need to appear in a specific sequence. By default, the items in an unordered list are displayed with bullet points.

Here are some key features of HTML unordered lists:

No Order: Lists items without a specific sequence or ranking.
Customizable Bullets: Bullet styles can easily be changed or removed entirely using CSS.
Nesting: Allows you to place lists within other lists to create hierarchies.
Simple Syntax: Created with the <ul> (unordered list) and <li> (list item) tags.

Syntax:

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

* **`

`**: Defines each individual list item within the list.

Basic Unordered List Example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Unordered Lists</title>
</head>
<body>
    <h2>Web Technologies</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>React</li>
    </ul>
</body>
</html>

Unordered Lists Style Types

While an unordered list shows solid black bullet points (discs) by default, the appearance of these bullets can be easily changed using the CSS list-style-type property.

Here are some common list-style-type values:

1. Square Bullet Style

To change the bullets to squares, set the list-style-type property to square.

Square Type Unordered List:

<!DOCTYPE html>
<html>
<body>
    <h3>Square Bullets</h3>
    <ul style="list-style-type: square;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

2. Circle Bullet Style

To change the bullets to hollow circles, set the list-style-type property to circle.

Circle Type Unordered List:

<!DOCTYPE html>
<html>
<body>
    <h3>Circle Bullets</h3>
    <ul style="list-style-type: circle;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

3. Removing Bullets

To remove the default bullets entirely, set the list-style-type property to none. This is extremely useful when using lists to build layouts, like navigation menus.

None Type Unordered List:

<!DOCTYPE html>
<html>
<body>
    <h3>No Bullets</h3>
    <ul style="list-style-type: none;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

Nested Unordered Lists

A nested unordered list is simply an unordered list (<ul>) placed inside an existing list item (<li>). This is perfect for representing hierarchical or grouped information, such as categories and subcategories.

Nested Unordered List Example:

<!DOCTYPE html>
<html>
<body>
    <h2>IntricateDevo Curriculum</h2>
    <ul>
        <li>Data Structures</li>
        <li>
            Web Development
            <!-- This is the nested list -->
            <ul style="list-style-type: circle;">
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </li>
        <li>Machine Learning</li>
    </ul>
</body>
</html>

Using Unordered Lists for Navigation

Because unordered lists group related items logically without enforcing a strict numbered sequence, they are the industry standard for creating website navigation menus.

By combining list-style-type: none; with CSS styling (like display: inline or float: left), you can display the list items horizontally as a seamless navigation bar.

Horizontal Navigation Menu Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        ul.nav-menu {
            list-style-type: none; 
            padding: 0;
            background-color: #282A35;
            overflow: hidden;
        }
        ul.nav-menu li {
            float: left; 
        }
        ul.nav-menu li a {
            font-family: 'Segoe UI', Verdana, sans-serif;
            font-size: 14px;
            font-weight: 500;
            display: block;
            color: white;
            text-decoration: none;
            padding: 14px 20px;
        }
        ul.nav-menu li a:hover {
            background-color: #3B82F6;
        }
    </style>
</head>
<body>
    <h3>Website Navigation</h3>
    <ul class="nav-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#courses">Courses</a></li>
        <li><a href="#blogs">Blogs</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</body>
</html>

Exercise

Which CSS property and value are used to completely remove the default bullets from an unordered list?

list-style: hidden; list-style-type: none; bullet-style: none; text-decoration: none;