Javatpoint Logo
Javatpoint Logo

How to make a List in Html

In Html, we can create three type of List:

  1. Unordered List <ul>
  2. Ordered List <ol>
  3. Description List <dl>

Unordered List <ul>

An unordered list is a collection or set of items whose order or sequence does not matter. If we want to create the Unordered list in the Html document to show the items on the web page then we have to follow the steps which are given below. Using these steps, we can easily create an unordered list.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to create the unordered list.

Step 2: Now, we have to place the cursor at that point in the <body> tag where we want to display the unordered list. And, then we have to type the <ul> tag, which is used for creating the unordered list.

Step 3: After that, we have to define the items which we want to show as unordered on the web page. For that, we have to use the "><li> tag. So, type the opening <li> tag before typing the item. And, after typing each item we have to close the <li> tag.

Step 4: When we typed all the items then we have to close the list by closing the tag.

Step 5: And, at last, we have to save the Html file and then run the file in the browser.

Test it Now

The output of the above Html code is shown in the following screenshot:

How to make a List in Html

Ordered List <ol>

If we want to create the Ordered list in the Html document to show the items on the web page in a sequence then we have to follow the steps which are given below. Using these steps, we can easily create an ordered list.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to create the ordered list.

Step 2: Now, we have to place the cursor at that point in the <body> tag where we want to display the ordered list. And, then we have to type the <ol> tag, which is used for displaying the items in some sequence.

Step 3: After that, we have to define the items which we want to show in a sequence on the web page. For that, we have to use the <li> tag. So, we have to type the opening <li> tag before typing each item. And, after typing each item we have to close the <li> tag.

Step 4: When we typed all the items then we have to close the list by closing the tag.

Step 5: And, at last, we have to save the Html file and then run the file in the browser.

Test it Now

The output of the above Html code is shown in the following screenshot:

How to make a List in Html

Description List

Description list is a list of items with their description and definition.

If we want to create the Description list in the Html document to show the items on the web page with their description then we have to follow the steps which are given below. Using these steps, we can easily create a description list.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to create the description list.

Step 2: Now, we have to place the cursor at that point in the <body> tag where we want to display the description list. And, then we have to type the <dl> tag, which is used for displaying the items and theie description.

Step 3: After that, we have to define the term which we want to show in a description list on the web page. For that, we have to use the <dt> tag. So, we have to type the opening <dt> tag before typing each term. And, after typing each item we have to close the <dt> tag.

Step 4: After then, we have to define the description for each term. For defining the description, we have to use the <dd> tag. So, we have to type the opening <dd> tag just after the closing tag of each term. And, after typing each description we have to close the <dd> tag.

Step 5: When we typed all the terms with their descriptions then we have to close the list by closing the tag.

Step 6: And, at last, we have to save the Html file and then run the file in the browser.

Test it Now

The output of above Html code is shown in the following screenshot:

How to make a List in Html




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA