Introduction
When you build a web page, you often need to show lists: shopping items, navigation menus, features, or steps. HTML gives you a simple way to do this using unordered lists.
In this article, you’ll learn how to create unordered lists in HTML from scratch. We’ll walk through basic examples, add some style, and build up to a simple navigation menu. By the end, you’ll feel confident using lists in your own pages.
What is an unordered list?
An unordered list is a list of items where the order doesn’t matter. For example, a grocery list: apples, milk, bread. It doesn’t matter which you read first.
In HTML, unordered lists usually appear with bullet points. Behind the scenes, they are created with two main tags:
<ul>— stands for unordered list. It wraps the entire list.<li>— stands for list item. Each individual item is inside an<li>tag.
Example 1: Your first unordered list
Let’s start with a very simple example.
<!-- A basic HTML page with an unordered list -->
<!DOCTYPE html>
<html>
<head>
<title>My First List</title>
</head>
<body>
<h1>My Grocery List</h1>
<!-- Unordered list starts here -->
<ul>
<li>Apples</li>
<li>Milk</li>
<li>Bread</li>
</ul>
<!-- Unordered list ends here -->
</body>
</html>
What’s happening here?
<ul>starts the unordered list.- Each
<li>creates one bullet point:Apples,Milk, andBread. </ul>ends the list.
What you’ll see in the browser:
You will see a heading that says My Grocery List, and under it, three bullet points:
- Apples
- Milk
- Bread
Try it yourself
- Open a simple text editor (like Notepad on Windows or TextEdit on Mac in plain text mode).
- Copy and paste the code above into a new file.
- Save the file as
list.htmlon your computer. - Double-click the file to open it in your web browser.
Now try changing the list items to your own favorite snacks or hobbies.
Example 2: Adding more structure with headings and paragraphs
Lists often appear together with other content like paragraphs and headings. Let’s create a small “About Me” section that uses an unordered list.
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<p>Hi! My name is Alex, and here are a few of my favorite things:</p>
<ul>
<li>Coding simple web pages</li>
<li>Playing guitar</li>
<li>Reading mystery novels</li>
</ul>
<p>Learning HTML is my first step toward building my own website.</p>
</body>
</html>
What’s new here?
<p>adds paragraphs before and after the list.- The list is still created the same way: one
<ul>and multiple<li>elements.
What you’ll see in the browser:
A main heading, a short paragraph introducing the list, then three bullet points, followed by another paragraph.
Try it yourself
Change the heading <h1>About Me</h1> to something else, like My Favorite Things. Also, edit the three <li> items to match your own interests. Refresh the page and see how easy it is to customize.
Example 3: Nested unordered lists (lists inside lists)
Sometimes, you might want to show categories and sub-items. You can do this by putting one <ul> inside a list item.
This is called a nested list.
<!DOCTYPE html>
<html>
<head>
<title>Favorite Foods</title>
</head>
<body>
<h1>My Favorite Foods</h1>
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Strawberries</li>
</ul>
</li>
<li>Snacks
<ul>
<li>Popcorn</li>
<li>Chocolate</li>
</ul>
</li>
<li>Drinks
<ul>
<li>Water</li>
<li>Orange juice</li>
</ul>
</li>
</ul>
</body>
</html>
How this works
- The outer
<ul>holds the main categories: Fruits, Snacks, and Drinks. - Inside each category’s
<li>, there is another<ul>with more<li>items.
What you’ll see in the browser:
You’ll see bullets for the main categories, and indented bullets beneath them for each sub-item, for example:
- Fruits
- Apples
- Bananas
- Strawberries
- Snacks
- Popcorn
- Chocolate
- Drinks
- Water
- Orange juice
Try it yourself
- Add a new category, like
Desserts, with its own inner list. - Experiment by removing one of the inner lists to see what changes.
- Pay attention to opening and closing tags. If something looks broken, check that every
<ul>has a matching</ul>and every<li>has a matching</li>.
Nested lists can look confusing at first, but you’ll get better with a little practice.
Example 4: Using unordered lists for a simple navigation menu
Unordered lists are often used to build navigation menus on websites. Let’s create a very basic menu.
This example also includes a little CSS (a language that styles HTML) to make it look nicer. Don’t worry if CSS is new to you; we’ll keep it simple.
<!DOCTYPE html>
<html>
<head>
<title>Simple Navigation</title>
<style>
/* Remove default bullets and padding */
ul.nav {
list-style-type: none; /* Hides the bullets */
padding: 0; /* Removes left-indent */
margin: 0;
}
/* Display list items next to each other */
ul.nav li {
display: inline; /* Puts items in a row */
margin-right: 15px; /* Space between items */
}
/* Style the links */
ul.nav a {
text-decoration: none; /* Removes underline */
color: blue; /* Link color */
font-weight: bold; /* Makes text bold */
}
</style>
</head>
<body>
<h1>My Website</h1>
<!-- Navigation menu using an unordered list -->
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<p>Welcome to my simple website!</p>
</body>
</html>
What’s happening here?
- The
<ul class="nav">is still an unordered list, but we gave it a class namenavso we can style it with CSS. list-style-type: none;removes the bullet points.display: inline;onul.nav liputs the list items in a row instead of a vertical column.- Each
<li>contains an<a>tag, which creates a clickable link.
What you’ll see in the browser:
At the top, you’ll see a heading, then three bold, blue words in a row: Home, About, and Contact. They will look like a simple navigation bar.
Try it yourself
- Change the link text to pages you might want on your own site, like
Blog,Portfolio, orShop. - Change
color: blue;to another color you like, such asredorgreen.
Even though this looks different, it’s still just an unordered list under the hood.
Common tips and reminders
Here are a few helpful points to remember when working with unordered lists:
Always use
<li>inside<ul>
Don’t put plain text directly inside<ul>without<li>tags.Close your tags
Every<ul>needs a</ul>, and every<li>needs a</li>. A missing closing tag can break your layout.Use lists when content is actually a list
If you’re listing items, features, or steps, use a list instead of typing everything in one long paragraph. It’s easier to read and better for accessibility.Don’t worry about making it perfect
If something doesn’t look right the first time, that’s normal. Adjust, refresh, and learn from the results.
Quick recap and what’s next
You’ve just learned how to create unordered lists in HTML, from simple bullet points to nested lists and even a basic navigation menu. You now know how to use:
<ul>to start and end an unordered list<li>to create each item in the list- Nested
<ul>elements for sub-lists - Simple CSS to change how your lists look
Your next steps could be:
- Practice by making lists for a personal “to-do” page, a wishlist, or a list of favorite movies.
- Explore ordered lists (
<ol>) for numbered steps or ranked items. - Experiment more with CSS to change bullet styles, spacing, and colors.
Every small piece of code you write is progress. Keep experimenting, keep breaking things (safely), and keep going—you’re already on your way to building real web pages.
