 |
| Html List |
Overview
Html list uses to combine a set of related words or
content in a list. Html has three types of list order list, unorder list and
description list
<li> tag use to define list content.
Html list
Html list uses to define related words or content in a
list. There are three types of list order list, unorder list, and description
list. List content are define by using <li> tag. Order list
define by using <ol> tag. Content will show with a number. Let
look at how to declare an order list.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Order List List</title>
</head>
<body>
<ol>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Product 5</li>
</ol>
</body>
</html>
Result
 |
| Html order List Example |
Unorder list are defined by using <ul>
tag. List content goes in <li> tag. Content will
show in bulleted form. Lets see the code.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Unorder list</title>
</head>
<body>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Product 5</li>
</ul>
</body>
</html>
Result:
 |
| Html Unorder List Example |
Description list define by <dl> tag.
It has two sub tag like <dt> and <dd> tag. <dt> use
for title of description term while <dd> use for term
description. Let look example of description list.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Html Description List</title>
</head>
<body>
<dl>
<dt>Item Title 1</dt>
<dd>Item 1 description Point 1</dd>
<dd>Item 1 description Point 2</dd>
<dd>Item 1 description Point 3</dd>
<dt>Item Title 2</dt>
<dd>Item 1 description Point 1</dd>
<dd>Item 1 description Point 2</dd>
<dd>Item 1 description Point 3</dd>
<dt>Item Title 3</dt>
<dd>Item 1 description Point 1</dd>
<dd>Item 1 description Point 2</dd>
<dd>Item 1 description Point 3</dd>
<dt>Item Title 4</dt>
<dd>Item 1 description Point 1</dd>
<dd>Item 1 description Point 2</dd>
<dd>Item 1 description Point 3</dd>
<dt>Item Title 5</dt>
<dd>Item 1 description Point 1</dd>
<dd>Item 1 description Point 2</dd>
<dd>Item 1 description Point 3</dd>
</dl>
</body>
</html>
Result:
 |
| Html Description List Example |
First description title show. And under title description
show. A little bit of Left space use in the title description. As you can see in fig.
Html list style
Html list can be make stylish by using CSS. For example.
Code:
ol{
width: 30%;
list-style-type: decimal-leading-zero;
letter-spacing: 1px;
}
list-style-type: decimal-leading-zero;
This property used to how to list show like in number or
roman. By default order list set decimal. Which
start from 1,2,3, and so on. By using list-style-type: decimal-leading-zero; property list show like 01,02,03, and so on. list-style-type: upper-roman list show with roman. When we set this property none then no number shows simple list show
Example,
Style:
ol{
width: 30%;
list-style-type: upper-roman;
letter-spacing: 1px;
}
li{
border: 2px solid #eee;
margin: 4px;
padding: 5px;
}
li:hover{
background-color: #26A65B;
color: white;
font-weight: bold;
}
When we apply this style to above mention order list
code then the output will like this.
Result:
 |
| Html Order List Style Example |
When we apply the same style on unorder list and one the thing we will list-style-type: circle;
Then the output will be like this.
Result:
 |
| Html Unorder List Style Example |
We can style description list like this,
Style:
<style>
dl{
width: 40%;
letter-spacing: 1px;
}
dt{
font-weight: bold;
}
dd{
font-style: italic;
}
dt,dd{
border: 2px solid #eee;
padding: 5px;
margin-top: 4px;
margin-bottom: 2px;
}
</style>
Result:
 |
| Html Description List Style Example |
Bullet list in HTML
By default, order and unordered lists are bulleted. A description list is not bulleted.
Html list without bullets.
We can make list without bullets like this. list-style-type: none; when
we use this property. Then list will show without number or bullets. For example,
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Unorder list</title>
<style>
ul{
width: 30%;
list-style-type: none;
letter-spacing: 1px;
}
li{
border: 2px solid #eee;
margin: 4px;
padding: 5px;
}
li:hover{
background-color: #26A65B;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Product 5</li>
</ul>
</body>
</html>
Result:
 |
| Html List without bullets Example |
Nested list in html
we can use list within list. Let see the example,
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Nested list</title>
<style>
ul {
width: 30%;
list-style-type: none;
letter-spacing: 1px;
}
li {
border: 2px solid #eee;
padding: 5px;
margin: 5px;
}
ul li ul{
width: 90%;
}
ul li ul li{
margin: 2px;
}
</style>
</head>
<body>
<ul>
<li>Product 1
<ul>
<li>Title</li>
<li>Price</li>
</ul>
</li>
<li>Product 2
<ul>
<li>Title</li>
<li>Price</li>
</ul>
</li>
<li>Product 3
<ul>
<li>Title</li>
<li>Price</li>
</ul>
</li>
<li>Product 4
<ul>
<li>Title</li>
<li>Price</li>
</ul>
</li>
</ul>
</body>
</html>
Result:
 |
| Nested List Example |
0 Comments
Thanks