HTML <ul> Tag – The Unordered List Element

Definition and Usage

The <ul> tag represents a list of items where the order is not specified.

The term 'ul' is an abbreviation for Unordered List, meaning that changing the order of the items does not materially affect their meaning.

The <ul> tag is used to list items where the order of importance is not specified.
The child items of this element are defined using the <li> tag.
A bullet marker (for example, "•") is automatically generated and displayed before each item.

If you need to create a list of items where the order is important, use the <ol> tag.

Basic Example

The following is a simple example using the <ul> tag.

HTML

<p>Our local diner has many delicious menu items.</p>
<ul>
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ul>

HTML <p> Tag

Permitted Content and Important Notes

The content that can be used as child elements of the <ul> tag is limited

<li>
<script>
<template>

Except for zero or more of these elements, other elements or the insertion of text (that is, a text node) are not allowed.

The following examples show incorrect cases that use content not permitted within the <ul> tag, as well as correct cases.

Incorrect and Correct Examples

HTML - Incorrect Example The <p> tag is used as a child of the <ul> tag, which is not permitted.

<ul>
    <p>Our local diner has many delicious menu items.</p>
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ul>

HTML - Incorrect Example Plain text is used directly within the <ul> tag.

<ul>
    Our local diner has many delicious menu items.
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ul>

HTML - Correct Example

<p>Our local diner has many delicious menu items.</p>
<ul>
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ul>

HTML - Incorrect Example The <a> tag is used as a direct child of the <ul> tag.

<nav>
    <ul>
        <a href=""><li>About Us</li></a>
        <a href=""><li>Products</li></a>
        <a href=""><li>Privacy Policy</li></a>
        <a href=""><li>Customer Support</li></a>
    </ul>
</nav>

HTML <nav> Tag

HTML - Correct Example

<nav>
    <ul>
        <li><a href="">About Us</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Privacy Policy</a></li>
        <li><a href="">Customer Support</a></li>
    </ul>
</nav>

HTML - Not Incorrect but Not Recommended Although it is not a syntax error for the <ul> tag to have no content, it is not recommended since it does not represent a meaningful list.

<ul>
    <!-- No content -->
</ul>

Use and Important Notes for the `type` Attribute

This attribute sets the style of the bullet marker (for example, "•"), which is automatically generated before each <li> tag within the <ul> tag.

The values of this attribute are as follows:

circle
disc
square

Although this attribute is supported by most browsers, it has been deprecated since HTML5 and its use is no longer recommended.

If you need to change the bullet style, use the CSS list-style-type property instead.

Implementing the Role of `<ul>` with `role="list"`

While it is best to use the <ul> tag to mark up a list of unordered items, it is not always possible to do so. When using third-party libraries, developers may find themselves unable to use their preferred tags. In such cases, you can implement the role of a <ul> tag by applying role="list" to the elements provided by the library.

The HTML role attribute extends the semantic reach of an element by providing a more explicit structure and meaning. If a specific tag cannot be used, this attribute can assign the intended role to an alternative element.

HTML role Attribute

The following example demonstrates how to implement the role of a <ul> tag using role="list" on a <div> tag, which carries no inherent semantic meaning.

HTML Source: MDN - ARIA: list role

<div role="list">
    <div role="listitem">List item 1</div>
    <div role="listitem">List item 2</div>
    <div role="listitem">List item 3</div>
</div>

The implicit role value for the <ul> tag is list.

Using Nested Lists

The <ul> and <ol> tags can be nested within an <li> tag as needed. These tags can also be mixed and used interchangeably to create complex list structures.

Nesting the <ul> Tag Inside the <li> Tag

<p>Our local diner has many delicious menu items.</p>
<ul>
    <li>
        Noodles
        <ul>
            <li>Ramen</li>
            <li>Udon</li>
            <li>Spaghetti</li>
        </ul>
    </li>
    <li>
        Wraps
        <ul>
            <li>Tuna wrap</li>
            <li>Veggie wrap</li>
            <li>Fish roe wrap</li>
        </ul>
    </li>
    <li>
        Cutlets
        <ul>
            <li>Pork cutlet</li>
            <li>Cutlet combo</li>
        </ul>
    </li>
</ul>

Nesting the <ol> Tag Inside the <li> Tag

<p>Here is the order of menu items by category at our local diner.</p>
<ul>
    <li>
        Noodles
        <ol>
            <li>Ramen</li>
            <li>Udon</li>
            <li>Spaghetti</li>
        </ol>
    </li>
    <li>
        Wraps
        <ol>
            <li>Tuna wrap</li>
            <li>Veggie wrap</li>
            <li>Fish roe wrap</li>
        </ol>
    </li>
    <li>
        Cutlets
        <ol>
            <li>Pork cutlet</li>
            <li>Cutlet combo</li>
        </ol>
    </li>
</ul>