HTML Lists

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:

Shopping List

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.

ter-version="2">

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:

Unordered list of cars

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:

Unordered list results on the browser

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:

Ordered list of cars

The results on the browser will be:

ordered list results on the browser

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)

Get new content delivered directly to your inbox

Leave a Reply

%d bloggers like this: