HTML ul tag, list

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 ul tag alone. To make the actual list of items, you have to use <li> tags inside the <ul>. See the basic pattern below.

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

The output of the above list items looks like the below.

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

However, 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, 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?

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>
</ul>

See the output below.

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.

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 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.

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.

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