Beginner9 min read

HTML Unordered Lists: Complete Guide to Bullet Points and List for Beginners

9 min read
371 words
21 sections13 code blocks

When you make a grocery list or jot down your weekend plans, you probably use bullet points to organize your thoughts. HTML unordered lists work exactly the same way - they help you display information in a clean, easy-to-read format with bullet points.

What Are Unordered Lists?

An unordered list is simply a collection of items displayed with bullet points. Unlike numbered lists, the order doesn't matter - each item is equally important. Think of it like a shopping list where you don't care which item you pick up first.

Basic Unordered List Structure

Every unordered list needs two types of tags working together:

  • <ul> - The container that holds your entire list
  • <li> - Each individual item in your list
JavaScript
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

How it looks on your webpage:

  • First item
  • Second item
  • Third item

Step-by-Step List Creation

Step 1: Start with the Container

JavaScript
<ul>
</ul>

Step 2: Add Your List Items

JavaScript
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

Step 3: View the Result

Your browser automatically adds bullet points and proper spacing.

Real-World Examples

Shopping List

JavaScript
<h2>Grocery Shopping List</h2>
<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
    <li>Chicken</li>
    <li>Rice</li>
</ul>

Website Navigation Menu

JavaScript
<h2>Navigation</h2>
<ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Services</li>
    <li>Contact</li>
</ul>

Skills List for Resume

JavaScript
<h2>My Skills</h2>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Microsoft Office</li>
    <li>Customer Service</li>
</ul>

You can make your list items clickable by adding links:

You'll learn more in-detail about the anchor <a> Tag in the upcoming article

JavaScript
<h2>Useful Websites</h2>
<ul>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.youtube.com">YouTube</a></li>
    <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
</ul>

Complete Webpage Example

JavaScript
<!DOCTYPE html>
<html>
<head>
    <title>My Favorite Things</title>
</head>
<body>
    <h1>All About Me</h1>
    
    <h2>My Favorite Foods</h2>
    <ul>
        <li>Pizza</li>
        <li>Ice cream</li>
        <li>Chocolate cake</li>
        <li>Fresh fruit</li>
    </ul>
    
    <h2>Places I Want to Visit</h2>
    <ul>
        <li>Paris, France</li>
        <li>Tokyo, Japan</li>
        <li>New York City</li>
        <li>London, England</li>
    </ul>
    
    <h2>My Daily Tasks</h2>
    <ul>
        <li>Check emails</li>
        <li>Exercise for 30 minutes</li>
        <li>Read for 1 hour</li>
        <li>Call family</li>
    </ul>
</body>
</html>

Common Beginner Mistakes

Mistake 1: Forgetting the Container

JavaScript
<!-- ❌ WRONG - No <ul> container -->
<li>Item 1</li>
<li>Item 2</li>

<!-- ✅ CORRECT - Always use <ul> container -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Mistake 2: Missing Closing Tags

JavaScript
<!-- ❌ WRONG - Missing closing tags -->
<ul>
    <li>Item 1
    <li>Item 2
</ul>

<!-- ✅ CORRECT - Close all tags -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Mistake 3: Putting Content Directly in UL

JavaScript
<!-- ❌ WRONG - Text directly in <ul> -->
<ul>
    Some text here
    <li>Item 1</li>
</ul>

<!-- ✅ CORRECT - Only <li> tags inside <ul> -->
<ul>
    <li>Some text here</li>
    <li>Item 1</li>
</ul>

Different Bullet Styles

You can change how your bullets look using simple CSS:

JavaScript
<ul style="list-style-type: square;">
    <li>Square bullets</li>
    <li>Instead of circles</li>
</ul>

<ul style="list-style-type: none;">
    <li>No bullets at all</li>
    <li>Clean and simple</li>
</ul>

When to Use Unordered Lists

Perfect for:

  • Shopping lists - Items you need to buy
  • Feature lists - Product benefits or website features
  • Navigation menus - Links to different pages
  • To-do lists - Tasks without specific order
  • Ingredient lists - Recipe components

Not ideal for:

  • Step-by-step instructions (use ordered lists instead)
  • Rankings (use ordered lists for 1st, 2nd, 3rd place)
  • Sequences (use ordered lists for processes)

Quick Reference

TagPurposeRequired
<ul>List containerYes
<li>Individual itemYes
</ul>Close containerYes
</li>Close itemYes

Practice Exercise

Create your own list using this template:

JavaScript
<!DOCTYPE html>
<html>
<head>
    <title>My Lists</title>
</head>
<body>
    <h1>My Personal Lists</h1>
    
    <h2>My Favorite Movies</h2>
    <ul>
        <li>[Add your favorite movie]</li>
        <li>[Add another movie]</li>
        <li>[Add one more movie]</li>
    </ul>
    
    <h2>Things I Want to Learn</h2>
    <ul>
        <li>[Add something you want to learn]</li>
        <li>[Add another skill]</li>
        <li>[Add one more goal]</li>
    </ul>
</body>
</html>

What's Next?

Now that you know how to create unordered lists, you can organize information clearly on your webpages. Lists make content easier to read and help visitors quickly find what they're looking for.

In our next lesson, we'll learn about ordered lists (numbered lists) for when the sequence of items matters, like step-by-step instructions or rankings.