HTML Tutorial
HTML Attributes
- html-global-attributes
- html-event-attributes
HTML Tags List
HTML5 Advance
HTML API
HTML Color Names
- html-color-names
HTML Misc
MCQ
- html-mcq
Interview Questions
- html-interview-questions

How to make a List in Html

In Html, we can create three type of List:

Unordered List
Ordered List
Description List

Unordered List

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.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create Unordered list
</Title>
</Head>
<Body> 
The list which is shown below is an unordered list:
</Body> 
</Html>

Step 2: Now, we have to place the cursor at that point in the tag where we want to display the unordered list. And, then we have to type the

<Body> 
<ul>
</Body> 

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 ">

tag
tag before typing the item. And, after typing each item we have to close the
tag.

<Body> 
<ul>
<li> First Unordered item </li>
<li> Second Unordered item </li>
</Body> 

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

<Body> 
<ul>
<li> First Unordered item </li>
<li> Second Unordered item </li>
<li> Third Unordered item </li>
<li> Fourth Unordered item </li>
<li> Fifth Unordered item </li>
<li> Sixth Unordered item </li>
</ul> 
</Body> 

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

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create Unordered list
</Title>
</Head>
<Body> 
The list which is shown below is an unordered list:
<ul>
<li> First Unordered item </li>
<li> Second Unordered item </li>
<li> Third Unordered item </li>
<li> Fourth Unordered item </li>
<li> Fifth Unordered item </li>
<li> Sixth Unordered item </li>
</ul>
</Body> 
</Html>

Test it Now

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

Ordered List

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.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create ordered list
</Title>
</Head>
<Body> 
The list which is shown below is an ordered list:
</Body> 
</Html>

Step 2: Now, we have to place the cursor at that point in the tag where we want to display the ordered list. And, then we have to type the

tag, which is used for displaying the items in some sequence.

<Body> 
<ol>
</Body> 

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

tag. So, we have to type the opening
tag before typing each item. And, after typing each item we have to close the
tag.

<Body> 
<ol>
<li> apple </li>
<li> Mango </li>
</Body> 

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

<Body> 
<ol>
<li> apple </li>
<li> Mango </li>
<li> Pineapple </li>
<li> Orange </li>
<li> Banana </li>
</ol>
</Body> 

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

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create ordered list
</Title>
</Head>
<Body> 
The list which is shown below is an ordered list:
<ol>
<li> apple </li>
<li> Mango </li>
<li> Pineapple </li>
<li> Orange </li>
<li> Banana </li>
</ol>
</Body> 
</Html>

Test it Now

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

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.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create Description list
</Title>
</Head>
<Body> 
The list which is shown below is an description list:
</Body> 
</Html>

Step 2: Now, we have to place the cursor at that point in the tag where we want to display the description list. And, then we have to type the

tag, which is used for displaying the items and theie description.

<Body> 
<dl>
</Body> 

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

tag before typing each term. And, after typing each item we have to close the

tag.

<Body> 
The list which is shown below is an description list:
<dl>
<dt> <b> 
HTML 
</b> </dt>
</Body> 

Step 4: After then, we have to define the description for each term. For defining the description, we have to use the

tag. So, we have to type the opening

tag just after the closing tag of each term. And, after typing each description we have to close the

tag.

<Body> 
The list which is shown below is an description list:
<dl>
<dt> HTML </dt>
<dd>
Hyper Text Markup Language </dd>
<dt> CSS </dt>
<dd> Cascading Stle sheet </dd>
<dt> UL </dt>
<dd> Unordered List </dd>
</Body> 

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

<Body> 
The list which is shown below is an description list:
<dl>
<dt> HTML </dt>
<dd>
Hyper Text Markup Language </dd>
<dt> CSS </dt>
<dd> Cascading Stle sheet </dd>
<dt> UL </dt>
<dd> Unordered List </dd>
</dl>
</Body> 

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

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create Description list
</Title>
</Head>
<Body> 
The list which is shown below is an description list:
<dl>
<dt> <b> 
HTML 
</b> </dt>
<dd>
Hyper Text Markup Language
</dd>
<dt> <b>
CSS
</b>
</dt>
<dd>
Cascading Stle sheet
</dd>
<dt> <b>
UL
 </b> </dt>
<dd>
Unordered List
</dd>
<dt> <b>
OL
</b>
</dt>
<dd>
Ordered List
</dd>
</dl>
</Body> 
</Html>

Test it Now

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