HTML ul tag & list items (practical use cases & examples)

HTML <ul> tag is one of the most commonly used items on many web pages. The <ul> tag stands for unordered lists. The name itself is self-explanatory.

However, you can’t use this tag alone. To make the actual list of items, you have to use <li> tags inside the <ul>.

In this post, I will show you how to create a bullet list (unordered), numbered list (ordered), and nested list. Also, you’ll learn how to remove bullet points, replace default bullet points with custom images, etc.

Let’s get stared.

How to make a bulleted list?

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

The output of the above HTML looks like the below.

• Item 1
• Item 2
• Item 3

The <li> tag stands for list item. And it can be used inside the unordered (<ul>) & ordered (<ol>) tags.

How to make an ordered list?

If you want an ordered list instead of an unordered one, you have to use <ol> tag instead of <ul>. That means if you want 1, 2, or 3 instead of the bullet points, use the <ol> tag instead. See the example below.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

See the output below.

1. Item 1
2. Item 2
3. Item 3

How to create a list inside another list (nested)?

To create a list inside another list, insert another <ul> tag inside the <li> tag. See the example below for more clarification.

<ul>
  <li>Vegitable</li>
  <li>Grocery</li>
  <li>Fruits
    <ul>
      <li>Banana</li>
      <li>Mango</li>
      <li>Jackfruit</li>
    </ul>
  </li> <!-- Fruits -->
</ul>

See the output below.

• Vegitable
• Grocery
• Fruits
  • Banana
  • Mango
  • Jackfruit

You will also need this type of nested list when you create a dropdown menu in HTML.

How to remove bullet points from the list?

In many cases, you may need to remove the bullet points from the list. To do that use the CSS list-style property and set its value to none. See the example below.

<ul>
  <li style="list-style: none;">Item 1</li>
  <li style="list-style: none;">Item 2</li>
  <li style="list-style: none;">Item 3</li>
</ul>
<!-- OR -->
<style>ul li {list-style: none;}</style>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

See the output below.

• Item 1
• Item 2
• Item 3

How to replace the default bullet points with custom images?

There are a couple of ways & technics you can apply to replace the default bullet points from the list item. Probably this is the easiest option to do it.

Target the <li> tags in your CSS and set its list-style value to none. And in the second step, use the list-style property again to add your own image/bullet point. See the example below.

ul li {
  list-style: none;
  list-style: circle inside url("path-of-the-bullet.png");
  margin-bottom: 30px;
}

See the output below.

• Item 1
• Item 2
• Item 3

Again, you can delete the default bullet points and add new ones in many different ways. But if you use this approach, you need only a few lines of CSS and that is why it’s the easiest.

However, make sure you properly cropped your image (bullet point) as I don’t have additional CSS to resize it. In my example, I cropped the image/bullet 16/16 pixels and you may have to do something similar.

If you upload a large image for the bullet point, it will look horrible. So take this into consideration.

List related posts:

1. HTML ul tag & list items (practical use cases & examples)
2. How to make a horizontal list using CSS?
3. How to center align an HTML list using CSS?
4. How to create a two-column list in HTML CSS?

Conclusion

These are the most common use cases of the <ul> & <li> tags in HTML. If you’re missing something, please do let me know.