HTML Unordered Lists Guide

Learn how to create and style unordered lists in HTML

What are Unordered Lists?

Unordered lists (<ul>) in HTML are used to group collections of items that do not require a specific order or sequence. Each item in the list is marked with a bullet point by default, making them ideal for:

Navigation menus and site maps
Feature lists and product specifications
Ingredients or item collections
Any content where the order of items isn't important

Key Features:

Simple bullet-pointed item display
Multiple bullet style options (disc, circle, square)
Ability to remove bullets completely
Support for nested lists within lists
Full CSS styling capabilities for custom designs

Basic Unordered List

Simple bulleted list with default styling

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

Usage: For grouping related items where order doesn't matter

Compact List

List with reduced spacing between items

<ul style="line-height: 1.2;">
  <li style="margin-bottom: 4px;">Compact item 1</li>
  <li style="margin-bottom: 4px;">Compact item 2</li>
  <li style="margin-bottom: 4px;">Compact item 3</li>
</ul>

Usage: When space is limited or for dense information display

List with Custom Indentation

List with adjusted indentation levels

<ul style="padding-left: 10px;">
  <li>Less indented item 1</li>
  <li>Less indented item 2</li>
</ul>

<ul style="padding-left: 40px;">
  <li>More indented item 1</li>
  <li>More indented item 2</li>
</ul>

Usage: To control visual hierarchy and grouping

Disc (Default)

Filled circular bullet points

<ul style="list-style-type: disc;">
  <li>Disc item 1</li>
  <li>Disc item 2</li>
</ul><ul style="list-style-type: disc;">
  <li>Disc item 1</li>
  <li>Disc item 2</li>
</ul>

Note: This is the default style if none specified

Circle

Hollow circular bullet points

<ul style="list-style-type: circle;">
  <li>Circle item 1</li>
  <li>Circle item 2</li>
</ul><ul style="list-style-type: circle;">
  <li>Circle item 1</li>
  <li>Circle item 2</li>
</ul>

Note: Provides a lighter visual appearance than disc

Square

Filled square bullet points

<ul style="list-style-type: square;">
  <li>Square item 1</li>
  <li>Square item 2</li>
</ul><ul style="list-style-type: square;">
  <li>Square item 1</li>
  <li>Square item 2</li>
</ul>

Note: Offers a more angular, modern look

None

No visible markers

<ul style="list-style-type: none;">
  <li>No marker item 1</li>
  <li>No marker item 2</li>
</ul><ul style="list-style-type: none;">
  <li>No marker item 1</li>
  <li>No marker item 2</li>
</ul>

Note: Useful when creating custom markers with CSS

<nav>
  <ul style="list-style-type: none; padding: 0; display: flex; gap: 15px;">
    <li><a href="#home" style="text-decoration: none; color: #333;">Home</a></li>
    <li><a href="#about" style="text-decoration: none; color: #333;">About</a></li>
    <li><a href="#services" style="text-decoration: none; color: #333;">Services</a></li>
    <li><a href="#contact" style="text-decoration: none; color: #333;">Contact</a></li>
  </ul>
</nav><nav>
  <ul style="list-style-type: none; padding: 0; display: flex; gap: 15px;">
    <li><a href="#home" style="text-decoration: none; color: #333;">Home</a></li>
    <li><a href="#about" style="text-decoration: none; color: #333;">About</a></li>
    <li><a href="#services" style="text-decoration: none; color: #333;">Services</a></li>
    <li><a href="#contact" style="text-decoration: none; color: #333;">Contact</a></li>
  </ul>
</nav>

Feature List

<h2>Product Features</h2>
<ul style="list-style-type: none; padding-left: 0;">
  <li style="padding: 8px 0; border-bottom: 1px solid #eee;">
    <span style="font-weight: bold; color: #4a6ee0;">✓</span> Fast performance
  </li>
  <li style="padding: 8px 0; border-bottom: 1px solid #eee;">
    <span style="font-weight: bold; color: #4a6ee0;">✓</span> Secure data handling
  </li>
  <li style="padding: 8px 0; border-bottom: 1px solid #eee;">
    <span style="font-weight: bold; color: #4a6ee0;">✓</span> 24/7 customer support
  </li>
  <li style="padding: 8px 0;">
    <span style="font-weight: bold; color: #4a6ee0;">✓</span> Easy to use interface
  </li>
</ul><h2>Product Features</h2>
<ul style="list-style-type: none; padding-left: 0;">
  <li style="padding: 8px 0; border-bottom: 1px solid #eee;">
    <span style="font-weight: bold; color: #4a6ee0;">✓</span> Fast performance
  </li>
  <li style="padding: 8px 0; border-bottom: 1px solid #eee;">
    <span style="font-weight: bold; color: #4a6ee0;">✓</span> Secure data handling
  </li>
  <li style="padding: 8px 0; border-bottom: 1px solid #eee;">
    <span style="font-weight: bold; color: #4a6ee0;">✓</span> 24/7 customer support
  </li>
  <li style="padding: 8px 0;">
    <span style="font-weight: bold; color: #4a6ee0;">✓</span> Easy to use interface
  </li>
</ul>

Ingredient List

