HTML Unordered List – A Complete Guide
An unordered list in HTML is a list of items without a specific order, usually displayed with bullet points (•).
When content is presented as a group of related items without any specific order, an HTML unordered list is the best choice.
You see unordered lists everywhere on websites, such as:
Navigation menus
Feature lists
Bullet points in articles
Sidebars and footers
Task or requirement lists
For beginners, mastering unordered lists is essential because they are simple, flexible, and widely used in real-world web design.
What Is an HTML Unordered List?
An HTML unordered list displays a list of items where the order does not matter.
Each item is shown with a bullet point by default.
👉 In simple words:
An unordered list is a bulleted list in HTML.
HTML Tags Used for Unordered Lists
| Tag | Purpose |
|---|---|
<ul> | Defines an unordered list |
<li> | Defines a list item |
Basic Syntax of HTML Unordered List
The <ul> tag is used to create an unordered list, and each item is wrapped in <li> (list item) tags.
Example:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Output Explanation
<ul>wraps the entire listEach
<li>represents one bullet itemBrowser automatically adds bullets
Example 1: Simple Unordered List
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
👉 This creates a basic bulleted list.
Example 2: Nested Unordered List (Sub-List)
Unordered lists can be placed inside another list item.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend</li>
</ul>
Use Case
Menus
Categories and subcategories
Multi-level navigation
Bullet Types in Unordered Lists
By default, bullets are solid dots, but HTML allows other styles.
Common Bullet Types
disc(default)circlesquare
Example (Using CSS – Recommended)
<ul class="custom-list">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
.custom-list {
list-style-type: square;
}
Styling Unordered Lists with CSS (Best Practice)
Remove Bullets (Very Common for Menus)
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
Horizontal Menu Using Unordered List
<ul class="menu">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
.menu li {
display: inline-block;
margin-right: 15px;
}
👉 This is how navigation bars are created.
HTML Unordered List vs Ordered List
| Feature | Unordered List (<ul>) | Ordered List (<ol>) |
|---|---|---|
| Order matters | ❌ No | ✅ Yes |
| Bullet style | Dots / shapes | Numbers / letters |
| Use case | Features, menus | Steps, rankings |
Real-World Example: Website Navigation Menu
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
.nav {
list-style: none;
display: flex;
gap: 20px;
}
👉 Almost all modern website menus are built using <ul>.
Best Practices for HTML Unordered Lists
- Always use
<li>for items - Use CSS for styling
- Remove default styles when creating menus
- Use nested lists carefully
- Keep lists readable and simple
FAQs: HTML Unordered List
What is an unordered list in HTML?
A list of items displayed with bullets where order does not matter.
Can I remove bullets from an unordered list?
Yes, using CSS:
Can unordered lists be nested?
Yes, you can place one <ul> inside another <li>.
Are unordered lists used for menus?
Yes, most navigation menus are built using <ul> and <li>.
What is the difference between <ul> and <ol>?
<ul> is for unordered items, <ol> is for ordered steps.
