HTML Unordered Lists -

HTML unordered lists are used to display a collection of items without requiring a specific order. By default, browsers display unordered list items with bullet points. The HTML <ul> element creates the list, while the <li> element defines each item.

Unordered lists are commonly used for navigation menus, product features, shopping lists, website categories, and other content where the sequence of items is not important.

What Is an HTML Unordered List?

An HTML unordered list groups related items together using bullet markers. Unlike an ordered list, which usually displays numbers or letters, an unordered list displays bullets by default.

HTML Unordered List Syntax

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

In this example, the browser displays HTML, CSS, and JavaScript as three separate bullet points.

HTML Unordered List Example

The following example demonstrates how to create an unordered list in a complete HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Unordered Lists</title>
</head>
<body>

    <h1>HTML Unordered Lists</h1>

    <h2>Popular Programming Languages</h2>

    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>JavaScript</li>
        <li>C++</li>
    </ul>

</body>
</html>

The browser displays the programming languages as a bulleted list. Each <li> element represents one item within the <ul> element.

HTML Unordered List Bullet Styles

You can change the default bullet appearance using the CSS list-style-type property.

Value	Description
`disc`	Displays solid circular bullets.
`circle`	Displays hollow circular bullets.
`square`	Displays square bullets.
`none`	Removes the default bullet markers.

Example of Different Bullet Styles

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

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

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

In this example, each list uses a different bullet style. You can also apply these styles through a CSS stylesheet instead of using inline styles.

Removing Bullets from an Unordered List

You can remove the default bullet markers using list-style-type: none. This is useful when creating website navigation menus or custom list layouts.

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

This example displays the list items without bullet points. Additional CSS can be used to arrange them horizontally and add spacing.

Nested HTML Unordered Lists

A nested unordered list is a list placed inside another list item. It helps organize related information into categories and subcategories.

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

Here, HTML, CSS, and JavaScript appear as subitems under Frontend Development.

HTML Unordered Lists vs Ordered Lists

Feature	Unordered List	Ordered List
HTML element	`<ul>`	`<ol>`
Default marker	Bullet points	Numbers
Item sequence	Usually not important	Usually important
List item element	`<li>`	`<li>`
Common uses	Features and categories	Instructions and rankings

HTML Unordered Lists