Open In App

HTML <li> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The <li> tag in HTML is used to define the list of items in an HTML document. It is used within an Ordered List <ol> or Unordered List <ul>. Within the <ul> and <menu> elements, the list items are typically shown with bullet points.

Contrastingly, within the <ol> element, the list items are typically displayed with numbers or letters. The <li> tag requires a starting and end tag. The <li> tag also supports the Global Attributes and Event Attributes in HTML.

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:

Attribute Values

Description

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.

HTML <li> Tag Examples

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

HTML
<!DOCTYPE html>
<html>

<body>
    <ol>
        <li>Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ol>
</body>

</html>

Output: 

html-li-tag-ordered-list-example

HTML Li Tag ordered list example

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

HTML
<!DOCTYPE html>
<html>

<body>
    <ul>
        <li>Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>

</html>

Output:

html-li-tag-un-ordered-list-example

HTML li tag unordered list example

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

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

</html>

Output:

html-li-tag-ordered-list-with-custom-value-example

HTML li tag ordered list with custom value

HTML li Tag Use cases

1. How to create an unordered list in HTML ?

To create an unordered list in HTML, use the <ul> tag and enclose each list item within <li> tags. This structure creates a bulleted list on the webpage.

2. How to define a list item in HTML5?

In HTML5, a list item is defined using the <li> tag, which is placed within either an ordered list (<ol>) or an unordered list (<ul>) element.

3. How to create bullets using <li> elements ?

To create bullets using <li> elements in HTML, enclose the <li> tags within either an <ul> (unordered list) or <ol> (ordered list) element. The browser automatically adds bullets for each list item.

4. What is nesting of list & how to create the nested list in HTML ?

Nesting of lists refers to placing one list inside another. To create a nested list in HTML, enclose an <ul> or <ol> element within an <li> element of another list.

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

The browser supported by HTML li tag are listed below:


Last Updated : 12 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads