W3docs
en
Log in

HTML <ul> Tag

The HTML <ul> tag defines an unordered list, grouping a collection of items that have no particular order. Learn its syntax, nesting and styling.

The HTML <ul> tag is used for specifying an unordered list, which groups a collection of items having no numerical order. When changing the order of list items, the meaning does not change. Usually, the items of an unordered list are displayed with a bullet. It can be of different forms such as a circle, a dot, or a square.

Each element of an unordered list is declared inside the <li> tag.

The <ul> tag is a block-level element, and occupies all available horizontal space. Its height depends on the content within the container. An unordered list is typically rendered as a bulleted list.

The <ol> tag also represents a list of items and creates an ordered list. But it differs from <ul>, as the order in the <ol> tag is meaningful. By default, the items of an ordered list are displayed with numbers.

The <ul> and <ol> tags can be nested as deeply as you want. The nested lists can alternate between <ul> and <ol>. However, you should consider that in case of nesting a list inside another, the inner list must be placed inside an <li> element of the outer list. This means that the direct child of a list must be an <li> element, but that <li> element can contain another list. It is possible to change the list item marker with CSS. However, the semantic meaning expressed by the choice of a list type cannot be changed with CSS.

Syntax

The <ul> tag comes in pairs. The content is written between the opening (<ul>) and closing (</ul>) tags.

Example of the HTML <ul> tag:

Example of HTML <ul> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </body>
</html>
Try it Yourself »

Nested lists

Lists are frequently nested to express hierarchy — for example a menu with sub-items. To nest a list, place the inner <ul> inside an <li> of the outer list, not directly inside the outer <ul>. The direct child of a <ul> must always be an <li>.

Example of a nested <ul>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ul>
      <li>Coffee</li>
      <li>
        Tea
        <ul>
          <li>Black tea</li>
          <li>Green tea</li>
        </ul>
      </li>
      <li>Milk</li>
    </ul>
  </body>
</html>

Browsers automatically change the bullet marker at each nesting level (disc, then circle, then square), making the hierarchy easy to read.

Styling the list with CSS

The historical type and compact attributes are obsolete in HTML5 — do not use them. The modern, semantic way to change the bullet marker is the CSS list-style-type property (or list-style-image for a custom image). Keeping the marker in CSS separates presentation from structure: the list still means "unordered list" no matter how you style it.

Example of <ul> styled with the CSS list-style-type property:

Example of HTML <ul> Tag with the CSS list-style-type property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.square {
        list-style-type: square;
      }
      ul.circle {
        list-style-type: circle;
      }
      ul.none {
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <h2>Examples of unordered lists:</h2>
    <ul class="square">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
    <ul class="circle">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Ice Tea</li>
    </ul>
    <ul class="none">
      <li>No marker</li>
      <li>No marker</li>
    </ul>
  </body>
</html>
Try it Yourself »

The most common real-world use of <ul> is a navigation menu. Wrapping the list in a <nav> element marks it as a navigation landmark, and the list still communicates "these items form a group" to assistive technology. The bullets are usually removed with CSS.

Example of a navigation menu built with <nav> and <ul>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 20px;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

Accessibility

Screen readers treat a <ul> as a list: they announce that a list is starting, read out the number of items it contains (for example "list, 3 items"), and read each item in order. This item count is useful context for non-sighted users, so prefer real <ul>/<li> markup over a stack of styled <div> elements.

There is one important gotcha. In Safari with VoiceOver, applying list-style: none (as you typically do for navigation menus) removes the list semantics — VoiceOver no longer announces it as a list. If the list role matters in that context, restore it explicitly:

<ul role="list" style="list-style: none;">
  <li>Home</li>
  <li>About</li>
</ul>

Attributes

The <ul> tag has no element-specific attributes in the current HTML standard. (The old type and compact attributes are obsolete — use CSS instead.) It supports only the Global attributes and the Event Attributes.

  • <li> — defines each item of the list.
  • <ol> — creates an ordered (numbered) list.
  • HTML Lists — overview of all list types in HTML.
  • CSS list-style-type — controls the bullet marker.

Practice

Practice
Which statement about the HTML ul tag is correct?
Which statement about the HTML ul tag is correct?
Was this page helpful?