Lists <ul> <ol> <dl>

Lists are an essential part of websites. They are used more than you think 🤔.

Make a list

In HTML, just use the <li> tag to make a list.

Easy! There are more parts in there.

Unordered List

This is simply a list. We can say it is an unordered list, which is by default.

But, we can explicitly tell the browser that it is an unordered list.

Results are the same, but we are just telling the browser explicitly, to make this list an unordered list.

Ordered List

Similarly, we have an ordered list.

Just change the <ul> tag to <ol> and it shows the order, instead of bullet points.

There is so much to explore, list can we change the bullet points? Can we change the order and start with 0, instead of 1? Can we use ABCD, instead of numbers?
Even more, just keep browsing, and do not remember everything, just know this can be done, and look up on the internet, when you need to do this.

Definition List <dl>

This is just a little different than the other two list types, as this is used as two types of items in each list item.

In the case of ordered/unordered lists, we only had items.

But now, we have two parts in each item. One is called the key, and the other is value. And entirely, the item is called a key-value pair.

So, we tell the browser that it is a definition list, by <dl> tag, as a wrapper over all of the items.

Then, there is <dt> tag, which stands for data-term. It tells the browser that it is the main word, and later on, there will be a definition of it.

So, for the definition, after <dt>, there comes <dd> tag which stands for data-definition.

And there can be more than one <dd> tag for each <dt> tag.

Also, notice that we are not wrapping <dt> and <dd> together. Browser just understands based on the order they appear.

Easy!