What is an HTML List ?

An HTML list is simply a list of items like the one you make when you go to buy groceries for example or when someone tells you to buy this and this and this on your way home you make a list of what is asked from you so that you don’t forget it.

In general, a list looks like this:

However, in HTML there are 2 types of lists: Ordered lists and Unordered lists

1)- Unordered List

An unordered list is a list of items that you put in no specific order.

For example if you should buy apples, milk, sprouts and bread then you will buy them once in the grocery store with no specific order. You can start with milk and end with bread or start with sprouts and end with apples…

To make this kind of list with HTML we will use the <ul></ul> tag.

ul stands for unordered list. Inside this tag there will be another tag that will help list the items we want. And this tag is <li></li>.

li stands for list.

Let’s make a list of our favorite cars. The code for this will be:

So as you can see, each element we want to list we put it between the <li></li> tag.

The results on the browser will look like this:

Now let’s see how we make an ordered list.

2)- Ordered list

An ordered list is a list of items that you put in a specific order.

Let’s say that you like Tesla first, and then you like Audi, and then a little bit BMW and at last Ford and Renault.

So this time the tag we’ll use to put these items in a specific order is <ol></ol>. And ol stands for ordered list.

Same thing as per <ul></ul> tag, to list items inside our <ol></ol> tag we add the tag <li></li>.

The code for the ordered list will look like this:

The results on the browser will be:

If you have noticed, for the undordered list there are bullets in front of the items, but for the ordered list there are numbers. If you want to know how to change them to look like below you can read my next post here : https://purpose-code.com/list-style-type-css/(opens in a new tab)