<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>
• 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>
• 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>
• 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
<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.
<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
type(Deprecated and Non-standard): Defined the bullet style for the list (e.g.,
square). This attribute has been deprecated in favor of the CSS
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
- The CSS
list-style-positionproperty can be used to specify the position of the list item markers in relation to the content. The values
outsidecontrol whether the markers appear within the content flow or outside of it, respectively.
For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.