Understanding Lists in HTML: Ordered and Unordered


In HTML, there are lot of times when we need lists to work with. List are very helpful in case we have a set similar things to display rather than using them in a paragraph.





HTML has primarily 3 types of lists :

Ordered lists  are lists where each item in the list is numbered. For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number.

Unordered lists  are lists that begin with a bullet point (rather than characters that indicate order).

Definition lists  are made up of a set of terms along with the definitions for each of those terms.

So, we are going to see all these three in details and how to work with them.

                                                   Ordered List

The ordered list is created with the element. It is the region where the items of the list can be defined.

Each item in the list is placed between an opening tag and a closing
tag.  We insert the list items inside many li tags inside the ol tag. Actually, in this sort of list, all the items are numbered.

For Example, see the code:



Add caption



Output:



    

                                        Unordered List

The unordered list is created with the element.  It is a kind of list in which you will not find any sort of numbering rather you get bullets or dots.

Each item in the list is placed between an opening tag and a closing tag. All the items are placed inside and tags which complete the whole list. In this type of list, you can specify the bullet points like circle, square, triangle, etc. But, this is only possible through CSS.

For instance:



Output:





                       DEFINITION LISTS


dt - The definition list is created with the dl element and usually consists of a series of terms and their definitions. Inside the dl element you will usually see pairs of dt and dd elements.

dl - This is used to contain the term being defined. It is actually the term or say the heading of the list.


dd - This is used to contain the definition. This contains the content basically the paragraph of the heading used in dl.


For instance:






This is how you can create different types of lists in HTML. I hope it helps!