HTML <li> Tag

The <li> tag represents a list item. It is used to define individual items within an ordered list (<ol>), an unordered list (<ul>), or a menu list (<menu>). Each list item is typically displayed with a bullet point (in unordered lists) or a number/letter (in ordered lists).

Syntax

<li value="number">Content</li>

Attributes

Example

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

More Examples

Simple Unordered List

<p>My favorite fruits:</p>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

This will display a simple unordered list (bullet points) of fruits.

Simple Ordered List

<p>Steps to make a cake:</p>
<ol>
    <li>Mix the ingredients.</li>
    <li>Bake in the oven.</li>
    <li>Let it cool.</li>
</ol>

This will display a numbered list of the steps to make a cake.

Ordered List with Custom Starting Value

<p>My favorite movies, in order (starting from 3):</p>
<ol start="3">
  <li>Movie C</li>
  <li>Movie D</li>
  <li>Movie E</li>
</ol>

Here we've used the start attribute on the <ol> to begin the numbering at 3 rather than 1. Note that while we can use the value attribute on individual <li> tags, the most common way to adjust the numbers is on the <ol> element itself.

Using the value Attribute on Specific <li> tags:

<p>A numbered list with a custom value on list item:</p>
<ol>
  <li>First Item</li>
  <li value="5">Custom value list item</li>
  <li>Next item</li>
  <li>Next item 2</li>
</ol>

The third item will have value 6, and the last value 7. The value attribute on the <li> changes the value of that item and the items after it.

Nested Lists

<p>My Shopping List:</p>
<ul>
  <li>Grocery
    <ul>
      <li>Fruits</li>
      <li>Vegetables
        <ul>
          <li>Carrots</li>
          <li>Spinach</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Household
    <ul>
      <li>Cleaning supplies</li>
    </ul>
  </li>
</ul>

This demonstrates how you can nest lists within each other to create more complex hierarchical structures.

Lists with Different List Types

You can nest lists of different types to create visual distinctions:

<p>My To-Do List:</p>
<ol>
    <li>Morning
      <ul>
        <li>Make coffee</li>
        <li>Check emails</li>
      </ul>
    </li>
    <li>Afternoon
      <ul>
        <li>Work</li>
      </ul>
    </li>
    <li>Evening</li>
</ol>

This is a common use case to indicate main items and sub-items clearly in your content.

Browser Support

The <li> tag is supported in all modern browsers.

Notes and Tips

• The <li> tag should always be a direct child of an <ol>, <ul>, or <menu> tag.
• While the value attribute is available for the <li> tag, it is more common to use the start attribute on the <ol> tag to adjust the starting number of the ordered list.
• Use nested lists to create well-structured hierarchical information.
• For accessibility, ensure that your list structures are logically grouped; screen readers interpret these tags to provide context.
• Do not use <li> to create a layout with "fake" bullet points; use CSS instead. <li> has semantic meaning and should only represent items within a list.
• Combine lists with semantic HTML like <nav> for navigation menus.