<li> - List Item

The `<li>` Element

List item HTML 2.0

The <li> element represents a list item and must be contained within a parent list element: <ul> (unordered list), <ol> (ordered list), or <menu>. It defines individual items in a list structure.

Quick Example

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

Result

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

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

Syntax

<!-- In unordered lists -->
<ul>
  <li>List item</li>
</ul>

<!-- In ordered lists -->
<ol>
  <li>List item</li>
</ol>

<!-- In menu lists -->
<menu>
  <li>Menu item</li>
</menu>

The <li> element must be a direct child of <ul>, <ol>, or <menu>.

Attributes

value Attribute (Ordered Lists Only)

Specifies a custom number for the list item in <ol>:

<ol>
<li>First item (1)</li>
<li>Second item (2)</li>
<li value="10">Tenth item</li>
<li>Eleventh item (11)</li>
<li>Twelfth item (12)</li>
</ol>

Result

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

<ol>
<li>First item (1)</li>
<li>Second item (2)</li>
<li value="10">Tenth item</li>
<li>Eleventh item (11)</li>
<li>Twelfth item (12)</li>
</ol>

Global Attributes

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

<li id="item-1" class="highlight">Important item</li>

Common Use Cases

Simple List Items

<h3>Shopping List</h3>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
<li>Butter</li>
<li>Coffee</li>
</ul>

Result

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

<h3>Shopping List</h3>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
<li>Butter</li>
<li>Coffee</li>
</ul>

List Items with Links

<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>

Rich Content in List Items

<ul>
<li>
  <strong>HTML</strong> - HyperText Markup Language
  <p>The standard markup language for web pages.</p>
</li>
<li>
  <strong>CSS</strong> - Cascading Style Sheets
  <p>Used for styling and layout of web pages.</p>
</li>
<li>
  <strong>JavaScript</strong> - Programming Language
  <p>Adds interactivity to web pages.</p>
</li>
</ul>

Result

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

<ul>
<li>
  <strong>HTML</strong> - HyperText Markup Language
  <p>The standard markup language for web pages.</p>
</li>
<li>
  <strong>CSS</strong> - Cascading Style Sheets
  <p>Used for styling and layout of web pages.</p>
</li>
<li>
  <strong>JavaScript</strong> - Programming Language
  <p>Adds interactivity to web pages.</p>
</li>
</ul>

Nested Lists

<ul>
<li>Fruits
  <ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
  </ul>
</li>
<li>Vegetables
  <ul>
    <li>Carrots</li>
    <li>Broccoli</li>
    <li>Spinach</li>
  </ul>
</li>
</ul>

Result

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

<ul>
<li>Fruits
  <ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
  </ul>
</li>
<li>Vegetables
  <ul>
    <li>Carrots</li>
    <li>Broccoli</li>
    <li>Spinach</li>
  </ul>
</li>
</ul>

Styling List Items

Individual Item Styling

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

<ul class="styled-list">
<li>Hover over me</li>
<li>And me too</li>
<li>Try hovering here</li>
</ul>

Result

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

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

<ul class="styled-list">
<li>Hover over me</li>
<li>And me too</li>
<li>Try hovering here</li>
</ul>

Alternating Colors

<style>
.zebra-list li {
  padding: 0.5rem 1rem;
}
.zebra-list li:nth-child(odd) {
  background: #f9fafb;
}
.zebra-list li:nth-child(even) {
  background: #f3f4f6;
}
</style>

<ul class="zebra-list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>

Result

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

<style>
.zebra-list li {
  padding: 0.5rem 1rem;
}
.zebra-list li:nth-child(odd) {
  background: #f9fafb;
}
.zebra-list li:nth-child(even) {
  background: #f3f4f6;
}
</style>

<ul class="zebra-list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>

Custom Markers

<style>
.custom-markers {
  list-style: none;
  padding-left: 0;
}
.custom-markers li {
  padding-left: 2rem;
  position: relative;
  margin-bottom: 0.75rem;
}
.custom-markers li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: #3b82f6;
}
</style>

