HTML Unordered Lists: Complete Guide with Examples

HTML Unordered Lists

An HTML unordered list is used when you want to display a group of related items where the order of those items does not matter. Instead of numbers such as 1, 2, and 3, an unordered list normally displays a bullet point before each item.

Unordered lists are one of the most commonly used list types in HTML. They are useful for navigation menus, feature lists, product benefits, categories, ingredients, website links, and many other types of content.

The basic structure uses the <ul> element for the list and the <li> element for each list item.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

The browser displays this approximately as:

HTML
CSS
JavaScript

The important point is that <ul> creates the list, while <li> creates each individual item.

What Is an Unordered List?

An unordered list is a collection of items that has no meaningful sequence.

For example, if you are listing programming languages, the following order usually does not matter:

<ul>
  <li>Python</li>
  <li>Java</li>
  <li>C++</li>
  <li>JavaScript</li>
</ul>

The list is unordered because changing the position of the items does not change their meaning.

This is different from an ordered list, where the sequence is important.

For example:

<ol>
  <li>Open the website</li>
  <li>Log in to your account</li>
  <li>Open your profile</li>
</ol>

Here, the order matters because the steps are meant to be followed in sequence.

The `<ul>` Element

The <ul> element means unordered list.

It acts as the container for all the items in an unordered list.

Example:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

The <ul> element does not normally contain plain text items directly. Its list items should be represented using <li> elements.

A good structure is:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

Avoid treating <ul> as a replacement for a generic <div>. It represents a meaningful collection of list items.

The `<li>` Element

The <li> element means list item.

Every item inside an unordered list should normally be placed inside an <li> element.

Example:

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

Each <li> represents one item in the list.

A list can contain just a few items or many items:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Java</li>
  <li>C++</li>
</ul>

Basic Syntax

The standard syntax of an unordered list is:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

There are three important parts:

<ul> starts the unordered list.
<li> defines an individual list item.
</ul> ends the unordered list.

The closing </li> tag should also be used for clarity and maintainability.

How HTML Unordered Lists Work

When a browser encounters a <ul> element, it understands that the content represents a list without a required numerical order.

The browser then applies its default list styling. By default, most browsers display a filled circular bullet, although the exact appearance can depend on the browser and CSS.

For example:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

The visual result is generally similar to:

First item
Second item
Third item

The bullets are presentation details. The HTML itself communicates the semantic meaning that these items form an unordered list.

Default Bullet Style

By default, browsers usually display unordered list items with a bullet.

For example:

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

A browser will generally render the items with circular bullets.

The exact appearance should not be controlled with HTML attributes. Modern websites use CSS to control the appearance.

Changing Bullet Styles with CSS

CSS provides the list-style-type property for changing the marker style.

Disc

<ul style="list-style-type: disc;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Circle

<ul style="list-style-type: circle;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Square

<ul style="list-style-type: square;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

In real projects, it is generally better to place CSS in a stylesheet rather than using inline styles.

ul {
  list-style-type: square;
}

Removing Bullets

You can remove the default markers using CSS.

ul {
  list-style-type: none;
}

This is common for navigation menus and custom-designed lists.

For example:

<ul class="menu">
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

.menu {
  list-style-type: none;
}

Removing bullets should be done carefully. If the list still represents a collection of related items, keeping the semantic <ul> structure is often useful even when the visual marker is removed.

Unordered Lists and CSS

HTML should describe the meaning and structure of content, while CSS should generally control its appearance.

For example:

<ul class="features">
  <li>Fast performance</li>
  <li>Easy to use</li>
  <li>Responsive design</li>
</ul>

CSS can then control the visual presentation:

.features {
  list-style-type: square;
  padding-left: 25px;
}

.features li {
  margin-bottom: 8px;
}

This separation makes websites easier to maintain.

Nested Unordered Lists

An unordered list can contain another unordered list. This is called a nested list.

Nested lists are useful for representing categories and subcategories.

Example:

<ul>
  <li>Web Development
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Programming
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>C++</li>
    </ul>
  </li>
</ul>

This creates a hierarchy:

Web Development
- HTML
- CSS
- JavaScript
Programming
- Python
- Java
- C++

A nested list should be placed inside the relevant parent <li> element.

Correct Nested List Structure

A common mistake is placing a nested <ul> directly beside another <li> without making it part of the parent item.

Prefer:

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
</ul>

This correctly indicates that Apple and Banana are sub-items of Fruits.

Unordered Lists Inside Other Elements

An unordered list can be used inside many HTML elements when the content structure calls for a list.

For example, a section can contain a list:

<section>
  <h2>Popular Languages</h2>

  <ul>
    <li>Python</li>
    <li>JavaScript</li>
    <li>Java</li>
  </ul>
</section>

It can also be used inside an article:

<article>
  <h2>Benefits of Learning HTML</h2>

  <ul>
    <li>Easy to learn</li>
    <li>Works with CSS and JavaScript</li>
    <li>Used throughout the web</li>
  </ul>
</article>

Using Links in Unordered Lists

Unordered lists are frequently used to create navigation menus.

Example:

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/services">Services</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

CSS can then transform the list into a horizontal or vertical navigation menu.

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 15px;
}

The semantic list structure remains useful even though the default bullets have been removed.

Unordered Lists for Navigation

Navigation links are a common use of unordered lists.

A semantic navigation structure can look like this:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/tutorials">Tutorials</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

This clearly communicates that the navigation contains a group of related links.

Unordered Lists for Features

Product and service websites often use unordered lists to show features.

<ul>
  <li>Free account</li>
  <li>Fast setup</li>
  <li>Mobile-friendly interface</li>
  <li>24/7 access</li>
</ul>

The order of these features is not necessarily important, so an unordered list is appropriate.

Unordered Lists for Ingredients

Ingredients are another good example because their order normally does not matter.

<ul>
  <li>2 cups of flour</li>
  <li>1 cup of milk</li>
  <li>2 eggs</li>
  <li>1 tablespoon of sugar</li>
</ul>

If the content describes cooking steps, however, an ordered list is usually more appropriate.

Unordered Lists for Categories

Unordered lists can represent categories and groups.

<ul>
  <li>Technology</li>
  <li>Education</li>
  <li>Business</li>
  <li>Travel</li>
  <li>Entertainment</li>
</ul>

This is especially useful for blogs, websites, directories, and content platforms.

Unordered Lists vs. Ordered Lists

The main difference is whether the sequence matters.

Feature	Unordered List	Ordered List
Element	`<ul>`	`<ol>`
Items	`<li>`	`<li>`
Default marker	Bullets	Numbers
Order important?	Usually no	Usually yes
Example	Features	Instructions

An unordered list:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

An ordered list:

<ol>
  <li>Open the editor</li>
  <li>Write the HTML</li>
  <li>Save the file</li>
</ol>

Unordered Lists vs. Description Lists

HTML also provides the <dl> element for description lists.

A description list is appropriate when terms and their descriptions are connected.

<dl>
  <dt>HTML</dt>
  <dd>A markup language used to structure web content.</dd>

  <dt>CSS</dt>
  <dd>A stylesheet language used to style web content.</dd>
</dl>

Use <ul> when you have a collection of related items without an inherent sequence. Use <dl> when the content consists of terms and their associated descriptions.

Accessibility Benefits

Semantic HTML is important for accessibility.

When a screen reader encounters a properly structured unordered list, it can identify the content as a list and communicate useful information about its structure.

For example:

<ul>
  <li>Accessibility</li>
  <li>Performance</li>
  <li>Security</li>
</ul>

This gives assistive technologies meaningful structural information.

You should therefore use <ul> because the content is genuinely a list, rather than using a series of <div> elements simply to create a visual bullet effect.

Why Semantic HTML Matters

Consider these two approaches.

Less semantic:

<div>• HTML</div>
<div>• CSS</div>
<div>• JavaScript</div>

Semantic:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

The second version tells the browser and assistive technologies that the content is a list.

It is also easier to style, maintain, navigate, and understand.

Styling Individual List Items

CSS can style individual <li> elements.

li {
  margin-bottom: 10px;
}

You can also style a specific list:

.features li {
  font-size: 18px;
  margin-bottom: 8px;
}

Using classes helps prevent styles from accidentally affecting unrelated lists.

Controlling List Indentation

Browsers normally provide indentation for unordered lists.

You can adjust it using CSS.

ul {
  padding-left: 30px;
}

