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>):


<!DOCTYPE html> <html> <body> <ol> <li>Cookies</li> <li>Cake</li> <li>Bread</li> </ol> <ul> <li>Cookies</li> <li>Cake</li> <li>Bread</li> </ul> </body> </html>

The value attribute can be used in an ordered list as follows:


<!DOCTYPE html> <html> <body> <ol> <li value="50">Cookies</li> <li>Cake</li> <li>Bread</li> <li>Cold Drink</li> <li>Fresh Juice</li> <li>Cola</li> </ol> </body> </html>

You can set different types of list styles through CSS:


<!DOCTYPE html> <html> <body> <ol> <li>Cookies</li> <li style="list-style-type:lower-alpha">Cake</li> <li>Bread</li> </ol> <ul> <li>Cookies</li> <li style="list-style-type:square">Cake</li> <li>Bread</li> </ul> </body> </html>

In order to make a nested list, you need to create a list within a list:


<!DOCTYPE html> <html> <body> <ul> <li>Cookies</li> <li>Cake <ul> <li>Chocolate Cake</li> <li>Fruit Cake</li> </ul> </li> <li>Bread</li> </ul> </body> </html>

Make a nested list that is more complex:


<!DOCTYPE html> <html> <body> <ul> <li>Cookies</li> <li>Cake <ul> <li>Chocolate Cake</li> <li>Fruit Cake</li> </ul> </li> <li>Bread</li> </ul> </body> </html>

Here is another example of li tag:


<!DOCTYPE html> <html> <head> <style> li{ color: aquamarine; text-decoration: none; } </style> </head> <body> <ul id="directory-list"> <li>HTML</li> <li>CSS</li> <li>PYTHON </li></ul> </body> </html>

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.
Advice: Lists can be styled via CSS.

Browser Compatibility



valuenumberFor 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



In HTML, the Tag <li> is also compatible with Global Attributes.


In HTML, the Tag <li> is also compatible with Event Attributes.<!–



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.
If you found this article meaningful then do leave your reaction below in order to appreciate our efforts or to suggests us with some improvements for the betterment of this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *