HTML <li> Tag

The <li> tag defines separate items in an HTML List. The <ul> and the <ol> tags define unordered and ordered lists correspondingly. The <menu> tag defines the context menu.

Syntax

The <li> tag comes in pairs. The closing tag isn’t required in the HTML5 specification.

The <li> tag is a block-level element, it starts on a new line and takes up the full width available.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>Ordered list</p>
    <ol>
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ol>
    <p>Unordered list</p>
    <ul>
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>

Result

For styling the <li> tag use the list-style-type property.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.a {
       list-style-type: circle;
      }
      ul.b {
        list-style-type: square;
      }
      ol.c {
        list-style-type: upper-roman;
      }
      ol.d {
        list-style-type: lower-alpha;
      }
    </style>
  </head>
  <body>
    <h1>The list-style-type Property</h1>
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
  </body>
</html>

Result

Attributes

Attribute Value Description
type 1
A
a
I
i
disc
square
circle
Defines the bullet type of ordered or unordered list. The attribute isn’t used anymore. We recommend using the CSS list-style-type or list-style-image property instead, by the help of which you can use images instead of bullets.
value number Specifies the number, from which the order list will start. You can use negative values. Works only with the ordered list.

The <li> tag supports the Global Attributes and the Event Attributes.

Browser support