PROJECT CODE

                                            The Developers Choice!!!!
                                                                                                            Home | About Us | Contact Us

HTML TUTORIALS

Lecture16 : Lists

What is HTML List
Lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read. Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. Lists appear in web browsers as bulleted lines of text. All lists must contain one or more list elements.
Type of HTML List
There are actually three different types of HTML lists, including unordered lists (bullets), ordered lists (numbers) and Description lists.
  • Unordered List
  • Ordered List
  • Description List
What is Unordered List
An unordered list define with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). It used to group a set of related items, in no particular order.
How to use Unordered List
Unordered list use one set of <ul> </ul> tags, wrapped around many sets of <li> </li> :

<ul>
<li>Ramesh</li>
<li>Suresh</li>
<li>Ram</li>
</ul>
How to implement Unordered List
Example :
<!DOCTYPE html>
<html>
<body>

<h4>Define Unordered List:</h4>
<ul>
<li>Ramesh</li>
<li>Suresh</li>
<li>Ram</li>
</ul>

</body>
</html>


Output :

Define Unordered List:

  • Ramesh
  • Suresh
  • Ram
What is Ordered List
An ordered list is defined using the <ol> tag. An ordered list can be numerical or alphabetical. An ordered list created using the OL element, should contain information where order should be emphasized. Ordered lists or numbered lists are used to display a list of items that need to be placed in a specific order.
How to use Ordered List

It used to group a set of related items, in a specific order.

<h4>Define Ordered List:</h4>
<ol>
<li>Ramesh</li>
<li>Suresh</li>
<li>Ram</li>
</ol>
<ol start="100"> <li>Ramesh</li>
<li>Suresh</li>
<li>Ram</li>
</ol>

How to implement Ordered List

Example :
<!DOCTYPE html>
<html>
<body>

<h4>Define Ordered List:</h4>
<ol>
<li>Ramesh</li>
<li>Suresh</li>
<li>Ram</li>
</ol>
<ol start="100"> <li>Ramesh</li>
<li>Suresh</li>
<li>Ram</li>
</ol>

</body>
</html>


Output :

Define Ordered List:

  1. Ramesh
  2. Suresh
  3. Ram
  1. Ramesh
  2. Suresh
  3. Ram
What is Description List
Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.
How to use Description List
Description list used to display name/value pairs such as terms and their definitions, or times and events.

<h4>Define Description List:</h4>
<dl>
<dt>Ramesh</dt>
<dd>Playing cricket</dd>
<dt>Suresh</dt>
<dd>Drinking water</dd>
</dl>
How to implement Description List
Example :
<!DOCTYPE html>
<html>
<body>

<h4>Define Description List:</h4>
<dl>
<dt>Ramesh</dt>
<dd>Playing cricket</dd>
<dt>Suresh</dt>
<dd>Drinking water</dd>
<dt>Sita</dt>
<dd>having lunch </dd>
</dl>

</body>
</html>


Output :

Define Description List:

Ramesh
Playing cricket
Suresh
Drinking water
Sita
having lunch
   
All Rights Reserved with Project code