HTML <li> Tag

The HTML <li> tag is used to define individual list items within ordered lists (<ol>), unordered lists (<ul>), or menu lists (<menu>). Each item inside a list is enclosed in the <li> tag, which helps structure the content in a clear, organized way. Whether you are creating a numbered list, a bullet point list, or a list within a navigation menu, the <li> tag is an essential part of the process.

Syntax of the <li> Tag

The syntax of the <li> tag is simple and easy to use. It is placed inside list tags such as <ul>, <ol>, or <menu>, and each list item is defined by the <li> tag.

Syntax Example:

html
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

In this example, each item in the list is enclosed in <li> tags, and the list itself is contained within an unordered list (<ul>), which typically displays bullet points.

Attributes of the <li> Tag

The HTML <li> tag supports global attributes and several list-specific attributes that allow developers to further customize their lists. Some of the common attributes are:

AttributeDescription
value (for <ol>)Specifies the value of the list item in an ordered list.
type (for <ol>)Specifies the numbering type (e.g., "1" for numbers, "a" for lowercase letters).
global attributesIncludes standard global attributes like class,id,style,title,lang and more.

Example of the value attribute:

html
<ol>
    <li value="10">Item with Value 10</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

In this example, the first list item starts with the value 10, and the subsequent items follow in sequence.

Examples of HTML <li> Tag

Example 1: Unordered List with the <li> Tag

html
<!DOCTYPE html>
<html>
<head>
    <title>Unordered List Example</title>
</head>
<body>
    <h2>Popular Programming Languages</h2>
    <ul>
        <li>Python</li>
        <li>JavaScript</li>
        <li>Java</li>
        <li>C++</li>
    </ul>
</body>
</html>

In this example, the <ul> tag creates an unordered list with each programming language item enclosed within an <li> tag. The list is displayed with bullet points by default.

Example 2: Ordered List with the <li> Tag

html
<!DOCTYPE html>
<html>
<head>
    <title>Ordered List Example</title>
</head>
<body>
    <h2>Top 3 Movies of 2024</h2>
    <ol>
        <li>Movie 1</li>
        <li>Movie 2</li>
        <li>Movie 3</li>
    </ol>
</body>
</html>

In this example, the <ol> tag creates an ordered list, where each list item is numbered sequentially. The <li> tag defines each item, and the list is displayed with numbers by default.

FAQs About HTML <li> Tag

Q1: What is the purpose of the HTML <li> tag?
A: The <li> tag defines individual items in an ordered list (<ol>), unordered list (<ul>), or menu list (<menu>). It helps organize content into a clear and accessible list structure.

Q2: Can the <li> tag be used outside of <ul>, <ol>, or <menu>?
A: No, the <li> tag must always be used inside list-related tags such as <ul>, <ol>, or <menu>. It cannot function as a standalone element.

Q3: Does the <li> tag improve SEO?
A: Yes, properly structured lists using the <li> tag contribute to better readability and SEO, as search engines favor well-organized and accessible content.

Q4: What are the different types of lists supported by the <li> tag?
A: The <li> tag supports ordered lists (<ol>), unordered lists (<ul>), and menu lists (<menu>), which display items in numbered, bulleted, or menu format, respectively.

Q5: Can the <li> tag have global attributes like class or id?
A: Yes, the <li> tag supports global attributes such as class, id,style and others for styling and identification purposes.

tools

HTML

Related Articles