<ul>

Defines an unordered (bulleted) list

Definition and Usage

The <ul> element establishes an unordered list, which is a list of items where the order doesn't matter.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

List items are typically displayed with bullet points by default, but you can change this using CSS.

Tip: Use the <ul> tag together with the <li> tag to create unordered lists.

Note: For ordered lists (numbered lists), use the <ol> tag. For description lists, use <dl>, <dt>, and <dd>.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <ul> tag supports the Global Attributes in HTML.

The <ul> tag also supports the Event Attributes in HTML.

Deprecated Attributes

The following attributes were used in HTML 4.01 but are NOT supported in HTML5. Use CSS instead:

Attribute	Value	Description
type	disc circle square	Deprecated. Use CSS `list-style-type` instead to specify the bullet style
compact	compact	Deprecated. Use CSS to reduce spacing between list items instead

Examples

Basic Unordered List

Create a simple unordered list:

Example
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Nested Lists

Create nested unordered lists:

Example
<ul>
  <li
    >Coffee
    <ul>
      <li>Espresso</li>
      <li>Cappuccino</li>
      <li>Latte</li>
    </ul>
  </li>
  <li
    >Tea
    <ul>
      <li>Black Tea</li>
      <li>Green Tea</li>
      <li>Herbal Tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Different Bullet Markers with CSS

Change the bullet style using CSS:

Example
<style>
  .disc-list {
    list-style-type: disc;
  }

  .circle-list {
    list-style-type: circle;
  }

  .square-list {
    list-style-type: square;
  }

  .no-bullets {
    list-style-type: none;
  }
</style>

<ul class="disc-list">
  <li>Default disc bullets</li>
  <li>Item 2</li>
</ul>

<ul class="circle-list">
  <li>Circle bullets</li>
  <li>Item 2</li>
</ul>

<ul class="square-list">
  <li>Square bullets</li>
  <li>Item 2</li>
</ul>

<ul class="no-bullets">
  <li>No bullets</li>
  <li>Item 2</li>
</ul>

Styled List with CSS

Create a custom styled list:

Example
<style>
  .styled-list {
    list-style: none;
    padding: 0;
  }

  .styled-list li {
    padding: 12px 20px;
    margin-bottom: 8px;
    background-color: #f5f5f5;
    border-left: 4px solid #745af2;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  .styled-list li:hover {
    background-color: #e8e8e8;
    transform: translateX(5px);
  }
</style>

<ul class="styled-list">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Navigation Menu with List

Create a horizontal navigation menu:

Example

Approved-page light CSS-variable defaults are supplied: --text-primary. The snippet includes CSS inside its HTML. Unavailable or blocked: fragment context “#home”; fragment context “#about”; fragment context “#services”; fragment context “#contact”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<style>
  .nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: var(--text-primary);
    border-radius: 8px;
    overflow: hidden;
  }

  .nav-menu li {
    flex: 1;
  }

  .nav-menu li a {
    display: block;
    padding: 16px 24px;
    color: white;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s;
  }

  .nav-menu li a:hover {
    background-color: #555;
  }
</style>

<ul class="nav-menu">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

List with Icons

Add custom icons to list items:

Example
<style>
  .icon-list {
    list-style: none;
    padding-left: 0;
  }

  .icon-list li {
    padding-left: 32px;
    position: relative;
    margin-bottom: 12px;
  }

  .icon-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
    font-size: 18px;
  }

  .icon-list.cross li::before {
    content: "✗";
    color: #dc2626;
  }

  .icon-list.arrow li::before {
    content: "→";
    color: #745af2;
  }
</style>

<ul class="icon-list">
  <li>Feature included</li>
  <li>Another feature</li>
  <li>One more feature</li>
</ul>

<ul class="icon-list cross">
  <li>Not available</li>
  <li>Excluded feature</li>
</ul>

<ul class="icon-list arrow">
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ul>

Multi-Column List

Display list items in multiple columns:

Example
<style>
  .multi-column-list {
    column-count: 3;
    column-gap: 24px;
  }

  @media (max-width: 768px) {
    .multi-column-list {
      column-count: 2;
    }
  }

  @media (max-width: 480px) {
    .multi-column-list {
      column-count: 1;
    }
  }
</style>

<ul class="multi-column-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

<ul> vs <ol> - Unordered vs Ordered Lists

Tag	List Type	When to Use	Default Marker
`<ul>`	Unordered list	When the order of items doesn't matter (shopping lists, features, menu items)	Bullet points (•)
`<ol>`	Ordered list	When the order of items matters (steps, rankings, instructions)	Numbers (1, 2, 3...)

Rule of Thumb: Use <ul> for lists where items are interchangeable. Use <ol> when the sequence matters.

List Markers (CSS list-style-type)

You can customize the appearance of list markers using the CSS list-style-type property:

CSS Value	Description	Example
`disc`	Filled circle (default)	• Item
`circle`	Hollow circle	○ Item
`square`	Filled square	▪ Item
`none`	No marker	Item (no bullet)

Example - Custom Markers
<style>
  ul {
    list-style-type: disc; /* Default */
  }

  ul.circle {
    list-style-type: circle;
  }

  ul.square {
    list-style-type: square;
  }

  ul.none {
    list-style-type: none;
  }

  /* Custom marker using ::before pseudo-element */
  ul.custom {
    list-style: none;
  }

  ul.custom li::before {
    content: "➤ ";
    color: #745af2;
    font-weight: bold;
  }
</style>

Try it Yourself

Interactive Example

See how unordered lists work:

Shopping List:

Apples
Bananas
Milk
Bread

Nested List:

Fruits
- Apples
- Oranges
Vegetables
- Carrots
- Broccoli

Try in Code Playground

Accessibility with Lists

Semantic Structure: Screen readers announce lists and the number of items, helping users understand content structure
Navigation: Users can skip through lists or navigate item by item
Proper Nesting: Ensure nested lists are properly structured for screen reader compatibility
Meaningful Content: List items should be concise and meaningful
Avoid Overuse: Don't use lists for layout purposes; use them for actual lists of related items

Accessibility Tip: Always use <ul> for actual lists, not just for layout. For layout purposes, use CSS Grid or Flexbox instead.

Best Practices

Semantic Usage: Use <ul> only for actual lists of related items, not for layout
Proper Nesting: Nest lists inside <li> elements, not directly inside <ul>
Accessibility: Lists help screen readers understand content structure, so use them appropriately
CSS for Styling: Never use deprecated type or compact attributes; use CSS instead
Remove Default Styling When Appropriate: Use list-style: none for navigation menus or custom-styled lists
Keep Items Concise: List items should be brief and scannable
Consistent Structure: Maintain consistent formatting across all list items
Use for Navigation: Lists are perfect for navigation menus (combine with <nav>)

Common Use Cases

Navigation Menus: Create horizontal or vertical navigation bars
Feature Lists: Display product features or service offerings
Shopping Lists: Items to purchase or collect
Tag Lists: Display categories, tags, or keywords
Footer Links: Organize footer navigation
Social Media Icons: List of social media links
Breadcrumbs: Navigation trail showing page hierarchy
Table of Contents: Document outline or page sections

Default CSS Settings

Most browsers will display the <ul> element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Related Tags

<ol>
Defines an ordered list
<li>
Defines a list item
<dl>
Defines a description list
<dt>
Defines a term in a description list
<dd>
Defines a description in a list
<nav>
Defines navigation links