<h2>Pasta Salad Ingredients</h2>
<ul style="list-style-type: none; padding-left: 0;">
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> 2 cups cooked pasta
  </li>
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> 1 cup cherry tomatoes, halved
  </li>
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> 1/2 cup sliced cucumbers
  </li>
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> 1/4 cup olive oil
  </li>
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> 2 tbsp balsamic vinegar
  </li>
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> Salt and pepper to taste
  </li>
</ul><h2>Pasta Salad Ingredients</h2>
<ul style="list-style-type: none; padding-left: 0;">
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> 2 cups cooked pasta
  </li>
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> 1 cup cherry tomatoes, halved
  </li>
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> 1/2 cup sliced cucumbers
  </li>
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> 1/4 cup olive oil
  </li>
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> 2 tbsp balsamic vinegar
  </li>
  <li style="padding: 5px 0;">
    <span style="display: inline-block; width: 20px; text-align: center;">•</span> Salt and pepper to taste
  </li>
</ul>

Multi-level Navigation

Nested lists for dropdown navigation

<nav>
  <ul style="list-style-type: none; padding-left: 0;">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Products</a>
      <ul style="list-style-type: none; padding-left: 20px;">
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Services</a>
      <ul style="list-style-type: none; padding-left: 20px;">
        <li><a href="#">Service A</a></li>
        <li><a href="#">Service B</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav><nav>
  <ul style="list-style-type: none; padding-left: 0;">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Products</a>
      <ul style="list-style-type: none; padding-left: 20px;">
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Services</a>
      <ul style="list-style-type: none; padding-left: 20px;">
        <li><a href="#">Service A</a></li>
        <li><a href="#">Service B</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Usage: For creating hierarchical navigation menus

Document Outline

Nested lists for content structure

<div style="background: #f8f9fa; padding: 15px; border-radius: 5px;">
  <ul style="list-style-type: none; padding-left: 0;">
    <li>
      <strong>Chapter 1: Introduction</strong>
      <ul style="list-style-type: none; padding-left: 20px;">
        <li>1.1 Background</li>
        <li>1.2 Objectives</li>
      </ul>
    </li>
    <li>
      <strong>Chapter 2: Literature Review</strong>
      <ul style="list-style-type: none; padding-left: 20px;">
        <li>2.1 Previous Studies</li>
        <li>2.2 Current Research</li>
      </ul>
    </li>
  </ul>
</div><div style="background: #f8f9fa; padding: 15px; border-radius: 5px;">
  <ul style="list-style-type: none; padding-left: 0;">
    <li>
      <strong>Chapter 1: Introduction</strong>
      <ul style="list-style-type: none; padding-left: 20px;">
        <li>1.1 Background</li>
        <li>1.2 Objectives</li>
      </ul>
    </li>
    <li>
      <strong>Chapter 2: Literature Review</strong>
      <ul style="list-style-type: none; padding-left: 20px;">
        <li>2.1 Previous Studies</li>
        <li>2.2 Current Research</li>
      </ul>
    </li>
  </ul>
</div>

Usage: For creating document outlines or table of contents

Custom Bullet Icons

Using CSS to replace default bullets with custom icons

<style>
.custom-icon-list {
  list-style-type: none;
  padding-left: 0;
}
.custom-icon-list li {
  padding-left: 25px;
  position: relative;
  margin-bottom: 8px;
}
.custom-icon-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #4a6ee0;
  font-weight: bold;
}
</style>

<ul class="custom-icon-list">
  <li>Featured product</li>
  <li>New arrival</li>
  <li>Limited edition</li>
</ul><style>
.custom-icon-list {
  list-style-type: none;
  padding-left: 0;
}
.custom-icon-list li {
  padding-left: 25px;
  position: relative;
  margin-bottom: 8px;
}
.custom-icon-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #4a6ee0;
  font-weight: bold;
}
</style>

<ul class="custom-icon-list">
  <li>Featured product</li>
  <li>New arrival</li>
  <li>Limited edition</li>
</ul>

Note: Allows for creative visual styling beyond standard bullets

Horizontal List

Displaying list items in a row instead of vertically

<style>
.horizontal-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 15px;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
}
.horizontal-list li {
  padding: 5px 10px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

<ul class="horizontal-list">
  <li>Popular</li>
  <li>Trending</li>
  <li>New</li>
  <li>Featured</li>
</ul><style>
.horizontal-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 15px;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
}
.horizontal-list li {
  padding: 5px 10px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

<ul class="horizontal-list">
  <li>Popular</li>
  <li>Trending</li>
  <li>New</li>
  <li>Featured</li>
</ul>

Note: Ideal for tags, filters, or horizontal navigation

Unordered List Playground

Experiment with unordered lists in our live editor

Unordered List Examples Preview

Ready-to-use examples covering different list scenarios

Live Preview

Features Included

Basic Lists

Simple bullet points

Marker Types

disc, circle, square

Nesting

Multi-level lists

Styling

Custom CSS examples

All examples will be loaded into an interactive editor where you can modify and test them

< Previous Next >

HTML Unordered Lists Guide

What are Unordered Lists?

Key Features:

Unordered List Basics

Basic Unordered List

Compact List

List with Custom Indentation

List Marker Types

Disc (Default)

Circle

Square

None

Practical Examples

Navigation Menu

Feature List

Ingredient List

Nesting Unordered Lists

Multi-level Navigation

Document Outline

Advanced Styling Techniques

Custom Bullet Icons

Horizontal List

Unordered List Playground

Unordered List Examples Preview

Features Included