HTML - Lists

Say, your Mother has asked you to go to the local market and get few vegetables. And she had listed them in a piece of paper in the below way.

Now, if you are asked to list them in an HTML page, how would you do that?

Well! HTML List is the answer.

HTML Lists provides you a way to represent list of elements in an HTML page.

Mainly there are three types Lists used in HTML :

Let us understand them in detail.

Ordered Lists in HTML represents elements in a particular order. For example the below elements are in numeric order.

i.e. The elements Potato, Carrot, Tomato and Cucumber are represented using the numbers 1, 2, 3 and 4.

Now, let us see, how can we write the same in HTML.

Now, if you look at the above output, the elements are ordered using the numbers 1, 2, 3 and 4.

And to achieve it, we have used the <ol> and <li> tags. Where <ol> tag stands for Ordered List and <li> tag stands for List.

So, all we have done is, listed out four elements using the <li> tag.

Then enclosed all the elements using the <ol> tag.

In simple words, we have asked HTML to display the elements in numeric order.

Now, what if you want to display the elements in reverse numeric order.

Well! There in an attribute called reversed. It will display the elements in reverse numeric order.

Next, let us say, you have a requirement where you need to display the elements in the same numeric order. But the numbers would start from 7.

It can be achieved using the start attribute with the <ol> tag.

So, if you look at the output, the elements are displayed in numeric order starting with the number 7.

So far we have seen the elements were displayed in numeric order. Now, what if we want to display the elements in alphabetical order or using roman numbers.

The type attribute with the <ol> tag gives us the flexibility to do so.

In the below example, we will display the elements in alphabetical order using the type attribute with the <ol> tag.

So, if you look at the above output, the elements are represented using alphabetical order using a, b, c and d.

And we have achieved the above using the letter a with the type attribute.

Now, if you want to display the elements in the same alphabetical order, but the letters should be capital letters. i.e. A, B, C and D.

It is quite simple. Just use A (i.e. In capital letter) with type attribute.

Next, if we want to display the elements using roman numbers, you need to use i with the type attribute of <ul> tag.

Next let us look at Unordered Lists.

So far we have seen Ordered Lists, where the list elements would be displayed in numeric or alphabetical order.

But in case of Unordered Lists, the list elements won't be displayed in numeric or alphabetical order. Rather the list elements would be displayed using bullets(A black dot).

So far we have seen Ordered and Unordered Lists. Now, let us say we need to have a description of the list elements. i.e. Your Mother had asked you to get 1 KG Potato, 2 KG Carrot, 1 KG Tomato and 3 KG Cucumber.

Let us see how can we achieve the same using Description Lists.

So, if you look at the above code, we have used three tags, <dl>, <dt> and <dd> tags.

So, what we have done is, used the <dt> and <dd> tags to represent the list element and its description.

And placed them inside the <dl> tag.