Prev Next

Elements: Text Formatting Elements: Symbol

Elements: LIST - HTML 5

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

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

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>

<li>JQuery </li>

<li>Java Script</li>

</ol>

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.

<html>

<body>

<h4>Default List Type</h4>

<ol>

<li>JQuery </li>

<li>Java Script</li>

</ol>

<h4>small alphabet list </h4>

<li>JQuery </li>

<li>Java Script</li>

</ol>

<h4>Capital alphabet list </h4>

<li>JQuery </li>

<li>Java Script</li>

</ol>

<h4>small Italic list </h4>

<li>JQuery </li>

<li>Java Script</li>

</ol>

<h4>Big Italic list </h4>

<li>JQuery </li>

<li>Java Script</li>

</ol>

</body>

</html>

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>

<li>JQuery </li>

<li>Java Script</li>

</ul>

<h4>circle</h4>

<li>JQuery </li>

<li>Java Script</li>

</ul>

<h4>Square</h4>

<li>JQuery </li>

<li>Java Script</li>

</ul>

</body>

</html>

Unorderlist Type

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

Prev Next

Elements: Text Formatting Elements: Symbol

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.