You can also remove the default padding:

ul {
  padding-left: 0;
}

This is often useful when creating custom menus or card layouts.

Custom List Markers

Modern CSS provides several ways to customize list markers.

The ::marker pseudo-element can be used to style the marker.

li::marker {
  font-size: 1.2em;
}

You can also change its color:

li::marker {
  color: currentColor;
}

For more advanced designs, you can use CSS counters, generated content, background images, or other techniques depending on the design requirements.

Using Images or Icons as Markers

A custom visual marker can sometimes be created with CSS.

For example:

.features {
  list-style: none;
  padding-left: 0;
}

.features li::before {
  content: "✓";
  margin-right: 8px;
}

The HTML remains semantic:

<ul class="features">
  <li>Fast performance</li>
  <li>Responsive layout</li>
  <li>Easy navigation</li>
</ul>

This approach is useful for feature lists and custom interfaces.

However, decorative symbols should not replace meaningful text when the symbol itself is important to understanding the content.

Empty Unordered Lists

An empty unordered list is generally not useful:

<ul></ul>

If there are no list items, there is usually no reason to include the list.

When generating lists dynamically with JavaScript or another programming language, however, an initially empty <ul> can sometimes be useful as a container that will later receive <li> elements.

Can `<ul>` Contain Elements Other Than `<li>`?

For normal HTML authoring, direct children of <ul> should be <li> elements.

Good:

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

Avoid structures such as:

<ul>
  <p>HTML</p>
  <p>CSS</p>
</ul>

If you need additional content inside an item, put it inside the <li>.

For example:

<ul>
  <li>
    <strong>HTML</strong>
    <p>HTML provides the structure of a web page.</p>
  </li>
</ul>

Complex List Items

A list item can contain more than simple text.

For example:

<ul>
  <li>
    <h3>HTML</h3>
    <p>HTML is used to structure web pages.</p>
  </li>

  <li>
    <h3>CSS</h3>
    <p>CSS is used to style web pages.</p>
  </li>
</ul>

This can be useful when each item represents a larger content block.

Lists Within Lists

You can combine unordered and ordered lists when the content requires different levels of meaning.

Example:

<ul>
  <li>Web Development
    <ol>
      <li>Learn HTML</li>
      <li>Learn CSS</li>
      <li>Learn JavaScript</li>
    </ol>
  </li>
</ul>

Here, the main category is unordered, while the learning steps are ordered.

This demonstrates an important rule: choose the list type based on the meaning of the content.

Common Mistakes

Using `<ul>` for Numbered Steps

Do not use an unordered list when the sequence is important.

Instead of:

<ul>
  <li>First, create a file.</li>
  <li>Next, write the code.</li>
  <li>Finally, save it.</li>
</ul>

Use:

<ol>
  <li>Create a file.</li>
  <li>Write the code.</li>
  <li>Save the file.</li>
</ol>

Creating Fake Lists with Paragraphs

Avoid manually adding bullet characters:

<p>• HTML</p>
<p>• CSS</p>
<p>• JavaScript</p>

Use semantic list markup:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Using Deprecated Presentation Attributes

Older HTML techniques sometimes used attributes such as type to control bullet styles.

Modern HTML development should use CSS for presentation.

For example:

ul {
  list-style-type: square;
}

This keeps structure and presentation separate.

Incorrect Nesting

Avoid putting a nested list outside its parent item.

Incorrect:

<ul>
  <li>Languages</li>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</ul>

Prefer:

<ul>
  <li>Languages
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

Using Lists Only for Visual Layout

Lists should represent actual lists.

Do not use <ul> simply because you want several boxes or columns to appear next to each other. Use the element that best represents the content and use CSS for layout.

Unordered Lists and Responsive Design

Unordered lists work naturally with responsive layouts.

For example:

<ul class="navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

CSS can change the layout depending on screen size.

On a large screen, the list can be horizontal. On a small screen, it can become vertical.

The HTML does not need to change just because the presentation changes.

Unordered Lists in Web Applications

Unordered lists are also useful in dynamic web applications.

For example, a JavaScript application might generate:

<ul id="results">
  <li>Result One</li>
  <li>Result Two</li>
  <li>Result Three</li>
</ul>

JavaScript can then add, remove, or modify list items dynamically.

