HTML - List

In HTML list are used when the data are to be mentioned in the form of points.there are basic three types of lists are available in HTML.

      Ordered List

      Unordered List

      Definition List

Ordered List

List having numbered items are known as ordered lists.they are used when the items the list have a natural order.

Ordered list begin with the <ol> tag, and each item uses the standard <li> tag. </li> tag is optional.if needed,you can create a list heading by using the <li> tag.close the list with the </ol> tag to signal the end of the list.

Attributes of <ol> Tag

Attributes

Description

type=A

Sets markers to uppercase letters

type=a

Sets markers to lowercase letters

type=I

Sets markers to uppercase Roman numerals

type=i

Sets markers to lowercase Roman numerals

type=1

Sets markers to numbers

start

Sets beginning value of item markers in the current list

Attributes of <li> Tag

Attributes

Description

value=number

gives separate value to an individual item


Example


<html>
<head>
	<title>HTML - List</title>
</head>
<body>
<h2>Item List</h2>
<hr>
<ol type="1">
<li>Mouse</li>
<li>Mobile</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Leptop</li>
</ol>
</body>
</html>
							

Output on Webpage


Item List


  1. 1 Mouse
  2. 2 Mobile
  3. 3 Keyboard
  4. 4 CPU
  5. 5 Leptop

Unordered List

These list are characterized by list items that do not have numbers.they are used when the points in the list have no particular order.unordered list is just like a bullet list of ms word.unordered lists begin with the <ul> tag.and each items uses the standard <li> tah and end with </li> tag.

Use the type attribute to change the bullet used in the list.its value can be one of disc,square,circle.

Example


<html>
<head>
	<title>HTML - List</title>
</head>
<body>
<h2>Item List</h2>
<hr>
<ul type="circle">
<li>Mouse</li>
<li>Mobile</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Leptop</li>
</ul>
</body>
</html>
							

Output on Webpage


Item List


  •   Mouse
  •   Mobile
  •   Keyboard
  •   CPU
  •   Leptop

Definition List

Definition lists have a heading and the text appears below that.a term is displayed on new line with its definition or explanation.

This list is created using <dl> tag and it ends with </dl> tag, between them you can use <dt> tag to denote definition term and <dd> tag to denote its corresponding definition.

Example


<html>
<head>
	<title>HTML - List</title>
</head>
<body>
<h3>Achronyms</h3>
<dl>
	<dt>HTML</dt>
	<dd>Hyper Text Mark-Up Language</dd>
	<dt>FTP</dt>
	<dd>File Transfer Protocol</dd>
</dl>
</body>
</html>
							
Share Share on Facebook Share on Twitter Share on Google+ Share on LinkedIn Pin on Pinterest Share on Stumbleupon Share on Tumblr Share on Reddit Share on Diggit