W3docs
en
Log in

HTML <li> Tag

The <li> tag defines the list items in HTML. Tag description, attributes and examples.

The HTML <li> tag defines separate items in an HTML List. The <ul> and the <ol> tags define unordered and ordered lists respectively. The <menu> tag defines the context menu. List items are usually displayed using bullet points in menus and unordered lists. In ordered lists, they are usually displayed with a number or letter on the left side.

li tag example

Syntax

The <li> tag comes in pairs. The content is written between the opening (<li>) and closing (</li>) tags. The <li> tag is a flow content element; it starts on a new line and takes up the full width available.

Example of ordered and unordered lists:

Menu list — Example of the HTML <li> Tag — W3Docs

<!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>
Try it Yourself »

The value Attribute

The value attribute specifies a number for a list item. It is used only with the <li> element inside an ordered list. Note that in modern HTML5, the start attribute on the <ol> element is preferred for controlling the list's starting number.

Danger

The value of the value attribute must be a valid integer.

Example of the value attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <ol>
      <li value="5">Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
  </body>
</html>
Try it Yourself »

Styling List Item Marker

To style the <li> element, you can use the CSS list-style, list-style-type, list-style-image, and list-style-position properties.

Example of styling list item marker:

list-style-type property

<!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>
Try it Yourself »

You can replace bullet points with an image using the CSS list-style-image property.

Example of image marker:

list-style-image property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: url("https://www.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
      }
    </style>
  </head>
  <body>
    <h2>List-style-image property example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>
Try it Yourself »

CSS list-style-position property specifies whether the list marker should appear inside or outside the list-item box.

Example of inside and outside positioning of a marker:

list-style-position property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inside {
        list-style-position: inside;
      }
      li {
        border: 1px solid #666;
        padding: 5px;
      }
      .outside {
        list-style-position: outside;
      }
      li {
        border: 1px solid #666;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "inside".</p>
    <ul class="inside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
    <p>Here the list-style is positioned "outside".</p>
    <ul class="outside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>
Try it Yourself »

Attributes

AttributeValueDescription
type1, A, a, I, i, disc, square, circleDefines the bullet type for ordered or unordered lists. This attribute is obsolete in HTML5. Use the CSS list-style-type or list-style-image properties instead.
valuenumberSpecifies the numeric value of the list item. You can use negative values. It works only with the <li> element inside an ordered list.

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

How to style an HTML <li> Tag

{
    "tag_name": "li"
}

Practice

Practice

What does the HTML <li> tag define?