The <li> tag in HTML is used to define a list item. It is one of the most commonly used tags because it works together with list containers like <ul> (unordered list) and <ol> (ordered list).
If you want to create lists on a webpage whether bullet points or numbered steps you must use the <li> tag. Without it, your lists will not display properly.
This guide explains everything you need to know about the <li> tag in a simple and practical way.
What Does the <li> Tag Do?
The <li> tag stands for “list item.” It represents a single item inside a list.
It is always used inside:
<ul>(unordered list)<ol>(ordered list)<menu>(less common)
Basic Example:
Output:
- HTML
- CSS
- JavaScript
Structure of the <li> Tag
The <li> tag cannot stand alone. It must be inside a list container.
Structure:
Key Points:
<li>defines each item- Must be inside
<ul>or<ol> - Can contain text, links, images, or other HTML elements
Using <li> in an Ordered List
When used inside <ol>, the <li> items are automatically numbered.
Example:
Output:
- Open your laptop
- Start coding
- Build a project
Using <li> in an Unordered List
Inside <ul>, <li> items display with bullet points.
Example:
What Can Go Inside <li>?
The <li> tag is very flexible. You can place many types of content inside it.
1. Text
2. Links
3. Images
4. Other HTML Elements
Nested Lists with <li>
You can create lists inside list items. This is called nesting.
Example:
Output:
- Frontend
- HTML
- CSS
- Backend
Styling <li> with CSS
You can style list items using CSS to improve appearance.
Example:
Adding Space Between Items
Removing Default Bullets
Using <li> for Navigation Menus
Most website navigation menus are built using <li> inside a <ul>.
Example:
CSS Example:
This creates a horizontal navigation menu.
Real-Life Use Cases of <li>
The <li> tag is used in many real-world scenarios:
1. Navigation Menus
2. Feature Lists
3. Step-by-Step Guides
4. Product Listings
5. FAQs
Example:
Accessibility Benefits
Using <li> properly improves accessibility:
- Screen readers can read lists clearly
- Helps users understand grouped content
- Improves navigation for assistive tools
Avoid replacing <li> with generic tags like <div> when creating lists.
Common Mistakes to Avoid
1. Using <li> Outside a List
❌ Wrong
Correct:
2. Forgetting Closing Tags
❌ Wrong
Always close tags properly:
3. Overloading with Content
Keep list items simple and readable. Avoid putting too much content inside a single <li>.
Practice Example
Try this simple exercise:
Best Practices
- Always use
<li>inside<ul>or<ol> - Keep items short and clear
- Use CSS for styling
- Avoid unnecessary nesting
- Write clean and readable HTML
The <li> tag is a fundamental part of HTML that helps you create structured and organized content. Whether you are building a navigation menu, a list of features, or a step-by-step guide, <li> plays a key role.
It may look simple, but it is powerful when used correctly. Combined with <ul> and <ol>, it allows you to present information clearly and improve user experience.
Remember:
<li>defines list items- Must be inside a list container
- Can hold different types of content
- Works with CSS for styling
Once you understand the <li> tag, you will be able to create clean and professional-looking lists on any webpage.