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.

Browser Support

How to create HTML <li> Tag

Example of The ol and ul elements.

index.html

Example: HTML

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

<p>The ul element defines an unordered list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Output should be:

How to create HTML <li> value Attribute

Use of the value attribute in an ordered list.

Definition and Usage

The value attribute sets the value of a list item. The following list items will increment from that number.

The value must be a number and can only be used in ordered lists (<ol>).

Browser Support

Syntax

Attribute Values

Value	Description
number	Specifies the value of the list item

index.html

Example: HTML

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

Output should be:

How to Use of the value attribute in an ordered list

Use of the value attribute in an ordered list.

index.html

Example: HTML

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

Output should be:

How to Set different list style types (with CSS)

Define list type with CSS

index.html

Example: HTML

<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>

Output should be:

How to Create a list inside a list (a nested list)

A list inside another list.

index.html

Example: HTML

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

Output should be:

How to Create a more complex nested list

A list in a list in a list.

index.html

Example: HTML

<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>

Output should be:

How to set Default CSS Settings of <li> element

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

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>
<style>
li {
  display: list-item;
}
</style>

<h1>The ol and ul elements</h1>

<p>The ol element defines an ordered list:</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<p>The ul element defines an unordered list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Output should be:

Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference