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 list
Each <li> represents one bullet item
Browser 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)
circle
square

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.