HTML5 Tutorial - HTML List

In this chapter we are going to study about HTML lists. HTML list is just like a list of products that we used make in daily life. With below example you can understand much better.


Below is the list of fruits

• Apple
• Banana
• Grapes
• Mango
• Guava

How many types of HTML List

Basically there are three types of lists in HTML

1. Unordered List
2. Ordered List
3. Description or Definition  List

All above are the ways that HTML offers to specify a list on the web page. Each type of list contains one of more elements to define a list and different types of attributes as well. Attributes in HTML list are very important in order to decorating the list in good looking and meaningful manner.

Unordered list

An unordered list is a collective list of the relative items that has no special order. With this type we can list the items with plain bullets and bullet can also be defines with attributes. To specify the unordered list on web page we use <ul> tag.  This tag create the list and inside the <ul> and </ul> tags list items can be defined which is written between <li> and </li> tags. Find in the below example

Example - 1

<ul>
 <li>Apple</li>
 <li>Banana</li>
 <li>Grapes</li>
 <li>Mango</li>
 <li>Guava</li>
</ul>

In above example you can see that list is defined with plain bullets it can be change with ‘type’ attribute.

Unordered list type attribute

With type attribute bullets can change or removed. ‘Type’ attribute can be used inside the opening <ul> tag.  Here is possible values of type attribute that can be define with unordered list.
Possible values of type attribute HTML5 unordered list:

1. Disc
2. Square
3. Circle
4. none

How to use:

<ul type = “disc”></ul>
<ul type = “square”></ul>
<ul type = “circle”></ul>
<ul type = “none”></ul>

Tips: Using “none” value in type attribute will remove the bullets from the unordered list. It is specially used while creating horizontal menu bars.

Example - 2

<ul type = "disc">
  <li>Apple</li>
  <li>Banana</li>
  <li>Grapes</li>
  <li>Mango</li>
  <li>Guava</li>
</ul>

Example - 3

<ul type = "square">
  <li>Apple</li>
  <li>Banana</li>
  <li>Grapes</li>
  <li>Mango</li>
  <li>Guava</li>
</ul>

Example - 4

<ul type = "circle">
  <li>Apple</li>
  <li>Banana</li>
  <li>Grapes</li>
  <li>Mango</li>
  <li>Guava</li>
</ul>

Example - 5

<ul type = "none">
  <li>Apple</li>
  <li>Banana</li>
  <li>Grapes</li>
  <li>Mango</li>
  <li>Guava</li>
</ul>

Unordered list and CSS

Unordered list can be styled with CSS also. Values of type attribute can be used as CSS property values. CSS property “list-style-type” can be used to modify the list bullets. Check the below example.

Example - 6

<style>
  #list_1{
   list-style-type:disc;
  }
</style>

<ul id = "list_1">
  <li>Apple</li>
  <li>Banana</li>
  <li>Grapes</li>
  <li>Mango</li>
  <li>Guava</li>
</ul>

Tips: We usually use unordered list to create menu-bars or nav-bars in HTML.

We can study more about ‘unordered list CSS’ in CSS chapter.

Ordered List

An ordered list is a collective list of the relative items with different schemes of number. With this type we can list the item with different schemes of numbers instead of the plain bullets. To specify HTML ordered list on web page we use <ol> tag. This tag create the list and inside the <ol> and </ol> tags list items can be defined which is written between <li> and </li> tags. Find in the below example

Example - 7

<ol>
  <li>Facebook</li>
  <li>Twitter</li>
  <li>YouTube</li>
  <li>Google+</li>
</ol>

Above example shows the default execution of an ordered list which is defined in normal way without any attributes. Styling of the numbers can be changed with “type” attributes. Find the below example and try yourself

Example - 8

<ol type = "1">
  <li>Facebook</li>
  <li>Twitter</li>
  <li>YouTube</li>
  <li>Google+</li>
</ol>

<ol type = "I">
  <li>Facebook</li>
  <li>Twitter</li>
  <li>YouTube</li>
  <li>Google+</li>
</ol>

