List View in HTML

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:

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:

Output:

• Honda
• Yamaha
• Ravi
• Hero

 

Type=circle:

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:

Output:

1. Dell
2. Apple
3. Acer
4. 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.

Output:

1. Dell
2. Apple
3. Acer
4. 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>.

Output:

David

– Software Engineer

John

– Mechanical Engineer

Micheal

– Electrical Engineer

Simple Menu Bar using Un-Ordered List:

Output:

See Simple Menu Bar Using List items