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>
Try it Yourself »
More "Try it Yourself" examples below.
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.
Tip: Use CSS to style lists.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
Related Pages
HTML tutorial: HTML Lists
HTML DOM reference: Li Object
CSS Tutorial: Styling Lists
Default CSS Settings
Most browsers will display the <li> element with the following default values:
li {
display: list-item;
}
