How to use 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:

Example:

<body>
  <ul>
  <li>Honda</li>
  <li>Yamaha</li>
  <li>Ravi</li>
  <li>Hero</li>
  </ul>
</body>

<body>

<ul>

<li>Honda</li>

<li>Yamaha</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:

<body>
     <ul type="square">
          <li>Honda</li>
          <li>Yamaha</li>
          <li>Ravi</li>
          <li>Hero</li>
     </ul>
</body>

<body>

<li>Honda</li>

<li>Yamaha</li>

</ul>

</body>

Output:

Honda
Yamaha
Ravi
Hero

Type=circle:

<body>
     <ul type="circle">
             <li>Honda</li>
             <li>Yamaha</li>
             <li>Ravi</li>
             <li>Hero</li>
     </ul>
</body>

<body>

<li>Honda</li>

<li>Yamaha</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:

<body>
     <ol>
         <li>Dell</li>
         <li>Apple</li>
         <li>Acer</li>
         <li>Haier</li>
     </ol>
</body>

<body>

<ol>

<li>Apple</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.

<body>
<ol type="A">
    <li>Dell</li> 
    <li>Apple</li>
    <li>Acer</li>
    <li>Haier</li>
</ol>
</body>

<body>

<li>Apple</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>.

<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>

<body>

<dl>

<dt>David</dt>

<dd>- Software Engineer</dd>

<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:

<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>

<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>Apple</li>

<li>Haier</li>

</ul>

</body>

Output:

See Simple Menu Bar Using List items

Share this: