Lecture-9 : LISTS IN HTML

There are three type of lists in HTML namely:-
<ul> :- An unordered list. This will list items using plain bullets.
<ol> :- An ordered list. This will use different schemes of numbers to list your items.
<dl> :- A definition list. This arranges your items in the same way as they are arranged in a dictionary.
Unordered List
An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Types of Unordered List:-
1. Circle
2. Disc
3. Square

Example of Unordered List

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Mango</li>
<li>Orange</li>
<li>Grapes</li>
<li>Water Melon</li>
</ul>
</body>
</html>


Output :-



Ordered List
If you are required to put your items in a numbered list instead of bulleted then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

Types of Ordered List:-
You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number. Following are the possible options:
<ol type=”1”> - Default-Case Numerals.
<ol type=”I”> - Upper-Case Numerals.
<ol type=”i”> - Lower-Case Numerals.
<ol type=”a”> - Lower-Case Letters.
<ol type=”A”> - Upper-Case Letters.

Example of Ordered List

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Mango</li>
<li>Orange</li>
<li>Grapes</li>
<li>Water Melon</li>
</ol>
</body>
</html>


Output:-



List in List

<html>
<head>
<title>HTML Lists in List</title>
</head>
<body>
<ol>
<li>Fruits</li>
<ul>
<li>Orange</li>
<li>Grapes</li>
<li>Water Melon</li>
</ul>
<li>Vegetables</li>
<ul>
<li>Lady Fingers</li>
<li>Potato</li>
<ul>
</ol>
</body>
</html>


Output:-



Definitions List

In definition lists entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of following tags:-
<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list

Example of Definition List

<html>
<head>
<title>HTML Definition Lists</title>
</head>
<body>
<dl>
<dt><b>Mailing Lists</b></dt>
<dd>A mailing list is a collection of names and addresses used by an individual or an organization to send material to multiple recipients.</dd>
<dt><b>Chat Rooms</b></dt>
<dd>A chat room is a Web site, part of a Web site, or part of an online service such as America Online, that provides a venue for communities of users with a common interest to communicate in real time.</dd>
</dl>
</body>
</html>


Output:-