HTML <li> Tag – The List Item Element

Definition and Usage

The <li> tag represents an item in a list.
When its parent element is an <ol>, <ul>, or <menu>, the <li> tag represents a list item as defined by that parent element.

The term 'li' is an abbreviation for list item, meaning an item in a list.

The <li> tag is used as a child of the following three elements that carry the semantic meaning of a list, and it represents an item within those elements:

<ol>
<ul>
<menu>

Therefore, the parent element of the <li> tag cannot be any element other than these three.

Basic Examples

The following are simple examples using the <li> tag.

Used as an Item in an `<ol>`

HTML

<p>Our local diner has many delicious menu items.</p>
<ol>
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ol>

HTML <p> Tag

Used as an Item in an `<ul>`

HTML

<p>Our local diner has many delicious menu items.</p>
<ul>
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ul>

Used as an Item in an `<menu>`

HTML

<div>
    <p>w3.org provides the latest updates on web standards.</p>
    <menu>
        <li><button type="button">Like!</button></li>
        <li><button type="button">Subscribe</button></li>
    </menu>
</div>

Incorrect Example

As explained earlier, the <li> tag represents an item in a list only when its parent element is an <ol>, <ul>, or <menu>. Therefore, the parent element of the <li> tag cannot be any element other than these three.

HTML A <li> element cannot have a <p> element as its parent.

<p><li>Burger</li></p>
<p><li>Fries</li></p>
<p><li>Grilled cheese</li></p>
<p><li>Fried chicken</li></p>

At first glance, the rendered output may seem correct. However, this is merely an appearance created by the default styling. In HTML, content must be conveyed through proper and valid markup.

Related Attributes

The <li> tag supports all global attributes.

`value` Attribute

The value attribute represents the current ordinal value of a list item as defined by an <ol> element. Only numeric values can be assigned to this attribute, even if the list is displayed using Roman numerals or letters. Subsequent list items will be numbered starting from the set value.

Note that this attribute does not apply to unordered lists (<ul>) or <menu> elements.

HTML

<p>Our local diner has many delicious menu items.</p>
<ol>
    <li>Burger</li>
    <li>Fries</li>
</ol>
<p>The following items are also highly recommended:</p>
<ol>
    <li value="3">Grilled cheese</li>
    <li>Fried chicken</li>
</ol>

Technical Syntax Summary

Technical Syntax Summary of the li tag
Permitted parents	An `<ul>`, `<ol>`, or `<menu>` element.
Permitted content	Flow content.
Implicit ARIA `role`	`listitem` when child of an `<ul>`, `<ol>`, or `<menu>`
Permitted ARIA `roles`	`menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `none`, `presentation`, `radio`, `separator`, `tab`, `treeitem`