This is common in search results, notifications, task lists, menus, comments, and other interfaces.

SEO and Unordered Lists

Using semantic HTML can help search engines understand the structure and relationships within a page.

However, simply placing keywords inside <ul> elements does not automatically improve rankings.

The main benefit is better content structure and clearer HTML.

For example:

<h2>Popular Web Technologies</h2>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

This is clear for users, browsers, assistive technologies, and search-engine systems.

Good SEO comes from useful content, clear structure, accessibility, performance, and many other factors—not from using lists alone.

Best Practices for HTML Unordered Lists

Follow these practices when creating unordered lists:

Use <ul> when the order of items is not important.
Use <li> for each list item.
Keep nested lists inside their related parent <li>.
Use CSS for visual styling.
Use semantic HTML instead of manually typed bullet characters.
Use <ol> when item order is meaningful.
Use <dl> for terms and their descriptions.
Give lists meaningful content rather than using them only for layout.
Use classes when you need list-specific styling.
Keep the HTML structure clean and readable.
Consider accessibility when creating custom list designs.
Do not remove semantic list markup simply because you want to hide the bullets.

Practical Example

Here is a complete example of an unordered list used in a webpage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Unordered List</title>

  <style>
    .features {
      list-style-type: square;
    }

    .features li {
      margin-bottom: 8px;
    }
  </style>
</head>

<body>

  <h2>Website Features</h2>

  <ul class="features">
    <li>Responsive design</li>
    <li>Fast performance</li>
    <li>Easy navigation</li>
    <li>Mobile-friendly interface</li>
  </ul>

</body>
</html>

This example demonstrates how HTML provides the structure while CSS controls the appearance.

Real-World Uses of Unordered Lists

You can find unordered lists in many types of websites and applications.

Common examples include:

Navigation menus
Product features
Blog categories
Website sidebars
Footer links
Search filters
Ingredients
Tags
Related articles
Social media links
Frequently used links
Course topics
Documentation sections
Product specifications
Benefits and advantages
Collections of resources

Whenever a group of related items does not have a required sequence, an unordered list is often an appropriate choice.

Frequently Asked Questions

What is an unordered list in HTML?

An unordered list is a group of related items where the sequence does not normally matter. It is created with the <ul> element and its individual items are created with <li>.

Which tag is used for an unordered list?

The <ul> tag is used to create an unordered list.

Which tag is used for items in an unordered list?

The <li> tag is used for each list item.

What is the default marker of an unordered list?

Browsers generally display a filled circular bullet by default, although the exact presentation can depend on browser styling.

Can I change the bullet style?

Yes. CSS can change the marker using list-style-type.

ul {
  list-style-type: square;
}

Can I remove the bullets?

Yes.

ul {
  list-style-type: none;
}

Can an unordered list contain another unordered list?

Yes. A nested <ul> can be placed inside an <li>.

<ul>
  <li>Web Development
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

Should I use `<ul>` for navigation menus?

Yes, when the navigation consists of a collection of related links, a list can provide meaningful semantic structure. The bullets can then be removed or styled with CSS.

What is the difference between `<ul>` and `<ol>`?

<ul> represents an unordered list, while <ol> represents an ordered list. Use <ul> when sequence is not important and <ol> when sequence matters.

Can a list item contain paragraphs?

Yes. A <li> can contain more complex content, including paragraphs, headings, links, images, and nested lists, when appropriate.

Are unordered lists important for accessibility?

Yes. Semantic lists give browsers and assistive technologies information about the structure of related content. This can make content easier to understand and navigate.

Final Thoughts

HTML unordered lists are simple, but they are an important part of clean and semantic web development. The <ul> element identifies the collection, while <li> elements identify its individual items.

The most important rule is to use an unordered list when the order of the items does not carry meaning. For ordered steps, use <ol> instead. For terms and their descriptions, consider <dl>.

HTML should provide the meaning and structure of the content, while CSS should control how the list looks. With this approach, unordered lists can be used effectively for navigation, features, categories, ingredients, links, menus, and many other types of web content.

A basic unordered list is easy to remember:

<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>

Once you understand this simple structure, you can build nested lists, navigation menus, custom bullet designs, responsive interfaces, and much more while keeping your HTML semantic, accessible, and maintainable.