<ul> - Unordered List

The `<ul>` Element

Block-level HTML 2.0

The <ul> element represents an unordered list of items, typically rendered with bullet points. Use it when the order of list items doesn’t matter or isn’t significant to the meaning of the content.

Quick Example

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Syntax

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

The <ul> element contains one or more <li> (list item) elements.

Attributes

The <ul> element supports all global attributes like id, class, style, and role.

<ul id="features-list" class="bullet-list">
  <li>Feature one</li>
  <li>Feature two</li>
</ul>

Common Use Cases

Feature Lists

<h3>Key Features</h3>
<ul>
<li>Fast performance</li>
<li>Easy to use</li>
<li>Secure by default</li>
<li>Free updates</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Key Features</h3>
<ul>
<li>Fast performance</li>
<li>Easy to use</li>
<li>Secure by default</li>
<li>Free updates</li>
</ul>

<nav>
<ul>
  <li><a href="/">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>
</nav>

Result

Interactive code playground requires JavaScript. Here's the code:

<nav>
<ul>
  <li><a href="/">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>
</nav>

Product Lists

<h3>What's Included</h3>
<ul>
<li>1 year warranty</li>
<li>Free shipping</li>
<li>24/7 customer support</li>
<li>30-day money-back guarantee</li>
<li>Lifetime software updates</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>What's Included</h3>
<ul>
<li>1 year warranty</li>
<li>Free shipping</li>
<li>24/7 customer support</li>
<li>30-day money-back guarantee</li>
<li>Lifetime software updates</li>
</ul>

Nested Lists

<h3>Web Technologies</h3>
<ul>
<li>Frontend
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</li>
<li>Backend
  <ul>
    <li>Node.js</li>
    <li>Python</li>
    <li>Ruby</li>
  </ul>
</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Web Technologies</h3>
<ul>
<li>Frontend
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</li>
<li>Backend
  <ul>
    <li>Node.js</li>
    <li>Python</li>
    <li>Ruby</li>
  </ul>
</li>
</ul>

Styling Lists

Change Bullet Style

<style>
.disc-list { list-style-type: disc; }
.circle-list { list-style-type: circle; }
.square-list { list-style-type: square; }
</style>

<ul class="disc-list">
<li>Disc bullet (default)</li>
<li>Another item</li>
</ul>

<ul class="circle-list">
<li>Circle bullet</li>
<li>Another item</li>
</ul>

<ul class="square-list">
<li>Square bullet</li>
<li>Another item</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.disc-list { list-style-type: disc; }
.circle-list { list-style-type: circle; }
.square-list { list-style-type: square; }
</style>

<ul class="disc-list">
<li>Disc bullet (default)</li>
<li>Another item</li>
</ul>

<ul class="circle-list">
<li>Circle bullet</li>
<li>Another item</li>
</ul>

<ul class="square-list">
<li>Square bullet</li>
<li>Another item</li>
</ul>

Custom Bullets

<style>
.custom-bullets {
  list-style: none;
  padding-left: 0;
}
.custom-bullets li {
  padding-left: 1.5rem;
  position: relative;
}
.custom-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}
</style>

<ul class="custom-bullets">
<li>Task completed</li>
<li>Another task done</li>
<li>All finished</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.custom-bullets {
  list-style: none;
  padding-left: 0;
}
.custom-bullets li {
  padding-left: 1.5rem;
  position: relative;
}
.custom-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}
</style>

<ul class="custom-bullets">
<li>Task completed</li>
<li>Another task done</li>
<li>All finished</li>
</ul>

Remove Bullets

<style>
.no-bullets {
  list-style: none;
  padding-left: 0;
}
</style>

<ul class="no-bullets">
<li>No bullet point</li>
<li>Clean list item</li>
<li>Minimal style</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.no-bullets {
  list-style: none;
  padding-left: 0;
}
</style>

<ul class="no-bullets">
<li>No bullet point</li>
<li>Clean list item</li>
<li>Minimal style</li>
</ul>

