In the previous video, we saw how to create ordered lists. Now, we're going to learn to create unordered lists, commonly known as bullet points.

To do this, we will use a tag called <ul> which stands for unordered list. Inside this tag, we will list out elements with the <li> tag, same as coding ordered lists.

<div>
  <ol>
    <li>My first point, with <a href="http//yahoo.com">reference materials</a></li>
    <li>My second point</li>
    <li>My third point</li>
  </ol>
</div>

<div>
  <ul>
    <li>My first point, with <a href="http//yahoo.com">reference materials</a></li>
    <li>My second point</li>
    <li>My third point</li>
  </ul>
</div>

Much of the code is similar, and that's a benefit of lists. You just have to differentiate <ol> for number lists and <ul> for bullet points, and the rest of the content is placed inside the <li> tag.

The output will also yield the same results, except one will have numbers and the other, bullet points.

Typically, you see ordered lists only when you want to have something shown in a specific order, like a workflow, where tasks must be completed in a particular order.

In all other cases, unordered lists avoid confusion. For example, you would not want a freelance to assume you know some technologies better than others by using an ordered list, but rather use an unordered list to showcase a multitude of your skills. This situation is one of the many that will lean towards the need of an unordered list over an ordered one.

Now, <ul> gives us some options the type of bullet point we want to utilize. The default is disc, but we have three other options: namely, none, square, and circle.

To implement these styles, the code should be:

<ul style ='list-style-type: disc;'>

Your style options include,

• disc - black circle, which is the default.

• none - no bullet point is displayed, but the list remains the same. This option is useful when a list content comes with a little "-" already before each line such as below:

Adding a bullet point would make it too busy, therefore making the "none" option most desirable.

• square - a bullet point that resembles a small square.

• circle - a bullet point that looks like an empty circle. Though it is similar to disc, here you can only see the outline of the circle. To see the difference look below: