<li> : List Item element

by

Introduction

The <li> (list item) element in HTML is used to define individual items within ordered lists (<ol>) or unordered lists (<ul>). It is a container element that holds the content of each list item. Here’s how it is typically used:

Example with Unordered List (<ul>):

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>        
  </body>
  </html>

Output :

In this example, each <li> element represents an item in an unordered list.

Example with Ordered List (<ol>):

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <ol>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ol>    
  </body>
  </html>

Output :

Here, each <li> element represents an item in an ordered list, where the order of items matters.

Nested Lists:

Lists can also be nested, where an <ul> or <ol> element is placed inside an <li> element to create a sublist:

<ul>
  <li>Main item 1</li>
  <li>Main item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Main item 3</li>
</ul>

In this example, “Main item 2” has a nested unordered list as a sublist.

The <li> element is a fundamental building block for creating lists in HTML, and it is essential for conveying structured information on a webpage. Lists can be styled using CSS to achieve various visual presentations, such as changing bullet points or numbering styles.

Leave a Comment