← Back to All Tags

<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

The <ul> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

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

<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

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

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