List View in HTML
In HTML there is three type of list are:
- Unordered Lists
- Ordered Lists
- Descriptive lists
Unordered list:
This is a type of list items but all the items are shown by using bullets, box, and circles. The <ul> unordered tag is used for starting the list and </ul> terminates the list.
<li> called list-item which is bound inside the <ul> or <ol> tags which mean they are the items of list.
Syntax:
<ul> <li> //……. /// </li> </ul>
Example:
1 2 3 4 5 6 7 8 |
<body> <ul> <li>Honda</li> <li>Yamaha</li> <li>Ravi</li> <li>Hero</li> </ul> </body> |
Output:
- Honda
- Yamaha
- Ravi
- Hero
Attributes:
The type attribute defines the bullet style of the list like by default it is the circle. Others are disc, box, square, none.
Type=square:
1 2 3 4 5 6 7 8 |
<body> <ul type="square"> <li>Honda</li> <li>Yamaha</li> <li>Ravi</li> <li>Hero</li> </ul> </body> |
Output:
- Honda
- Yamaha
- Ravi
- Hero
Type=circle:
1 2 3 4 5 6 7 8 |
<body> <ul type="circle"> <li>Honda</li> <li>Yamaha</li> <li>Ravi</li> <li>Hero</li> </ul> </body> |
Output:
- Honda
- Yamaha
- Ravi
- Hero
Ordered List:
It is same as unordered list the only difference is unordered list show bullets and it show some numbering or roman number and alphabetic also.
In above just replace <ul> with <ol> tag and it became order-list.
Example:
1 2 3 4 5 6 7 8 |
<body> <ol> <li>Dell</li> <li>Apple</li> <li>Acer</li> <li>Haier</li> </ol> </body> |
Output:
- Dell
- Apple
- Acer
- Haier
It also has the type attribute and by default, it is numbered and shows count that starts from 1.
Other types are 1, a, A, I, i.
1 2 3 4 5 6 7 8 |
<body> <ol type="A"> <li>Dell</li> <li>Apple</li> <li>Acer</li> <li>Haier</li> </ol> </body> |
Output:
- Dell
- Apple
- Acer
- Haier
Descriptive List:
The descriptive list is bit deferent from order and unordered list as they have <ol> or <ul> tags and <li> tag in both of them, but descriptive lists have <dl> main tag means descriptive list and inside it there are descriptive terms <dt> which acts as <li> list item and every descriptive term has data definition <dd>.
1 2 3 4 5 6 7 8 9 10 |
<body> <dl> <dt>David</dt> <dd>- Software Engineer</dd> <dt>John</dt> <dd>- Mechanical Engineer</dd> <dt>Micheal</dt> <dd>- Electrical Engineer</dd> </dl> </body> |
Output:
- David
- – Software Engineer
- John
- – Mechanical Engineer
- Micheal
- – Electrical Engineer
Simple Menu Bar using Un-Ordered List:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> li{padding:10px;margin:auto 10px;display:block;float:left; background-color:skyblue;font-weight:bold ;cursor:pointer;box-shadow:2px 2px 10px blue} ul{width: 90%; border: 2px solid grey;margin: auto;height: 6%;background-color: lightblue;} li:hover{color:green;box-shadow:2px 2px 10px black;} </style> <body> <ul> <li>Dell</li> <li>Apple</li> <li>Acer</li> <li>Haier</li> </ul> </body> |
Output:
See Simple Menu Bar Using List items