Do you think IIT Guwahati certified course can help you in your career?
Introduction
The <li> tag in HTML is used to define a list item within ordered, unordered, or menu lists. It plays an essential role in structuring content, especially when creating lists for menus, navigation bars, or any grouped information. Each <li> element represents a single item in the list, and its appearance depends on whether it belongs to an ordered list (<ol>), an unordered list (<ul>), or a menu list (<menu>).
In this article, you will learn about the <li> tag, its syntax, attributes, and how to use it effectively in HTML to create well-structured and readable lists for your web projects.
Definition and Usage
The `<li>` tag in HTML is used to define a list item. It is always nested inside either an ordered list (`<ol>`) or an unordered list (`<ul>`). The `<li>` tag itself doesn’t do much on its own, but when combined with `<ol>` or `<ul>`, it becomes a powerful tool for organizing content.
Ordered Lists (`<ol>`)
An ordered list is used when the sequence of items matters. For example, if you’re writing steps for a recipe or ranking items, you’d use an ordered list. Each `<li>` inside an `<ol>` is automatically numbered by the browser.
Unordered Lists (`<ul>`)
An unordered list is used when the order of items doesn’t matter. For example, a shopping list or a list of features in a product. Each `<li>` inside a `<ul>` is displayed with a bullet point by default.
Key Points to Remember
1. The `<li>` tag must be placed inside `<ol>` or `<ul>`.
2. You can add text, images, links, or even other HTML elements inside an `<li>`.
3. The `<li>` tag supports global attributes like `class`, `id`, & `style`.
Syntax of <li> Tag
The <li> tag is used within list elements like <ul> (unordered list) or <ol> (ordered list). Its basic syntax is:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Explanation:
The <ul> or <ol> tags define the type of list (unordered or ordered).
Each <li> tag represents a list item.
The text between the opening <li> and closing </li> represents the content of that list item.
Attributes of <li> Tag
The <li> tag has specific attributes that control its behavior or appearance.
Type Attribute
The type attribute specifies the style of bullet or number for the list item. It can be used with the <ol> or <ul> parent tags. The common values are:
disc (default for unordered lists)
circle
square
For ordered lists:
1 (default: numbers)
A (uppercase letters)
a (lowercase letters)
I (uppercase Roman numerals)
i (lowercase Roman numerals)
Example of Type Attribute in Unordered List
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered List Example</title>
</head>
<body>
<h1>Unordered List with Circle Bullets</h1>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Output:
Value Attribute
The value attribute sets a custom number or position for a specific list item in an ordered list.
No, the <li> tag must always be nested inside <ul> or <ol> elements to define the context of the list.
What is the default type for an unordered list using <li>?
The default type is disc, which displays bullet points.
Can I use CSS to style the <li> tag?
Yes, CSS can be used to customize the appearance of list items, including their bullet style, font, color, and more.
Conclusion
The <li> tag is a fundamental part of HTML, enabling developers to create lists that enhance the structure and readability of web pages. Whether it's a simple grocery list or a complex nested list, the <li> tag is versatile and easy to use. By mastering its attributes like type and value, you can add both functionality and style to your lists.
519+ registered 