<ol type = "A">
  <li>Facebook</li>
  <li>Twitter</li>
  <li>YouTube</li>
  <li>Google+</li>
</ol>

Tips: “Type” value as “none” sets the ordered list in default mode.

Start Attribute

Start attribute empower us to create list items with custom starting point with any serial no. This attribute defined inside <ol> opening tag. Follow the example for possible methods to use start attributes.

Example - 9

<ol type = "1" start = "3">
  <li>Facebook</li>
  <li>Twitter</li>
  <li>YouTube</li>
  <li>Google+</li>
</ol>

Tips: Start attribute value always should be a numeral whether ordered list type is numeral or alphabetical.

HTML Description Lists

A description list or definition list is a list of terms with description of each term.  In other words we can say the description list is created like terms and description pairs.

Example - 10

<dl>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheet</dd>
  <dt>PHP</dt>
  <dd>Hypertext Pre Processor</dd>
</dl>

<dl> tag defines the list, <dt> tag defines the terms of the list and lastly <dd> tag defines the description of the relative terms. It forms the list like an encyclopedia.

All types of list can be nested and created as links

HTML list can be nested with other HTML elements and can be formed as complex list. We can also use anchor tag, image tag, video tag and audio tag also to create menu bars, list of image, videos or audios as well.

Example - 11

<ul>
  <li>Client Side Script
   <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Java Script</li>
   </ul>
  </li>
  <li>Server Side Script
   <ul>
    <li>PHP</li>
    <li>ASP</li>
    <li>JSP</li>
   </ul>
  </li>
  <li>Database
   <ul>
    <li>SQL</li>
    <li>Mongo DB</li>
    <li>Pearl</li>
   </ul>
  </li>
</ul>

Example - 11(A)

<ul>
  <li><img src = "example.jpg"></li>
  <li><a href = "#">HTML</a></li>
  <li>
   <video>
    <source src = "example.mp4" type = "video/mp4"/>
   </video>
  </li>
  <li>
   <audio>
    <source src = "example.mp3" type = "audio/mp3"/>
   </audio>
  </li>
</ul>

List inside list

A list can be nested inside the list to create menu bars. Check the example
This an example of vertical menu bar.

Example - 12

<style>
  ul{
   list-style-type:none;
   margin:0px;
   padding:0px;
   font-weight:bold;
   text-align:center;
   width:100px;
  }
  a{
   padding:16px;
   text-decoration:none;
   color:#424242;
  }
  li, a{
   display:block;
  }
  ul li:nth-child(even){
   background:lightgray;
  }
  ul li:nth-child(odd){
   background:skyblue;
  }
  ul li:nth-child(even):hover{
   box-shadow: 0px 0px 2px 2px skyblue;
  }
  ul li:nth-child(odd):hover{
   box-shadow: 0px 0px 2px 2px lightgray;
  }
</style>

<ul>
  <li><a href = "#">HTML</a></li>
  <li><a href = "#">CSS</a></li>
  <li><a href = "#">JS</a></li>
  <li><a href = "#">SQL</a></li>
  <li><a href = "#">PHP</a></li>
</ul>

This an example of horizontal menu bar.

Example - 13

<style>
  ul{
   list-style-type:none;
   margin:0px;
   padding:0px;
   font-weight:bold;
   text-align:center;
   width:100px;
  }
  li{
   float:left;
  }
  a{
   padding:16px;
   text-decoration:none;
   color:#424242;
  }
  li, a{
   display:block;
  }
  ul li:nth-child(even){
   background:lightgray;
  }
  ul li:nth-child(odd){
   background:skyblue;
  }
  ul li:nth-child(even):hover{
   box-shadow: 0px 0px 2px 2px skyblue;
  }
  ul li:nth-child(odd):hover{
   box-shadow: 0px 0px 2px 2px lightgray;
  }
</style>

<ul>
  <li><a href = "#">HTML</a></li>
  <li><a href = "#">CSS</a></li>
  <li><a href = "#">JS</a></li>
  <li><a href = "#">SQL</a></li>
  <li><a href = "#">PHP</a></li>
</ul>

Related Topics