HTML - <li>Tag

In an HTML, the <li> tag is used to represent an item in a list. It should be rooted in the parent elements, which are: an unordered list <ul>, an ordered list <ol>, or menus <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.

It includes the global attributes as follows −

  • <value> − It is an integer attribute indicating the current ordinal value of the list defined by the <ol> tag. The only allowed values for this element are numbers.
  • <type> − It is a character attribute that indicates the numbering type.

Following are the various numbering types of the type attribute −

  • type ='a' − for lowercase letters.
  • type ='A' − for uppercase letters.
  • type ='i' − for lowercase roaman numerals.
  • type ='I' − for uppercase roman numerals.
  • type ='1' − for numbers.

Syntax

Following is the syntax of the <li> tag −

<parentelement>
   <li></li>
   <li></li>
   ….
   <parentelement>

Example

In the following program, 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 Description lists</title>
</head>
<body>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
</body>
</html>

When we run the above code, it will generate an output consisting of the list items displayed on the webpage.

Example

Following is another example of <li> tag. Here, we are creating an ordered list using <ol> tag, and giving the type attribute value as type = 'I'. Then, we create multiple <li> tags within a <ol> tag to display a list of items in Roman numeral format.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Description lists</title>
</head>
<body>
   <ol type='I'>
      <li>Red</li>
      <li>Black</li>
      <li>White</li>
      <li>Pink</li>
   </ol>
</body>
</html>

On running the above code, the output window will pop up, consisting of list items in the roman numerical format on the webpage.

Example

In this example, we are creating an ordered list using the <ol> tag. Then, we create multiple <li> tags within the <ol> tag. We use the value attribute with the value="3" within the <li> tag to give the custom value to the ordered list.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Description lists</title>
</head>
<body>
   <ol type='i'>
      <li value="3">Red</li>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>APex</li>
   </ol>
</body>
</html>

When we run the above code, it will generate an output displaying the list items starting with a value 3 in roman numeral format on the webpage.

Example

In this program, we are creating an unordered list using the <ul> tag and create multiple <li> tags within the <ul> tag to display the list items in bullet points.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Description lists</title>
</head>
<body>
   <ul>
      <li>Red</li>
      <li>Apple</li>
      <li>Mango</li>
      <li>Orange</li>
      <li>Grapes</li>
   </ul>
</body>
</html>

On running the above code, it will generate an output displaying the list items on the webpage.

html_tags_reference.htm
Advertisements