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 a single item inside an HTML list. It is a child of the <ul> (unordered list), <ol> (ordered list), or <menu> elements. In unordered lists and menus, items are displayed with a bullet point by default. In ordered lists, each item gets a number or letter on the left side that increases automatically.

This page covers the <li> syntax, the value attribute, how to style list markers with CSS, and accessibility notes for screen readers.

Syntax

A list item is written between the opening <li> and closing </li> tags:

<li>List item text</li>

<li> is a flow-content element: each item starts on a new line and takes up the full width available.

In HTML5 the closing </li> tag is optional — the browser closes the element automatically when it reaches the next <li> or the end of the parent list. Including </li> is still recommended for readability and to avoid surprises in tooling.

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 sets the ordinal number of a list item. It works only on <li> elements inside an ordered (<ol>) list and is ignored in unordered lists.

Setting value does not just change that one item — numbering continues from it. In the example below the first item is forced to 5, so the items that follow become 6 and 7 automatically:

5. Coffee
6. Tea
7. Coca Cola

To change only where the whole list starts, prefer the start attribute on the <ol> element. Use value when you need to override the number of a specific item in the middle of a list.

Danger

The value of the value attribute must be a valid integer. Negative values are allowed.

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://api.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>
      li {
        border: 1px solid #666;
        padding: 5px;
      }
      .inside {
        list-style-position: inside;
      }
      .outside {
        list-style-position: outside;
      }
    </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.

Targeting <li> with CSS

Besides the marker, you can style the item box itself like any other element. Use the li type selector to reach every list item, or scope it to a specific list with a class or descendant selector:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* All list items on the page */
      li {
        padding: 8px;
        line-height: 1.6;
      }
      /* Only items inside lists with class "menu" */
      ul.menu > li {
        list-style: none;
        border-bottom: 1px solid #ddd;
      }
      /* Style the marker color separately */
      li::marker {
        color: #0a7cff;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </body>
</html>

The ::marker pseudo-element styles the bullet or number without affecting the item's text — handy for recoloring or resizing markers.

Accessibility

Screen readers treat lists as a group: they announce the list, the total number of items, and each item's position (for example, "list, 3 items, item 1"). This context helps users understand structure, so keep related items inside one <ul> or <ol> rather than faking a list with <div>s and line breaks.

Warning

Removing bullets with list-style: none can make Safari's VoiceOver stop recognizing the element as a list, so the item count is no longer announced. If you remove markers for navigation menus, add role="list" back to the <ul> to preserve list semantics.

<ul role="list" style="list-style: none;">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>
  • <ul> — unordered (bulleted) list
  • <ol> — ordered (numbered) list
  • <menu> — a list of commands or menu items
  • HTML Lists — overview of all list types

Practice

Practice
What does the HTML li tag define?
What does the HTML li tag define?
Practice
In an ordered list, what happens when you set value=5 on the first li item?
In an ordered list, what happens when you set value=5 on the first li item?
Was this page helpful?