Styled List Items

<style>
.styled-list {
  list-style: none;
  padding: 0;
}
.styled-list li {
  background: #f3f4f6;
  margin-bottom: 0.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
}
</style>

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

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.styled-list {
  list-style: none;
  padding: 0;
}
.styled-list li {
  background: #f3f4f6;
  margin-bottom: 0.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
}
</style>

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

Icon Bullets

<style>
.icon-list {
  list-style: none;
  padding-left: 0;
}
.icon-list li {
  padding-left: 2rem;
  position: relative;
  margin-bottom: 0.75rem;
}
.icon-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-size: 1.2rem;
}
</style>

<ul class="icon-list">
<li>Step one: Installation</li>
<li>Step two: Configuration</li>
<li>Step three: Deployment</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.icon-list {
  list-style: none;
  padding-left: 0;
}
.icon-list li {
  padding-left: 2rem;
  position: relative;
  margin-bottom: 0.75rem;
}
.icon-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-size: 1.2rem;
}
</style>

<ul class="icon-list">
<li>Step one: Installation</li>
<li>Step two: Configuration</li>
<li>Step three: Deployment</li>
</ul>

Two-Column List

<style>
.two-column {
  columns: 2;
  column-gap: 2rem;
}
</style>

<ul class="two-column">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
<li>Item six</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.two-column {
  columns: 2;
  column-gap: 2rem;
}
</style>

<ul class="two-column">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
<li>Item six</li>
</ul>

Nested Lists

Multi-Level Nesting

<ul>
<li>Chapter 1
  <ul>
    <li>Section 1.1</li>
    <li>Section 1.2
      <ul>
        <li>Subsection 1.2.1</li>
        <li>Subsection 1.2.2</li>
      </ul>
    </li>
  </ul>
</li>
<li>Chapter 2
  <ul>
    <li>Section 2.1</li>
    <li>Section 2.2</li>
  </ul>
</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<ul>
<li>Chapter 1
  <ul>
    <li>Section 1.1</li>
    <li>Section 1.2
      <ul>
        <li>Subsection 1.2.1</li>
        <li>Subsection 1.2.2</li>
      </ul>
    </li>
  </ul>
</li>
<li>Chapter 2
  <ul>
    <li>Section 2.1</li>
    <li>Section 2.2</li>
  </ul>
</li>
</ul>

Mixed List Types

<h3>Recipe Instructions</h3>
<ul>
<li>Ingredients:
  <ol>
    <li>2 cups flour</li>
    <li>1 cup sugar</li>
    <li>3 eggs</li>
  </ol>
</li>
<li>Tools needed:
  <ul>
    <li>Mixing bowl</li>
    <li>Whisk</li>
    <li>Baking pan</li>
  </ul>
</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Recipe Instructions</h3>
<ul>
<li>Ingredients:
  <ol>
    <li>2 cups flour</li>
    <li>1 cup sugar</li>
    <li>3 eggs</li>
  </ol>
</li>
<li>Tools needed:
  <ul>
    <li>Mixing bowl</li>
    <li>Whisk</li>
    <li>Baking pan</li>
  </ul>
</li>
</ul>

Accessibility

Semantic Structure

Screen readers announce lists and count items:

<!-- Screen reader: "List, 3 items. Bullet, HTML. Bullet, CSS. Bullet, JavaScript." -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Use proper markup for navigation:

Good
Less Accessible

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<div class="nav">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</div>

<ul>
  <li>Actual list item</li>
  <li>Another list item</li>
</ul>

<ul style="list-style: none;">
  <li style="display: inline;">Not</li>
  <li style="display: inline;">really</li>
  <li style="display: inline;">a list</li>
</ul>

When to Use UL vs OL

Use UL When…

Order doesn’t matter:

<h3>Features</h3>
<ul>
<li>Fast performance</li>
<li>Easy to use</li>
<li>Secure</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Features</h3>
<ul>
<li>Fast performance</li>
<li>Easy to use</li>
<li>Secure</li>
</ul>

Use OL When…

Order matters:

<h3>Installation Steps</h3>
<ol>
<li>Download the installer</li>
<li>Run the setup wizard</li>
<li>Configure settings</li>
<li>Launch the application</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Installation Steps</h3>
<ol>
<li>Download the installer</li>
<li>Run the setup wizard</li>
<li>Configure settings</li>
<li>Launch the application</li>
</ol>

Common Patterns

Checklist Style

<style>
.checklist {
  list-style: none;
  padding-left: 0;
}
.checklist li {
  padding-left: 2rem;
  position: relative;
  margin-bottom: 0.5rem;
}
.checklist li::before {
  content: "☐";
  position: absolute;
  left: 0;
  font-size: 1.2rem;
  color: #6b7280;
}
.checklist li.done::before {
  content: "☑";
  color: #10b981;
}
</style>

<ul class="checklist">
<li class="done">Complete project setup</li>
<li class="done">Install dependencies</li>
<li>Write documentation</li>
<li>Deploy to production</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.checklist {
  list-style: none;
  padding-left: 0;
}
.checklist li {
  padding-left: 2rem;
  position: relative;
  margin-bottom: 0.5rem;
}
.checklist li::before {
  content: "☐";
  position: absolute;
  left: 0;
  font-size: 1.2rem;
  color: #6b7280;
}
.checklist li.done::before {
  content: "☑";
  color: #10b981;
}
</style>

<ul class="checklist">
<li class="done">Complete project setup</li>
<li class="done">Install dependencies</li>
<li>Write documentation</li>
<li>Deploy to production</li>
</ul>

Card List

<style>
.card-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.card-list li {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

<ul class="card-list">
<li><strong>Feature 1:</strong> Fast and efficient</li>
<li><strong>Feature 2:</strong> Easy to customize</li>
<li><strong>Feature 3:</strong> Fully responsive</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.card-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.card-list li {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

<ul class="card-list">
<li><strong>Feature 1:</strong> Fast and efficient</li>
<li><strong>Feature 2:</strong> Easy to customize</li>
<li><strong>Feature 3:</strong> Fully responsive</li>
</ul>

<style>
.social-links {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
.social-links li a {
  display: block;
  padding: 0.5rem 1rem;
  background: #3b82f6;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
</style>

<ul class="social-links">
<li><a href="#">Twitter</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.social-links {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
.social-links li a {
  display: block;
  padding: 0.5rem 1rem;
  background: #3b82f6;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
</style>

<ul class="social-links">
<li><a href="#">Twitter</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <ul> element has been supported since the early days of HTML.

Ordered list for sequential items. Learn more →

List item element. Learn more →

Description list for term/definition pairs. Learn more →

Semantic list for commands or options. Learn more →

<ul> - Unordered List

The `<ul>` Element

Quick Example

Syntax

Attributes

Common Use Cases

Feature Lists

Navigation Lists

Product Lists

Nested Lists

Styling Lists

Change Bullet Style

Custom Bullets

Remove Bullets

Styled List Items

Icon Bullets

Two-Column List

Nested Lists

Multi-Level Nesting

Mixed List Types

Accessibility

Semantic Structure

Navigation Lists

Don’t Use for Layout

When to Use UL vs OL

Use UL When…

Use OL When…

Common Patterns

Checklist Style

Card List

Browser Support

Specifications

<ul> - Unordered List

The <ul> Element

Quick Example

Syntax

Attributes

Common Use Cases

Feature Lists

Navigation Lists

Product Lists

Nested Lists

Styling Lists

Change Bullet Style

Custom Bullets

Remove Bullets

Styled List Items

Icon Bullets

Two-Column List

Nested Lists

Multi-Level Nesting

Mixed List Types

Accessibility

Semantic Structure

Navigation Lists

Don’t Use for Layout

When to Use UL vs OL

Use UL When…

Use OL When…

Common Patterns

Checklist Style

Card List

Social Links

Browser Support

Related Elements

Specifications

The `<ul>` Element