HTML <li> Tag
Unleash the Power of HTML Tag Li – Boost Your Website’s Impact! Assuming that it will meet the learning needs.
The HTML tag <li> tag is used to create a list item in an ordered or unordered list.
Here are two HTML lists, one ordered (<ol>) and one unordered (<ul>):
Example:
The value attribute can be used in an ordered list as follows:
Example:
You can set different types of list styles through CSS:
Example:
In order to make a nested list, you need to create a list within a list:
Example:
Make a nested list that is more complex:
Example:
Here is another example of li tag:
Example:
Tag Li Usage
A list item is specified by the HTML Tag li <li> OR li class html.
Tag li <li> is placed between ordered lists(<ol>), unordered lists <ul>, and in menu lists <menu>.
List items are generally shown with bullet points in <ul> and <menu>.
The list items in <ol> are generally represented with numbers or letters.
Here are some common uses of the li tag in HTML:
- li tags are often used to create navigation menus on websites. Each menu item is typically an li tag, and the entire menu is enclosed in a ul or ol tag.
- li tags can be used to create to-do lists or task lists, with each item representing a task that needs to be completed.
- E-commerce websites often use li tags to create lists of products or services, with each li tag representing a product or service that can be purchased.
- li tags can be used to break down recipe instructions into steps, with each li tag representing a step in the recipe.
- Testimonials on a website can be displayed as a list of li tags, with each tag representing a testimonial from a different customer.
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
Attributes
| Attribute | Value | Overview |
|---|---|---|
| value | number | For all <ol> lists merely. Sets the start value of a list item. Based on that number, the following items will be added to the list |
Attributes
Global
In HTML, the Tag <li> is also compatible with Global Attributes.
Event
In HTML, the Tag <li> is also compatible with Event Attributes.<!–
Advertisement
–><!–
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
–>
Predefined CSS
The following values are set by default for the <li> element in almost all browsers:
li {
display: list-item;
}Advantages of Tag Li
Here are some advantages of using the li tag in HTML:
- The li tag is simple to use and requires only basic knowledge of HTML. It is used to create both ordered lists (using the ol tag) and unordered lists (using the ul tag).
- The li tag is highly customizable, allowing you to change the appearance of your list items using CSS. You can change the font, size, color, and other styling attributes.
- The li tag is semantic, meaning it provides meaning to your content. By using li to structure your lists, you are making it clear to search engines and other web tools that the content is a list and that each item in the list is distinct.
- The li tag is also helpful for accessibility, as it can be used to create lists that are easy to navigate for users who rely on screen readers or other assistive technologies.
