<ul>

Overview

The <ul> element defines an unordered list on a webpage. The items in the list are commonly rendered as bullet points.

Examples and Usage

Unordered lists, created using the <ul> element, serve a specific purpose in HTML: grouping items where the sequence doesn't materially change the meaning of the document. This contrasts with ordered lists used with <ol>, where the order is significant.

Let's observe a basic unordered list:

<ul>
  <li>Task One</li>
  <li>Task Two</li>
  <li>Task Three</li>
</ul>

Output:

• Task One
• Task Two
• Task Three

Nesting unordered lists can create more complex structures. Here's an example with up to three levels of nesting:

<ul>
  <li>Main Task
    <ul>
      <li>Sub-task A
        <ul>
          <li>Detail 1</li>
          <li>Detail 2</li>
        </ul>
      </li>
      <li>Sub-task B</li>
    </ul>
  </li>
  <li>Another Main Task</li>
</ul>

Output:

• Main Task
  ○ Sub-task A
    ▪ Detail 1
    ▪ Detail 2
  ○ Sub-task B
• Another Main Task

Notice the different bullet styles and that some <li> elements are not closed immediately. The browser will automatically close them when another list item or the closing </ul> tag is encountered.

Now, let's look at an example where an ordered list is nested inside an unordered list:

<ul>
  <li>Category One</li>
  <li>Category Two
    <ol>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
    </ol>
  </li>
  <li>Category Three</li>
</ul>

Output:

• Category One
• Category Two
  1. Item 2.1
  2. Item 2.2
  3. Item 2.3
• Category Three

The rendering of the bullet points can differ, and it's typically controlled using the list-style-type property in CSS. Both <ul> and <ol> elements offer nesting flexibility, allowing for complex list structures. When the sequence doesn't impact the document's meaning, the <ul> element is the appropriate choice, providing a semantically correct way to present non-sequential lists.

Attribute Breakdown

The <ul> element inherits all global attributes common to HTML elements. Additionally, it has a couple of deprecated attributes that should be avoided:

• compact (Deprecated and Non-standard): Hinted that the list should be rendered in a compact style. This attribute is no longer recommended; use the CSS line-height property instead.

• type (Deprecated and Non-standard): Defined the bullet style for the list (e.g., circle, disc, square). This attribute has been deprecated in favor of the CSS list-style-type property.

Accessibility Aspects

There are no specific accessibility concerns related to the <ul> element, and it inherently takes on the ARIA role of list. While other roles and global aria-* attributes are technically allowed, they may not be commonly applied to this element. Developers should adhere to best practices, avoiding explicitly setting the list role and steering clear of deprecated roles like directory.

Associated Elements

• <li>
• <menu>
• <ol>

Additional Notes

• The CSS list-style-position property can be used to specify the position of the list item markers in relation to the content. The values inside and outside control whether the markers appear within the content flow or outside of it, respectively.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: ul

The HTML Living Standard Specification: ul