❮ Previous Next ❯

HTML <li> tag

The <li> tag is used to make list item. Each <li> element defines one list. It must be used within a list container. The container may be <ol>, <ul> or <menu> (rarely used).

Type: Block Element

Syntax of <li> tag

<li> List 1 </li>
<li> List 2 </li>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<li> Yes Yes Yes Yes Yes
<li> tag can't be used alone without any container tags.

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3> Example of un-order list </h3>
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
<h3> Example of order list </h3>
<ol>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ol>
</body>
</html>
Run The code »

Output on the browser

Example of un-order list

  • List 1
  • List 2
  • List 3

Example of order list

  1. List 1
  2. List 2
  3. List 3

Attributes of <li> tag

Attribute Value Note
type 1 (Default value of <ol> tag)
A
a
I
i
disk (●) (Default value of <ul> tag)
square(■)
circle (○)		 It specifies which bullet type will be displayed.
value number It specifies the counter value of a list applicable only for <ol>
Or It allows us to give custom serial number of any list.

Example of type attribute (Obsolete)

<ol>
  <li type="A">List 1</li>
  <li type="A">List 2</li>
</ol>
<ul>
  <li type="disk">List 1</li>
  <li type="disk">List 2</li>
</ul>

Modern CSS replacement

<ol style="list-style-type: decimal;">
  <li>List 1</li>
  <li>List 2</li>
</ol>
<ul style="list-style-type: disk;">
  <li>List 1</li>
  <li>List 2</li>
</ul>

Old type values vs CSS replacement

Old type value CSS replacement
1 list-style-type: decimal;
A list-style-type: upper-alpha;
a list-style-type: lower-alpha;
I list-style-type: upper-roman;
i list-style-type: lower-roman;
disk (●) list-style-type: disk;
circle (○) list-style-type: circle;
square (■) list-style-type: square;

Example of using value attribute

The value attribute is valid inside the <ol> tag and, it has no effect on <ul> tag

<ol>
  <li>HTML</li>
  <li value="6">CSS</li>
  <li>JavaScript</li>
</ol>

The above list will display in the sequence 1,6,7 not 1,2,3.
This attribute helps in making custom sequence number and, in restarting the sequence from a specific number.

More reference

You can make nested list or multi-level list as shown in below. 

<h3> Programming language </h3> 
<ul>

  <li> HTML
    <ol>
      <li> Elements </li>
      <li> Tags </li>
      <li> Attributes & so on </li>
    </ol>
  </li>

  <li> CSS </li>
  <li> JavaScript </li>

</ul>

Default CSS property of <li> tag

li {
  display:list-item;
}
❮ Previous Next ❯