HTML <li> Tag – List Item
📌 Introduction
The <li> tag represents a list item in HTML.
It is used inside:
<ul>(unordered lists)<ol>(ordered lists)
Each <li> represents one item in a list.
🧱 Syntax
<li>Item</li>
💡 Example with <ul>
<!DOCTYPE html>
<html>
<head>
<title>LI Example</title>
</head>
<body>
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
💡 Example with <ol>
<ol>
<li>Open editor</li>
<li>Write code</li>
<li>Run program</li>
</ol>
🖥️ Output Explanation
- Each
<li>becomes one visible item - In
<ul>→ bullets appear - In
<ol>→ numbers appear - Order depends on list type
🎯 Important Rule
👉 <li> cannot be used alone
It must be inside a list:
✔ Correct:
<ul>
<li>Item</li>
</ul>
❌ Wrong:
<li>Item</li>
🎯 When to Use <li>
Use it for:
- Navigation menus
- Feature lists
- Steps in tutorials
- Any grouped items
Example:
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
🧠 Important Concept
👉 Think of <li> as a single building block
<ul>/<ol>= container<li>= items inside it
🎨 Nested Lists
You can also nest lists:
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
🚫 Common Mistakes
- Using
<li>outside lists ❌ - Forgetting
<ul>or<ol>❌ - Mixing structure incorrectly ❌
🧪 Mini Exercise
Create a page with:
- A navigation menu using
<ul>and<li> - A step-by-step tutorial using
<ol>and<li> - A nested list (e.g., categories and sub-items)