HTML 5 - Elements: LIST
softetechnologies
04-05-2017    2071 times
HTML LIST

Introduction

In HTML, following three types of list is possible.

  • Order list, Numbers : <ol>
  • Unorder list, Bullets : <ul>
  • Defnation list : <dl>

To create the list we use the <li></li> tag. It is always use as a sub tag of <ol> </ol> or <ul> </ul>.


Note: these lists are converting into menu (vertical or horizontal) by using the css stylesheet and JQuery.

HTML – Order List

<h4>Order List</h4>
<ol>
<li>HTML</li>
<li>JQuery </li>
<li>Java Script</li>
</ol>

order-list
Order List

Different Starting Number of Order List

We can change the starting number of the list by change the value of the start attribute.

<h4>Order List start from 2</h4>

<ol start=”2”>

<li>HTML</li>

<li>JQuery </li>

<li>Java Script</li>

 </ol>

order-list-start-no
Order List Start From 2

Different Type of Order List

By default, order list type is numeric by we can set it by changing the value of type attribute.

Private Teacher

<html>

<body>

<h4>Default List Type</h4>

<ol>

<li>HTML</li>

<li>JQuery </li>

<li>Java Script</li>

</ol>

<h4>small alphabet list </h4>

<ol type="a">

<li>HTML</li>

<li>JQuery </li>

<li>Java Script</li>

</ol>

<h4>Capital alphabet list </h4>

<ol type="A">

<li>HTML</li>

<li>JQuery </li>

<li>Java Script</li>

</ol>

<h4>small Italic list </h4>

<ol type="i">

<li>HTML</li>

<li>JQuery </li>

<li>Java Script</li>

</ol>

Tutorial at home
Tutorial at home

<h4>Big Italic list </h4>

<ol type="I">

<li>HTML</li>

<li>JQuery </li>

<li>Java Script</li>

</ol>

</body>

</html>

different-type-order-list
Different Type Order List

HTML – Unorder List

In this type of list bullet will displayed in the place of numbers. Three types of bullets are displayed depending on the value of the type attribute. Default value of the type is Disc. Others types are circle and square.

<html>

<body>

<h4>Disc</h4>

<ul type="Disc">

<li>HTML</li>

<li>JQuery </li>

<li>Java Script</li>

</ul>

<h4>circle</h4>

<ul type="circle">

<li>HTML</li>

<li>JQuery </li>

<li>Java Script</li>

</ul>

<h4>Square</h4>

<ul type="Square">

<li>HTML</li>

<li>JQuery </li>

<li>Java Script</li>

</ul>

</body>

</html>

unorderlist-type
Unorderlist Type
Tutorial at home
Private Teacher

HTML - The definition list

We can create a list of definition by using the <dl> and <dd>tag.

<html>

<body>

<dt>Input Devices</dt>

<dd>These devices are used to supply raw data to the computer. e.g Keyboard, Mouse</dd>

<dt>Output Devices</dt>

<dd> These devices are used to receive information from the computer. e.g monitor, Printer </dd>

</body>

</html>

defination-table
Defination Table
softetechnologies
softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post