The <li> tag creates a list item in a list element.
Items in an unordered list (<ul>) appear with a bullet.
Items in an ordered list (<ol>) with a sequence number.
Three <li> items with job titles in an ordered list (<ol>).
<ol>
<li>Designers</li>
<li>Developers</li>
<li>Managers</li>
</ol>
ol = ordered listul = unordered listli = list item
To add items to an HTML list use the <li> (list item) tag.
This element is placed inside a <ul> (unordered list), or an <ol> (ordered list).
An <ul> tag with 3 <li> elements and an <ol> tag with 4 <li> elements.
Project roles:
<ul>
<li>Designers</li>
<li>Developers</li>
<li>Managers</li>
</ul>
<br />
Project tasks:
<ol>
<li>Design</li>
<li>Develop</li>
<li>Test</li>
<li>Deploy</li>
</ol>
This table lists the <li> tag attribute.
| Attribute | Value | Description |
|---|---|---|
| value | number | The value of the list item |
| id | identifier | Defines a unique identifier for the li element. |
| class | classnames | Sets one or more CSS classes to be applied to the li element. |
| style | CSS-styles | Sets the style for the li element. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the li element is hidden. |
| title | text | Sets a title that displays as a tooltip. |
For additional global attributes see our Global Attributes List.
The numbers on an <ol> element can be customized with CSS.
An <ol> element with custom <li> number styling.
<style>
ol.custom { list-style: none; counter-reset: resetter; }
ol.custom li { counter-increment: resetter; }
ol.custom li::before { content: counter(resetter) ". "; color: #ef4444; }
</style>
<ol class="custom">
<li>Designers</li>
<li>Developers</li>
<li>Managers</li>
</ol>
The <li> tag is part of a group of tags
that are used to create lists (i.e. lists of items) on web pages.
This group is referred to as the List tag group.
Together, they allow you to create comprehensive HTML lists.
Below are the list tags.
| Element | Description |
|---|---|
| <ul> | Creates an unordered, bulleted list |
| <ol> | Creates a numerically or alphabetically ordered list |
| <li> | Defines a list item. Used in <ol> and <ul> elements |
| <dl> | Defines a description list |
| <dt> | Adds a term or name to a <dl> element |
| <dd> | Adds a description of a term or name to a <dl> element |
Here is when <li> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
