HTML - <li> Tag



HTML <li> tag is used to represent an item in a list. It should be rooted in the parent element <ul>, <ol>, or <menu>.

Items in unordered lists <ul> and in menus <menu> are displayed in bullet points, whereas in ordered lists, they are displayed in left-ascending counters that are letters, numbers, and Roman numerals.

Syntax

<li> item </li>

Attribute

HTML li tag supports Global and Event attributes of HTML. Accept a specific attribute as well which are listed below.

Attribute Value Description
value number Specifies the start value of a list item.

Examples of HTML li Tag

Bellow examples will illustrate the usage of li tag. Where, when and how to use li tag.

Creating ordered list using li Tag

In the following example, we are using <ol> tag to create an ordered list. Then, we create a <li> tag within the <ol> tag to display the list items in number format.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML li Tag</title>
</head>
<body>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
</body>
</html>

Creating unordered list using li Tag

In the following example, we are using <ul> tag to create an ordered list. Then, we create a <li> tag within the <ul> tag to display the list items in number format.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML li Tag</title>
</head>
<body>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ul>
</body>
</html>

Creating listed item with value Attribute

In the following example we will create a order list where the order list will start from 3rd.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML li Tag</title>
</head>
<body>
   <ol>
      <li value="3">HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
</body>
</html>

Supported Browsers

Tag Chrome Edge Firefox Safari Opera
li Yes Yes Yes Yes Yes
html_tags_reference.htm
Advertisements