<ul class="custom-markers">
<li>Custom arrow marker</li>
<li>Another item</li>
<li>One more item</li>
</ul>

Result

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

<style>
.custom-markers {
  list-style: none;
  padding-left: 0;
}
.custom-markers li {
  padding-left: 2rem;
  position: relative;
  margin-bottom: 0.75rem;
}
.custom-markers li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: #3b82f6;
}
</style>

<ul class="custom-markers">
<li>Custom arrow marker</li>
<li>Another item</li>
<li>One more item</li>
</ul>

Icon List Items

<style>
.icon-list {
  list-style: none;
  padding: 0;
}
.icon-list li {
  padding: 0.75rem 1rem 0.75rem 3rem;
  position: relative;
  margin-bottom: 0.5rem;
  background: #f9fafb;
  border-radius: 4px;
}
.icon-list li::before {
  content: "✓";
  position: absolute;
  left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
</style>

<ul class="icon-list">
<li>Feature enabled</li>
<li>Setting configured</li>
<li>Account verified</li>
</ul>

Result

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

<style>
.icon-list {
  list-style: none;
  padding: 0;
}
.icon-list li {
  padding: 0.75rem 1rem 0.75rem 3rem;
  position: relative;
  margin-bottom: 0.5rem;
  background: #f9fafb;
  border-radius: 4px;
}
.icon-list li::before {
  content: "✓";
  position: absolute;
  left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
</style>

<ul class="icon-list">
<li>Feature enabled</li>
<li>Setting configured</li>
<li>Account verified</li>
</ul>

Complex List Items

Cards as List Items

<style>
.card-list {
  list-style: none;
  padding: 0;
}
.card-list li {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-list h4 {
  margin: 0 0 0.5rem 0;
  color: #1f2937;
}
.card-list p {
  margin: 0;
  color: #6b7280;
}
</style>

<ul class="card-list">
<li>
  <h4>Premium Plan</h4>
  <p>All features included, priority support</p>
</li>
<li>
  <h4>Standard Plan</h4>
  <p>Most features, email support</p>
</li>
<li>
  <h4>Basic Plan</h4>
  <p>Essential features only</p>
</li>
</ul>

Result

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

<style>
.card-list {
  list-style: none;
  padding: 0;
}
.card-list li {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-list h4 {
  margin: 0 0 0.5rem 0;
  color: #1f2937;
}
.card-list p {
  margin: 0;
  color: #6b7280;
}
</style>

<ul class="card-list">
<li>
  <h4>Premium Plan</h4>
  <p>All features included, priority support</p>
</li>
<li>
  <h4>Standard Plan</h4>
  <p>Most features, email support</p>
</li>
<li>
  <h4>Basic Plan</h4>
  <p>Essential features only</p>
</li>
</ul>

List Items with Images

<style>
.image-list {
  list-style: none;
  padding: 0;
}
.image-list li {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
}
.image-list img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}
</style>

<ul class="image-list">
<li>
  <img src="https://via.placeholder.com/60" alt="Product 1">
  <div>
    <strong>Product A</strong>
    <p style="margin: 0.25rem 0 0 0; color: #6b7280;">Description of product A</p>
  </div>
</li>
<li>
  <img src="https://via.placeholder.com/60" alt="Product 2">
  <div>
    <strong>Product B</strong>
    <p style="margin: 0.25rem 0 0 0; color: #6b7280;">Description of product B</p>
  </div>
</li>
</ul>

Result

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

<style>
.image-list {
  list-style: none;
  padding: 0;
}
.image-list li {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
}
.image-list img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}
</style>

<ul class="image-list">
<li>
  <img src="https://via.placeholder.com/60" alt="Product 1">
  <div>
    <strong>Product A</strong>
    <p style="margin: 0.25rem 0 0 0; color: #6b7280;">Description of product A</p>
  </div>
</li>
<li>
  <img src="https://via.placeholder.com/60" alt="Product 2">
  <div>
    <strong>Product B</strong>
    <p style="margin: 0.25rem 0 0 0; color: #6b7280;">Description of product B</p>
  </div>
</li>
</ul>

List Item Value Attribute

Custom Numbering

<h3>Important Milestones</h3>
<ol>
<li value="100">Milestone 100</li>
<li>Milestone 101</li>
<li value="200">Milestone 200</li>
<li>Milestone 201</li>
</ol>

Result

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

<h3>Important Milestones</h3>
<ol>
<li value="100">Milestone 100</li>
<li>Milestone 101</li>
<li value="200">Milestone 200</li>
<li>Milestone 201</li>
</ol>

Continuing Across Sections

<h3>Chapter 1</h3>
<ol>
<li>Introduction</li>
<li>Background</li>
</ol>

<p>Some content between lists...</p>

<h3>Chapter 2</h3>
<ol>
<li value="3">Methodology</li>
<li>Results</li>
<li>Conclusion</li>
</ol>

Result

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

<h3>Chapter 1</h3>
<ol>
<li>Introduction</li>
<li>Background</li>
</ol>

<p>Some content between lists...</p>

<h3>Chapter 2</h3>
<ol>
<li value="3">Methodology</li>
<li>Results</li>
<li>Conclusion</li>
</ol>

Accessibility

Semantic Structure

Screen readers announce list items with their position:

<!-- Screen reader: "List, 3 items. Bullet, First item. Bullet, Second item. Bullet, Third item." -->
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Clear Content

Make list items descriptive and clear:

Good
Less Clear

<ul>
  <li>Click the blue "Submit" button at the bottom of the form</li>
  <li>Wait for the confirmation email to arrive</li>
  <li>Click the verification link in the email</li>
</ul>

<ul>
  <li>Submit</li>
  <li>Wait</li>
  <li>Click</li>
</ul>

Interactive List Items

Ensure interactive elements are accessible:

<ul>
<li><button>Edit</button> Item with action button</li>
<li><button>Edit</button> Another editable item</li>
<li><button>Edit</button> Third editable item</li>
</ul>

Result

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

<ul>
<li><button>Edit</button> Item with action button</li>
<li><button>Edit</button> Another editable item</li>
<li><button>Edit</button> Third editable item</li>
</ul>

Best Practices

<ul>
  <li>Fast performance</li>
  <li>Easy to use</li>
  <li>Secure by default</li>
</ul>

<ul>
  <li>This is a very long list item that contains multiple sentences and probably should be broken into separate paragraphs or restructured as regular content instead of being crammed into a single list item.</li>
</ul>

Parallel Structure

Keep items grammatically consistent:

Good (Parallel)
Inconsistent

<ul>
  <li>Install the software</li>
  <li>Configure the settings</li>
  <li>Launch the application</li>
</ul>

<ul>
  <li>Install the software</li>
  <li>Configuration of settings</li>
  <li>Application launching</li>
</ul>

Don’t Nest Incorrectly

Good
Invalid

<ul>
  <li>Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

<ul>
  <li>Parent item</li>
  <ul> <!-- Must be inside li -->
    <li>Child item</li>
  </ul>
</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 <li> element has been supported since the early days of HTML.

Unordered list container. Learn more →

Ordered list container. Learn more →

Menu list container. Learn more →

Description list (uses <dt> and <dd> instead of <li>). Learn more →

<li> - List Item

The <li> Element

Quick Example

Syntax

Attributes

value Attribute (Ordered Lists Only)

Global Attributes

Common Use Cases

Simple List Items

List Items with Links

Rich Content in List Items

Nested Lists

Styling List Items

Individual Item Styling

Alternating Colors

Custom Markers

Icon List Items

Complex List Items

Cards as List Items

List Items with Images

List Item Value Attribute

Custom Numbering

Continuing Across Sections

Accessibility

Semantic Structure

Clear Content

Interactive List Items

Best Practices

Keep Items Concise

Parallel Structure

Don’t Nest Incorrectly

Browser Support

Related Elements

Specifications

The `<li>` Element