<li>

Definition and Usage

The <li> element establishes a list item.

The <li> tag is used inside ordered lists (<ol>), unordered lists (<ul>), and in menu lists (<menu>).

In ordered lists, the items will usually be displayed with numbers or letters. In unordered lists, the items will usually be displayed with bullets.

Attributes

The <li> tag also supports the Global Attributes in HTML.

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

Examples

Unordered List

Create a simple bulleted list:

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

Ordered List

Create a numbered list:

<ol>
  <li>First step: Learn HTML</li>
  <li>Second step: Learn CSS</li>
  <li>Third step: Learn JavaScript</li>
  <li>Fourth step: Build projects</li>
</ol>

Nested Lists

Create multi-level lists with nesting:

<ul>
  <li
    >Frontend Development
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li
        >JavaScript
        <ul>
          <li>React</li>
          <li>Vue</li>
          <li>Angular</li>
        </ul>
      </li>
    </ul>
  </li>
  <li
    >Backend Development
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>PHP</li>
    </ul>
  </li>
</ul>

Using the Value Attribute

Set a specific starting value for list items in ordered lists:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li value="10">This item starts at 10</li>
  <li>This will be 11</li>
  <li>This will be 12</li>
</ol>

Styled Lists with CSS

Customize list appearance with CSS:

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

  .custom-list li {
    padding: 12px 16px;
    margin: 8px 0;
    background: #f4f4f4;
    border-left: 4px solid #745af2;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  .custom-list li:hover {
    background: #e8e8e8;
    transform: translateX(5px);
  }

  .custom-list li::before {
    content: "✓ ";
    color: #745af2;
    font-weight: bold;
    margin-right: 8px;
  }
</style>

<ul class="custom-list">
  <li>Responsive Design</li>
  <li>Cross-browser Compatibility</li>
  <li>Performance Optimization</li>
  <li>Accessibility Standards</li>
</ul>

List Items with Mixed Content

Include various HTML elements inside list items:

<ul>
  <li>
    <strong>HTML5</strong>
    <p>The latest version of HTML with semantic elements and APIs.</p>
  </li>
  <li>
    <strong>CSS3</strong>
    <p>Modern styling with flexbox, grid, and animations.</p>
  </li>
  <li>
    <strong>JavaScript ES6+</strong>
    <p>Modern JavaScript with arrow functions, promises, and modules.</p>
  </li>
</ul>

Try it Yourself

Ordered List (ol) vs Unordered List (ul)

List Styling with CSS

Common CSS properties for styling list items:

• list-style-type: Changes the marker type (disc, circle, square, decimal, etc.)
• list-style-position: Sets marker position (inside or outside)
• list-style-image: Uses a custom image as the marker
• list-style: Shorthand property for all list styling
• ::marker: Pseudo-element to style the marker itself

/* Remove default styling */
ul {
  list-style: none;
}

/* Custom bullet with ::marker */
li::marker {
  content: "→ ";
  color: #745af2;
  font-weight: bold;
}

/* Or use custom image */
ul {
  list-style-image: url('bullet.png');
}

Best Practices

• Always use <li> inside a parent list element (<ul>, <ol>, or <menu>)
• Use <ol> when order matters (steps, instructions, rankings)
• Use <ul> when order doesn't matter (features, benefits, general items)
• Keep list items concise and scannable
• Use nested lists for hierarchical information
• Don't use lists just for indentation - use CSS instead
• Use semantic HTML - lists improve accessibility and SEO
• Avoid deeply nested lists (more than 3 levels) as they can be hard to read
• Use CSS to style lists rather than deprecated HTML attributes

Accessibility Considerations

• Screen readers announce the number of items in a list
• Lists help screen reader users navigate content more efficiently
• Proper list structure improves content comprehension
• Nested lists maintain proper hierarchy for assistive technologies
• Use lists for actual lists - not for layout purposes

Default CSS Settings

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

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

Related Tags

• <ul>

  Defines an unordered list

• <ol>

  Defines an ordered list

• <dl>

  Defines a description list

• <dt>

  Defines a term in a description list

• <dd>

  Defines a description in a description list

• <nav>

  Defines navigation links