Post
Ask Question

Creating List in HTML5

Introduction

 
Here we will create a list using different tags in HTML5. Tags with descriptions are given in the below table. We will use them to create list. 
 
Tag Description
<ul> Used For defining a unordered list.
<ol> Used for defining an ordered list.
<li> Used for defining an item in list.
<dl> Used for defining a list.
<dt> Used for defining an item in a definition list.
<dd> Used for describing the item of a list.
 

The <ul> tag

 
<ul> is used for unordered list. We use <li> tag for defining an item in the list. We create a list using <ul> tag. We write the following code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <ul>  
  5.             <li>Tea</li>  
  6.             <li>Coffee</li>  
  7.             <li>Milk</li>  
  8.         </ul>  
  9.     </body>  
  10. </html>  
We run this code. The output will look like the below figure:
 
<ul /> tag in HTML5
 
We can change bullets style by using type attribute as below code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <ul type="circle">  
  5.             <li>Tea</li>  
  6.             <li>Coffee</li>  
  7.             <li>Milk</li>  
  8.         </ul>  
  9.     </body>  
  10. </html>  
We run this code. The output will look like the following figure:
  
<ul /> tag in HTML5
 
We can also use type="square" for bullets style as square.
 

The <ol> tag

 
<ol> Stand for Ordered List. We use <li> tag inside <ol> and </ol> tag for defining item in list. We write the following code to use <ol> tag:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <ol>  
  5.             <li>Tea</li>  
  6.             <li>Coffee</li>  
  7.             <li>Milk</li>  
  8.         </ol>  
  9.     </body>  
  10. </html>  
 We run this code. The output will look like the below figure"
 
<ol /> tag in html5
 
We can change the character style of the ordered list. List for different style is given below:
 
Type Description
i For lower roman style
I For upper roman style
A For capital alphabets style
a For small alphabets style
 
Now, we use one from the above list by writing below code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <ol type="i">  
  5.             <li>Tea</li>  
  6.             <li>Coffee</li>  
  7.             <li>Milk</li>  
  8.         </ol>  
  9.     </body>  
  10. </html>  
Now the output will look like as below:
 
<ol /> tag in html5
 

The <li> tag

 
This tag is used with <ol> or <ul>.
 

The <dl>,<dt> and <dd> tag

 
These tags are used for creating a definition list. Its syntax is given below:
 
<dl> <dt> Item of list </dt> <dd> Description of item </dd> </dl>
 
Now we write the following code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <dl>  
  5.             <dt> Apple </dt>  
  6.             <dd>- A Fruit </dd>  
  7.             <dt> Potato </dt>  
  8.             <dd>-A Vegetable </dd>  
  9.         </dl>  
  10.     </body>  
  11. </html>  
Then, we run this code. The output will look like below: 
 
<dd /> tag in html5