HTML Tutorial

Creating Lists in HTML

A Beginner’s Guide to Unordered, Ordered, and Nested Lists

Photo by Branko Stancevic on Unsplash

When organizing content on a webpage, lists are an incredibly useful tool. Whether you’re listing ingredients for a recipe, steps in a process, or a collection of resources, HTML makes it easy to create both unordered lists (with bullets) and ordered lists (with numbers). Plus, you can even nest lists to create more complex hierarchies.

In this article, we’ll explore how to create lists in HTML, look at the differences between unordered and ordered lists, and learn how to nest lists for better organization.

The Basics of HTML Lists

In HTML, there are two main types of lists:

1. Unordered lists: These use bullet points to display items.
2. Ordered lists: These use numbers to display items in a sequence.

Both types of lists consist of list items wrapped inside the <li> (list item) tag. The only difference between the two is the outer tag: unordered lists use the <ul> tag, and ordered lists use the <ol> tag.

Let’s dive into the details of each type.

Unordered Lists (<ul>)