HTML li tag

Example

One ordered (<ol>) and one 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>

1. Coffee
2. Tea
3. Milk

• Coffee
• Tea
• Milk

Definition and Usage

The <li> tag defines a list item.

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

In <ul> and <menu>, the list items will usually be displayed with bullet points.

In <ol>, the list items will usually be displayed with numbers or letters.

Attributes

Attribute	Value	Description
value	number	Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number

Global Attributes

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

Event Attributes

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

More Examples

Example

Use of the value attribute in an ordered list:

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

100. Coffee
101. Tea
102. Milk
103. Water
104. Juice
105. Beer

Example

Set different list style types (with 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>

1. Coffee
2. Tea
3. Milk

• Coffee
• Tea
• Milk

Example

Create a list inside a list (a nested list):

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

• Coffee
• Tea
  • Black tea
  • Green tea
• Milk

Example

Create a more complex nested list:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>

• Coffee
• Tea
  • Black tea
  • Green tea
    • China
    • Africa
• Milk

Default CSS Settings

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

li {
display: list-item;
}