HTML <li> Tag

The <li> tag creates a list item in a list element. Items in an unordered list (<ul>) appear with a bullet, and in an ordered list (<ol>) with a sequence number.

HTML Tag

Example

#

Three <li> elements with job titles in an ordered list (<ol>).

  1. Designers
  2. Developers
  3. Managers
<ol>
  <li>Designers</li>
  <li>Developers</li>
  <li>Managers</li>
</ol>
ol = ordered list
ul = unordered list
li = list item

Using <li>

To add items to a list in HTML you use the <li> (list item) tag.

This element must be placed inside a <ul> (unordered list), or an <ol> (ordered list).

Unordered lists display items with bullets. Ordered lists display items as a numeric sequence.

More Examples

An <ul> tag with 3 <li> elements and an <ol> tag with 4 <li> elements.

Project roles:
  • Designers
  • Developers
  • Managers

Project tasks:
  1. Design
  2. Develop
  3. Test
  4. Deploy
Project roles:
<ul>
  <li>Designers</li>
  <li>Developers</li>
  <li>Managers</li>
</ul>

<br />

Project tasks:
<ol>
  <li>Design</li>
  <li>Develop</li>
  <li>Test</li>
  <li>Deploy</li>
</ol>

Attribute for <li>

This table lists the <li> tag attribute.

Attribute Value Description
value number The value of the list item
id    identifier Defines a unique identifier for the li element.
class    classnames Sets one or more CSS classes to be applied to the li element.
style    CSS-styles Sets the style for the li element.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the li element is hidden.
title    text Sets a title that displays as a tooltip.

For additional global attributes see our Global Attributes List.


Did you know?

Did you know?

Styling numbers in an ordered list

The numbers on an <ol> element can be customized with CSS.

An <ol> element with custom <li> number styling.

  1. Designers
  2. Developers
  3. Managers
<style>
  ol.custom { list-style: none; counter-reset: resetter; }
  ol.custom li { counter-increment: resetter; }
  ol.custom li::before { content: counter(resetter) ". "; color: #ef4444; }
</style>

<ol class="custom">
  <li>Designers</li>
  <li>Developers</li>
  <li>Managers</li>
</ol>

List Tags

The <li> tag is part of a group of tags that are used to create lists (i.e. lists of items) on web pages. This group is referred to as the List tag group. Together, these tags allow you to create comprehensive HTML lists.

Below are the list tags.

Element Description
<ul> Creates an unordered, bulleted list
<ol> Creates a numerically or alphabetically ordered list
<li> Defines a list item. Used in <ol> and <ul> elements
<dl> Defines a description list
<dt> Adds a term or name to a <dl> element
<dd> Adds a description of a term or name to a <dl> element

Browser support

Here is when <li> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides