HTML <li> tag

HTML <li> tag : Definition


• The <li> tag is used to represent a list item in a HTML document.

• It should must be specified in a parent element such as an ordered list <ol>, an unordered list <ul>, or a menu <menu> etc.

• The <li> tag generally displayed in bullet points by default that can be modified using CSS.

Html <li> tag example: using unordered list <ul> element

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>I'm first list</li>
    <li>I'm second list</li>
    <li>I'm third list</li>
    <li>I'm four list</li>
    <li>I'm fifth list</li>
</ul>

</body>
</html>

Output:

The unordered list <ul> is generally displayed using bullet points.

  • This is first list
  • This is second list
  • This is third list
  • This is fourth list
  • This is fifth list


Html <li> tag example1: using ordered list <ol> element

<!DOCTYPE html>
<html>
<body>

<ol>
    <li>I'm first list</li>
    <li>I'm second list</li>
    <li>I'm third list</li>
    <li>I'm four list</li>
    <li>I'm fifth list</li>
</ol>

</body>
</html>

Output:

The ordered list <ol> is generally displayed in an ascending number or in a letter.

  1. This is first list
  2. This is second list
  3. This is third list
  4. This is fourth list
  5. This is fifth list


Html <li> tag example2: using ordered list <ol> element

<!DOCTYPE html>
<html>
<body>

<ol type="I">
    <li>I'm first list</li>
    <li>I'm second list</li>
    <li>I'm third list</li>
    <li>I'm four list</li>
    <li>I'm fifth list</li>
</ol>

</body>
</html>

Output:

The ordered list <ol> is displayed in type="I" roman number.

 
  1. This is first list
  2. This is second list
  3. This is third list
  4. This is fourth list
  5. This is fifth list


Html <li> tag example: using <menu> element

<!DOCTYPE html>
<html>
<body>

<menu>
    <li>I'm first list</li>
    <li>I'm second list</li>
    <li>I'm third list</li>
    <li>I'm four list</li>
    <li>I'm fifth list</li>
</menu>

</body>
</html>

Output:

The menu list <menu> is displayed by default in bullet points and it can be modified using CSS property.

  • This is first list
  • This is second list
  • This is third list
  • This is fourth list
  • This is fifth list