HTML list is just like a list of products that we used make in daily life. 1. Unordered List 2. Ordered List 3. Description or Definition List An unordered list is a collective list of the relative items that has no special order. html list item unordered list html ordered list html html img html color html color codes html table what is list in html nested list html html list of links tag bullet learn html5 learn advanced html
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>



HTML5 Tutorial - HTML List

Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

3 comments:


  1. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.I am waiting for your next fantastic blog.Thanks for sharing.Any coures related details learn...

    web designing course in chennai

    ReplyDelete
  2. Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!
    Web Design Training

    ReplyDelete
  3. Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. pingtung website design

    ReplyDelete