HTML <ul> Tag – Unordered List
📌 Introduction
The <ul> tag is used to create an unordered list in HTML.
An unordered list is a list where items are shown with bullet points.
It is commonly used for:
- Navigation menus
- Feature lists
- Item groups
- Task lists
🧱 Syntax
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>UL Example</title>
</head>
<body>
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
🖥️ Output Explanation
- The list appears with bullet points
- Each
<li>represents one item - The order does not matter
🎯 Important Rule
👉 <ul> always works with <li> (list item)
✔ Correct:
<ul>
<li>Item</li>
</ul>
❌ Wrong:
<ul>
Item
</ul>
🎯 When to Use <ul>
Use it for:
- Navigation menus
- Lists of features
- Grouped items
- Checklists
Example:
<ul>
<li>Fast</li>
<li>Responsive</li>
<li>Easy to use</li>
</ul>
⚖️ <ul> vs <ol>
| Tag | Type | Use |
|---|---|---|
<ul> |
Unordered list | Bullet points |
<ol> |
Ordered list | Numbered steps |
🎨 Styling Example
<ul style="list-style-type: square;">
<li>HTML</li>
<li>CSS</li>
</ul>
🚫 Common Mistakes
- Missing
<li>items ❌ - Using
<ul>for layout ❌ - Forgetting structure ❌
🧪 Mini Exercise
Create a page with:
- A list of your favorite programming languages
- A list of hobbies
- Style one list with square bullets