The HTML <li> tag

Definition and Usage

<li> Tag defines list items.

<li> Tag for ordered list (<ol>) and unordered list (<ul>) and menu list (<menu>).

In <ul> and <menu>, list items are usually displayed with bullet points.

In <ol>, list items are usually displayed with numbers or letters.

Tip:Use CSS toSet list style.

See also:

HTML Tutorial:HTML List

HTML DOM Reference Manual:Li Object

CSS Tutorial:Set the style of the list

Instance

Example 1

An ordered (<ol>) and an unordered (<ul>HTML list: )

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

Try It Yourself

Example 2

Use the value attribute in an ordered list:

<ol>
  <li value="100">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Pure Water</li>
  <li>Juice</li>
  <li>Beer</li>
</ol>

Try It Yourself

Example 3

Set different list style types (using CSS):

<ol>
  <li>Coffee</li>
  <li style="list-style-type:lower-alpha">Tea</li>
  <li>Milk</li>
</ol>
<ul>
  <li>Coffee</li>
  <li style="list-style-type:square">Tea</li>
  <li>Milk</li>
</ul>

Try It Yourself

Example 4

Create a list (nested list) in the list:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Pu'er</li>
      <li>Green Tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Try It Yourself

Example 5

Create a more complex nested list:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Pu'er</li>
      <li>Green Tea
        <ul>
          <li>Bi Luo Chun</li>
          <li>Dragon Well</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Try It Yourself

Attribute

Attribute Value Description
value Number Only applicable to <ol> lists. Specifies the starting value of the list item. Subsequent list items will increment from this number.

Global Attributes

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

event attributes

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

Default CSS Settings

Most browsers will use the following default values to display <li> Element:

li {
  display: list-item;
}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support