Open In App

HTML <ul> Tag

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The HTML <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists. List items (<li>) are nested within <ul>, allowing the display of items without a specific order, typically represented by bullet points in browsers.

HTML
<!DOCTYPE html>
<html>

<body>
    <h2>Laptop accessories</h2>
    <ul>
        <li>Mouse</li>
        <li>Keyboard</li>
        <li>Speaker</li>
        <li>Monitor</li>
    </ul>
</body>

</html>

Attributes

AttributeDescription
HTML <ul> compact AttributeRenders the list smaller.
HTML <ul> type AttributeSpecifies the kind of marker used in the list. Values include disc, circle, square, etc.

Note: The <ul> attributes are not supported by HTML 5.

Types of List Styles:

The list-style-type property defines the type of bullets:

  • disc (default): Solid round bullets.
  • circle: Hollow bullets.
  • square: Square bullets.
  • none: No bullets.
HTML
<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: square;
            padding: 0;
        }
    </style>
</head>

<body>
    <h1>Grocery List</h1>
    <ul>
        <li>Apples</li>
        <li>Bananas</li>
        <li>Carrots</li>
        <li>Bread</li>
    </ul>
</body>

</html>


Nested unordered list

A nested unordered list allows creating multi-level hierarchies by placing a <ul> inside an <li>.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>Nested unordered list</title>
</head>

<body>
    <h2>Welcome To GeeksforGeeks</h2>
    <ul>
        <li>Hardware</li>
        <li>
            Software
            <ul>
                <li>System Software</li>
                <li>Application Software</li>
            </ul>
        </li>
        <li>MacBook</li>
    </ul>
</body>

</html>

Similar Reads