Learn HTML – Part 19 – li Tag – List Items Explained

The HTML li tag is used to define individual list items inside a list. It works together with the ul (unordered list) and ol (ordered list) tags.

Without the li tag, lists cannot display items properly.

What is the li Tag in HTML?

The li tag stands for List Item. It represents a single item inside a list container.

The li tag must always be placed inside:

• ul – Unordered List
• ol – Ordered List

Basic Syntax of li Tag

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

Each li creates one bullet or numbered item depending on the parent list type.

Example 1 – li inside ul

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
</ul>

Output:

• HTML
• CSS
• JavaScript

Example 2 – li inside ol

<ol>
   <li>Step One</li>
   <li>Step Two</li>
   <li>Step Three</li>
</ol>

Output:

1. Step One
2. Step Two
3. Step Three

Nesting Lists Using li

You can create nested lists by placing another ul or ol inside a li element.

<ul>
   <li>Frontend
       <ul>
           <li>HTML</li>
           <li>CSS</li>
       </ul>
   </li>
   <li>Backend</li>
</ul>

Output:

• Frontend
  • HTML
  • CSS
• Backend

Common Mistakes Beginners Make

• Using li outside ul or ol
• Forgetting to close the li tag
• Incorrect nesting of lists
• Placing block elements incorrectly inside li

Quick Summary

Conclusion

The HTML li tag defines individual items inside ordered and unordered lists.

It is one of the most commonly used tags in website navigation menus, sidebar widgets, and structured content sections.

What’s Next?

Now that you understand the li tag, the next step is learning about description lists using the dl, dt, and dd tags.

Next: Learn HTML – Part 20 – dl, dt, dd Tags – Description Lists →

Series: Learn HTML Series