Skip to content
Related Articles

Related Articles

Improve Article

HTML <li> Tag

  • Difficulty Level : Basic
  • Last Updated : 05 Feb, 2021

The <li> tag in HTML is used to define the list item in an HTML document. It is used within an Ordered List <ol> or Unordered List <ul>. The <li> tag requires a starting and end tag.
Note: The end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element.
 

Syntax: 

<li> List Items </li>

Attribute Value: 

value: The value attribute is used to specify the starting number of the list item. The list item starts from this number and increments its value with every addition of items to it. The value attribute only works for the ordered lists i.e. <ol> tag.

Example 1: This example using <li> tag inside Ordered Lists. 



html




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
      
    <h2>HTML li Tag</h2>
  
    <ol>
        <li>Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ol>
</body>
  
</html>

Output: 
 

Example 2: This example using <li> tag with Unordered Lists.
 

html




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>HTML li Tag</h2>
  
    <ul>
        <li>Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>
  
</html>

Output:
 

Example 3: This example using <li> tag with value attribute to create lists.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>HTML li Tag</h2>
  
    <ol>
        <li value="5">Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ol>
</body>
  
</html>

Output:

Applying Styles to <li> Tag: Some CSS properties can also be used to style the <li> elements that are: list-style, list-style-image, list-style-position, and list-style-type. These properties can be directly applied to the <li> element although, they are usually applied to the parent element.

Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :