Introduction: Here we will create list
using different tag in HTML5. Tags with description are given in below table. We
will use them to create list.
| Tag |
Description |
| <ul> |
Used For
defining a unordered list. |
| <ol> |
Used for
defining a ordered list. |
| <li> |
Used for
defining an item in list. |
| <dl> |
Used for
defining a list. |
| <dt> |
Used for
defining an item in definition list. |
|
<dd> |
Used for describing the item of list. |
The <ul> tag
<ul> is used for unordered list. We use <li>
tag for defining item in list. We create a list using <ul> tag. We write the
following code
<!DOCTYPE HTML>
<html>
<body>
<ul>
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ul>
</body>
</html>
We run this code. The output will look like below figure
![<ul> tag in HTML5]()
We can change bullets style by using type
attribute as below code
<!DOCTYPE HTML>
<html>
<body>
<ul type="circle">
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ul>
</body>
</html>
We run this code. The output will look like 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
<!DOCTYPE HTML>
<html>
<body>
<ol>
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
</html>
We run this code. The output will look like below figure
![<ol> tag in html5]()
We can change character style of 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 above list by writing
below code
<!DOCTYPE HTML>
<html>
<body>
<ol type="i">
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
</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 tag are used for creating 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.
<!DOCTYPE HTML>
<html>
<body>
<dl>
<dt> Apple </dt>
<dd>- A Fruit </dd>
<dt> Potato </dt>
<dd>-A Vegetable </dd>
</dl>
</body>
</html>
Then, we run this code. The output will look like below
![<dd> tag in html5]()