The Speed Coding

HTML <li> Tag


Example

One ordered (<ol>) and one unordered (<ul>) HTML list:

<ol>
  <li>Coffee</li >
  <li>Tea</li >
  <li>Milk</li >
</ol>

<ul>
  <li>Coffee</li >
  <li>Tea</li >
  <li>Milk</li >
</ul>

Definition and Usage

The <li> tag defines a list item.

The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

In <ul> and <menu>, the list items will usually be displayed with bullet points.

In <ol>, the list items will usually be displayed with numbers or letters.

Tip: Use CSS to style lists.


Browser Support

Element
<li> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
value number Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number

Global Attributes

The <li> tag also supports the Global Attributes in HTML.


Event Attributes

The <li> tag also supports the Event Attributes in HTML.


More Examples

Example

Use of the value attribute in an ordered list:

<ol>
  <li value="100" > Coffee</li>
  <li>Tea</li >
  <li>Milk</li >
  <li>Water</li >
  <li>Juice</li >
  <li>Beer</li >
</ol>

Example

Set different list style types (with CSS):

<ol>
  <li > Coffee</li>
  <li style="list-style-type:lower-alpha">Tea</li >
  <li>Milk</li >
</ol>

<ul >
  <li>Coffee</li >
  <li style="list-style-type:square">Tea</li >
  <li>Milk</li >
</ul >

Example

Create a list inside a list (a nested list):

<ul>
  <li > Coffee</li>
  <li > Tea
    <ul>
      <li>Black tea</li >
      <li>Green tea </li>
    </ul>
  </li >
  <li>Milk</li >
</ul >

Example

Create a more complex nested list:

<ul>
  <li > Coffee</li>
  <li > Tea
    <ul>
      <li>Black tea</li >
      <li>Green tea
        <ul>
          <li>China</li >
          <li>Africa</li >
        </ul>
      </li>
    </ul >
  </li >
  <li>Milk</li >
</ul>

Related Pages

HTML tutorial: HTML Lists

HTML DOM reference: Li Object

CSS Tutorial: Styling Lists


Default CSS Settings

Most browsers will display the <li> element with the following default values:

li {
  display: list-item;
}