HTML / HTML Tags

HTML <Li> Tag

Oct 12, 2022
2 min read
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>

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>

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes