HTML Lists

HTML Lists

Introduction

In HTML there are three types of list ordered, unordered and definition lists. With the name itself you might be understanding that what is list. Yes you are thinking in the right way.

It is the list of anything e.g. list of items, list of books.

Hope now you are clear about the List element of the HTML. Now the question is that, can you create the list of items in the web page? Certainly not, But do not worry with the help of this small chapter you can create any type of lists on the your web page very easily. And it will take few of your minutes to learn. So lets Begain!

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles), it does not have numbers in the list.
An unordered list starts with the <ul> tag and end with </ul>. list items are defined in between <ul> & </ul>. Each list item is surrounded by the <li> & </li> tag.

<ul> tag is used for unordered list. Between <ul> & </ul> you have to enter list of items.

<li> tag is used for list item. Each list item is surrounded by <li> & </li> tag.


Format:
<ul> <li> item1 </li> <li> item2 </li> .......<li> itemn </li></ul>

Example
Output
<ul>
<li>Text Book</li><li>Note Book</li>
<li>Pen</li><li>Pencil</li>
</ul>
  • Text Book
  • Note Book
  • Pen
  • Pencil

Just write/copy this example inside the body of the HTML file and save the file and open in the browser and see how it looks.

So now you have learned how to create the unordered list in the web page.


Ordered List

An ordered list is also a list of items. The list items are marked with numbers not with the bullets.

An ordered list starts with the <ol> tag and end with </ol>. list items are defined in between <ol> & </ol>. Each list item is surrounded by the <li> & </li> tag.

<ol> tag is used for ordered list. Between <ol> & </ol> you have to enter list of items.

<li> tag is used for list item. Each list item is surrounded by <li> & </li> tag.


Format:
<ol> <li> item1 </li> <li> item2 </li> .......<li> itemn </li></ol>

Example
Output
<ol>
<li>Text Book</li><li>Note Book</li>
<li>Pen</li><li>Pencil</li>
</ol>
  1. Text Book
  2. Note Book
  3. Pen
  4. Pencil

Just write/copy this example inside the body of the HTML file and save the file and open in the browser and see how it looks.

So now you have learned how to create the ordered list in the web page. More over if you are looking for more options then you can have list containing Roman numbers, alphabets in the list instead of numbers (1,2,3...n). Ordered list have an attribute called type="value".

And you know how to define the attribute of any element inside it. type attribute have different values.


Format:
<ol type="value"> <li> item1 </li> <li> item2 </li> .......<li> itemn </li></ol>

Attribute
Value
Description
type
A
a
I
i
1
Specifies ordered list containing capital alphabets.
Specifies ordered list containing small alphabets.
Specifies ordered list containing big Roman alphabets.
Specifies ordered list containing Small Roman alphabets.
Specifies ordered list containing numbers.


Definition List

A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.

<dl> tag is used for definition list. Between <dl> & </dl> you have to enter list of items.

<dt> tag is used for list item terms. Each list item is surrounded by <dt> & </dt> tag.

<dd> tag is used for the definition-list definition.


Format:
<dl> <dt> Term1 </dt> <dd> Term definition.<dd> .......<dt> itemn </dt>....</dl>

Example
Output
<dl>
<dt>Books</dt>
<dd>Books are the great friends.</dd>
<dt>Pen</dt>
<dd>Pen is the biggest power</dd>
</dl>
Books
Books are the great friends.
Pen
Pen is the biggest power

Just write/copy this example inside the body of the HTML file and save the file and open in the browser and see how it looks.

So now you have learned how to create the ordered list in the web page. Now you have done a lot in the list now you saw how simple list are.


Example

Now lets do some Practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:
<html>
<head>
<title> Lists </title>
</head>
<body>
Unordered List
<ul>
<li>Text Book</li>
<li>Note Book</li>
</ul> Ordered List with numbers
<ol>
<li>Text Book</li>
<li>Note Book</li>
</ol> Ordered List with Roman numbers
<ol type="i">
<li>Text Book</li>
<li>Note Book</li>
</ol> Ordered List with small character
<ol type="a">
<li>Text Book</li>
<li>Note Book</li>
</ol> Definition List
<dl>
<dt>Books</dt>
<dd>Books are the great friends.</dd>
<dt>Pen</dt>
<dd>Pen is the biggest power.</dd>
</dl>
</body>
</html>

Page in browser will look like:



Now you have seen how in HTML, three types of list ordered, unordered and definition lists are created.


Comments

Post a Comment

Popular posts from this blog

Multimedia

Multimedia Introduction In multimedia, you will learn how to provide the songs, video and picture (images) in your web page. How it will feel to you that whenever you open your web page it starts singing, playing movie, or display your family picture. You can learn all of these things very easily. Just go on reading the Chapter and learn the Magic of the multimedia elements. Working with Images In this section you will learn about "how the images can be used in HTML". 1. How you can create a page with image as background. 2. How you can make a picture as a hyperlink to another file (any type of file). How to Hyperlink an Image To hyperlink an image first we have to insert the image on the web page. So question is how to insert the image on the web page. In ...
Read more

1.Introduction of HTML

Image
Introduction of HTML What is HTML? HTML is a language made for creating the web pages for the websites. By using HTML language the even a child can make his web pages or even his own website so why not you? Introduction of HTML Why do Need HTML? As the HTML is a very easy language for creating the  web pages. It can be learned in few hours or in few days.  It is the basic format of the HTML file it can be displayed  on mostly operating system which supports the web browser. With the help of HTML you can easily create a webpage. Basics of HTML What is an HTML File? 1. HTML stands for Hyper Text Markup Language. 2. An HTML file is a text file containing small markup tags. 3. The markup tags tell the Web browser how to display the page. 4. An HTML file must have an htm or html file extension. An...
Read more

HTML Lists

Image
HTML Lists Introduction In HTML there are three types of list ordered, unordered and definition lists. With the name itself you might be understanding that what is list. Yes you are thinking in the right way. It is the list of anything e.g. list of items, list of books. Hope now you are clear about the List element of the HTML. Now the question is that, can you create the list of items in the web page? Certainly not, But do not worry with the help of this small chapter you can create any type of lists on the your web page very easily. And it will take few of your minutes to learn. So lets Begain! Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles), it does not have numbers in the list. An unordered list starts with the <ul> tag and end with </ul>. list items are def...
Read more