HTML <li> Element

HTML <li> Element

The HTML <li> element represents an individual item within a list. It is used as a child of an ordered <ol> list, an unordered <ul> list, or a <menu> list.

Syntax

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Each <li> element represents one item in the surrounding list. List items can contain text as well as other HTML content, including links, paragraphs, images, and nested lists.

Attributes

The <li> element supports the global HTML attributes and the following element-specific attribute:

Example

This example demonstrates <li> elements in both unordered and ordered lists. The unordered list uses bullets, while the ordered list displays items in a numbered sequence.

Usage Notes

Use <li> elements as items within <ol>, <ul>, or <menu> elements. The surrounding list element determines the type and meaning of the list.

Use an <ol> when the order of the items is meaningful, such as instructions, rankings, or steps in a procedure. Use a <ul> when the order of the items is not important.

The value attribute can be used on an <li> inside an ordered list to assign a specific number to that item. The value must be an integer, and subsequent items continue numbering from that value unless another value changes the sequence.

A list item can contain more than simple text. It may contain links, paragraphs, images, or other flow content, including another list when a nested list structure is needed.

The closing </li> tag can be omitted in certain HTML markup situations, but writing the closing tag explicitly generally makes the structure easier for beginners to read and maintain.

The obsolete type attribute should not be used on <li>. Use CSS properties such as list-style-type when the visual appearance of list markers needs to be changed.

Accessibility

Use proper list markup when a group of items forms a meaningful list. The combination of <ol> or <ul> with <li> elements allows assistive technologies to identify the content as a list and communicate its structure to users.

Do not create visual lists using only line breaks, paragraphs, or manually typed bullet characters when the content is structurally a list. Semantic list markup provides information about the relationship between the items.

When using an ordered list, make sure the sequence has meaning beyond its visual numbering. This helps users understand why the order of the items is important.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

For detailed browser compatibility information, see Can I Use: HTML <li> Element .

Related Elements

<ul> - Represents an unordered list of items where the sequence is not important.

<ol> - Represents an ordered list of items where the sequence is meaningful.

<menu> - Represents a list of items, commonly used for a group of commands or options.

<dl> - Represents a description list containing groups of terms and descriptions.

Specifications

HTML Living Standard: The <li> Element