HTML <li> Tag

The HTML <li> tag is used to define a list item in ordered, unordered, or menu lists. It is a child of the <ul> (unordered list), <ol> (ordered list), or <menu> elements. List items are usually displayed with bullet points in unordered lists or numbers in ordered lists.

The <li> tag allows you to create structured lists, making your content easier to read and navigate.

Basic Syntax of HTML <li> Tag

The basic structure of a list using the <li> tag is:

</>
Copy
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Each <li> element represents an individual item in the list.

Attributes of HTML <li> Tag

  • value: Specifies the value of a list item in an ordered list. This attribute is only valid inside <ol>.
  • Global Attributes: Supports all global attributes, such as id, class, and style.
  • Event Attributes: Supports event attributes like onclick, onmouseover, and onfocus.

Example of HTML <li> Tag with an Unordered List

Here’s an example of an unordered list using the <li> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Shopping List</h2>
        <ul>
            <li>Apples</li>
            <li>Bananas</li>
            <li>Cherries</li>
        </ul>
    </body>
</html>
Example of HTML <li> Tag with an Unordered List

Explanation: The list is displayed with bullet points, indicating an unordered structure.

Example of HTML <li> Tag with an Ordered List

Here’s an example of an ordered list using the <li> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Steps to Bake a Cake</h2>
        <ol>
            <li>Preheat the oven to 350°F.</li>
            <li>Mix the ingredients.</li>
            <li>Pour the batter into a pan.</li>
            <li>Bake for 30 minutes.</li>
        </ol>
    </body>
</html>
Example of HTML <li> Tag with an Ordered List

Explanation: The list is displayed with numbers, indicating an ordered structure.

Example of the value Attribute in Ordered Lists

The value attribute can be used to set a custom value for list items in an ordered list:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Top 3 Movies</h2>
        <ol>
            <li value="5">The Shawshank Redemption</li>
            <li value="2">The Godfather</li>
            <li value="10">The Dark Knight</li>
        </ol>
    </body>
</html>
Example of the value Attribute in Ordered Lists

Explanation: The value attribute overrides the default numbering for the list items.

Styling the <li> Tag with CSS

You can customize the appearance of list items using CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            ul {
                list-style-type: square;
                padding: 0;
            }

            li {
                color: #007BFF;
                font-size: 16px;
                margin: 5px 0;
            }
        </style>
    </head>
    <body>
        <h2>Features</h2>
        <ul>
            <li>Responsive Design</li>
            <li>Cross-Browser Compatibility</li>
            <li>SEO Optimization</li>
        </ul>
    </body>
</html>
Styling the <li> Tag with CSS

Result: The unordered list appears with square bullets, blue text, and customized font size for the list items.

Practical Applications of the <li> Tag

  • Navigation Menus: Use <li> inside <ul> to create navigation menus.
  • To-Do Lists: Represent tasks or items in a to-do list.
  • Step-by-Step Instructions: Outline sequential instructions using ordered lists.
  • Grouping Information: Organize related information into clear, readable groups.