HTML List – How to Use Bullet Points, Ordered, and Unordered Lists

So you need to know the different ways you can list items using HTML. While you might think it’s a trivial thing to learn, it’s important. And it’s one of the most commonly used features of HTML in web development.

In this article, you’ll learn all about HTML listing elements, their properties, styling, and how to actually use them to create neat lists. I hope you find it helpful.

In HTML, we can list items either in an ordered or unordered fashion.

An ordered list uses numbers or some sort of notation that indicates a series of items.

For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.

Here is an example of an ordered list with students’ names and marks.

On the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast 🤓.

There is one more type of list called a description list that we will learn as well below.

Now let’s get into a bit more detail and see how to create each type of list in HTML.

In HTML, we can create an ordered list using the <ol> tag. The ol in the tag stands for an ordered list. Inside each of the ordered list elements <ol> and <ol />, we have to define the list items. We can define the list items using the <li> tag.

Here is the complete HTML structure for an ordered list:

<ol>
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

The output of the above ordered list is:

So, we have the list of elements ordered with a number starting with 1 and incremented to 2 and 3. Try this CodePen and see if you can change and play around with using ol-li.

Types of Ordered Lists in HTML

What if you do not want to order your list by number? Instead, you want to order using the alphabet like A, B, C or a,b,c. You can do these by specifying the value of the type attribute of the <ol> tag.

You can order the list using A, B, C letters by passing A as the type value.

<ol type="A">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

The output looks like this:

Similarly, you can use lower case letters like a as the type value to list the elements with a, b, c, and so on.

<ol type="a">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

Here’s the output:

If you want to use Roman numerals, use the value I for an ordered list with Roman numerals:

<ol type="I">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

The output looks like this:

Check out the CodePen below to try other types:

How to Use the Start Attribute in HTML Lists

The <ol> element has an interesting attribute called start. You can specify a value to the start attribute to start the ordered list from a specific number.

Let’s say you want to start the list with the number 30 instead of 1. You can specify the number 30 as the value of the start attribute like this:

<ol start="30">
  <li>Thirty</li>
  <li>Thirty One</li>
  <li>Thirty Two</li>
</ol>

The output looks like this:

Feel free to play around with the start attribute using this CodePen:

Incidentally, I have shared the same tips on Twitter recently. You may find some interesting discussion there as well:

💡 Did you know, you can use the ‘start’ attribute with the HTML ordered list(ol) to start from a specific number?

By default, the ordered list starts from 1.

The output of the example below goes like this,

30. Eat
31. Code
32. Sleep#100DaysOfCode #DEVCommunity #html #CSS pic.twitter.com/sqB49wuK5L

— Tapas Adhikary (@tapasadhikary) July 1, 2021

Let’s move over to unordered lists now. We use the <ul> tag to create an unordered list. As usual, we need to use the <li> tags within <ul> and <ul/> to create the list items.

The list items (li) inside the unordered list (ul) come with the default style of bullet points – so each of the list items is preceded by a black dot.

Let’s create a list of my favorite online resources to learn about web programming:

My Favorite Web Development Learning Sites
<div>
  <ul>
    <li>freeCodeCamp</li>
    <li>CSS-Tricks</li>
    <li>Traversy Media</li>
  </ul>
</div>

The output looks like this:

You can see the bullet points for each of the list items above, but you can customize them. We’ll learn that too.

But before that, feel free to use this CodePen to change and run the code.

How to Use Bullet Points with Links in HTML Lists

We can use the links (anchor tag <a>) in the list items (<li> tag) to link each of the items to any internal or external web pages.

Here is an example that shows you how to link each of the web programming resources to their respective websites:

My Favorite Web Development Learning Sites
<div>
  <ul>
    <li>
      <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>
    </li>
    <li>
      <a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a>
    </li>
    <li>
      <a href="https://www.traversymedia.com/" target="_blank">Traversy Media</a>
    </li>
  </ul>
</div>

The output looks like this:

You can use the CodePen below to try out the same. Feel free to modify it as you wish:

Types of Unordered Lists in HTML

As we discussed briefly, we can customize the bullet point style of an unordered list, which we will see in action now. We can do this using the CSS style property called list-style.

There are four main values of the list-style property that help us with this customization:

list-style	Effect
none	There will not be any bullets appearing in front of the list item
circle	A circular (hollow) bullet appears in front of the list item
disc	This is the default filled circular bullet
square	A filled square bullet appears in front of the list item

You can use the CodePen above to try out different list-style options.

There is one more type of HTML list, but it’s not used as often. It is called Description List.

We can define a description list using the <dl> tag element. Inside the <dl>..</dl> we need to define a description term using the <dt> tag. The term is usually some small text about something. Then, we can define the description descriptor to describe the term further using the <dd> tag.

Too much to digest? Let’s see how it works with a code example.

Let’s assume that we want to describe some information about coding, gossiping, and sleeping on our webpage. We can first define a <dl> tag. Now we define three pairs of <dt> and <dd> tags to describe coding, gossiping, and sleeping respectively.

<dl>
  <dt>Coding</dt>
  <dd>An activity to keep you happy, even in sleep.</dd>
  <dt>Gossiping</dt>
  <dd>Can't live without it.</dd>
  <dt>Sleeping</dt>
  <dd>My all time favorite.</dd>
</dl>

The output looks like this:

Try out this CodePen to experiment further with description lists:

You must be wondering, why don’t we use this type of list much? Well, you can create this structure using the unordered list (ul), list items (li), and the CSS styles.

But if you consider the HTML semantics, you should give a place to description lists in your code when you have a good use-case for it.

We’re almost at the end of this tutorial. But I feel like it’s incomplete without at least one use-case example of the HTML lists and tags. My favorite one is listing the items in the header of a web page.

Let’s create a very basic header with a sample logo and three links: Home, Products, and About Us. We will first create the HTML structure like this:

<header>
  <span class="logo">Logo</span>
  
  <ul>
    <li><a href="https://www.freecodecamp.org/news/html-list-how-to-use-bullet-points-ordered-and-unordered-lists/#/home">Home</a></li>
    <li><a href="#/products">Products</a></li>
    <li><a href="#/about">About Us</a></li>
  </ul>  
</header>

Here we have taken an unordered list with three list items to define Home, Products, and About Us links. You’ll also notice a span element with the text Logo which indicates it is a logo. We can use a suitable image there, based on our needs later.

So far, the header should look like this:

Well, this is not what we want. So next we will write a few CSS rules and properties to make it look like a page header (at least close to it).

header{
  background-color: #273032;
  color: #FFF;
  padding: 10px;
  display: flex;
}

.logo {
  background-color: blue
}

ul {
  margin: 0px;
}

li {
  list-style: none;
  display: inline;
  margin-right: 0.2rem;
}

a {
  color: pink;
}

Now it is much better and looks closer to a realistic page header.

Again, you can use this CodePen to change and try out things with the header.

That’s all for now. I hope you’ve found this article insightful, and that it helps you understand HTML lists more clearly. You can find all the examples together in this CodePen Collection.