×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Elements: Text Formatting Elements: Symbol
Elements: LIST - HTML 5
3281    Arnab De    04/05/2017

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


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

softetechnologies

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

softetechnologies

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

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
Elements: Text Formatting Elements: Symbol
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.
Enter New Comment
Comment History
No Comment Found Yet.
Albert Einstein
Education is not the learning of facts. It is rather the training of the mind to think
Albert Einstein
760
27.09
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     32016
28/06/2017     27107
02/08/2017     24056
26/05/2018     22400
15/05/2017     20703
06/07/2017     19659
01/08/2017     17964
21/04/2018     17537
01/07/2017     15044
25/04/2018     14306
softetechnologies