HTML <Li> Tag

Definition

The <li> tag is used to represent an item in a list. It should be a child of an <ol> element (numbered list) or <ul> element (bullet list).

Examples

Ordered List

<ol>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ol>

Unordered List

<ul>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ul>

Usage

• The <li> element must be used inside <ol>, <ul> elements. There is a new <menu> list in an experimental state, but it is not supported by most browsers yet.
• The end tag may be omited if the <li> element is immediately followed by another <li> element.
• If the parent element is an <ol> the <li> has an ordinal value.
• If the <li> element is a child of an <ol> element the value attribute may be used to set the ordinal value.
• The type attribute, whose usage with this element is now depreciated, was used to change the numbering type. You should now use the CSS list-style-type property. The following are the most commonly used:

  <ul>
    <li style="list-style-type:disc;">List item (default value)</li>
    <li style="list-style-type:circle;">List item</li>
    <li style="list-style-type:square;">List item</li>
    <li style="list-style-type:decimal;">List item</li>
    <li style="list-style-type:decimal-leading-zero;">List item</li>
    <li style="list-style-type:lower-roman;">List item</li>
    <li style="list-style-type:upper-roman;">List item</li>
    <li style="list-style-type:lower-greek;">List item</li>
    <li style="list-style-type:lower-alpha;">List item</li>
    <li style="list-style-type:lower-latin;">List item</li>
    <li style="list-style-type:none;">List item</li>
  </ul>

  Try it Yourself

Attributes

The <li> element supports the Global Attributes, as well as the following:

• value

  The value attribute can be used if the <li> is a child of an <ol> element. This attribute indicates the current ordinal value of the list item. It must be a number, even if a list-style-type displays roman numerals. This allows you to start a list with a specified number. For example:

  <ol>
    <li value="2">second item</li>
    <li>third item</li>
    <li>fourth item</li>
  </ol>

  Try it Yourself

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile