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