12 - HTML-Lists

People are always in a hurry when using web, even though they have unlimited access to internet. We have to be more careful when we are presenting text to the users. Usually, we skim the web pages than reading the whole text. So, it is always preferable to structure the text into important points. We can structure the text in the form of lists using different types of lists in HTML.

There are 3 types of lists in HTML. They are:

1. Unordered Lists

2. Ordered Lists

3. Definition Lists

 

Unordered Lists

An unordered list is created using ul element. The ending tag </ul> is required. The elements of the list are created using list item <li> tag (ending tag is optional, but use it). Use this type of list to specify information that does not follow any sequence or order.

By default, the unordered lists are displayed using bullets (small black circles). We can also specify other styles using “type” attribute. The possible values for type attribute are:

  • Circle
  • Disc
  • Square

A program for unordered lists,

<html>
  <head>
    <title>
      Unordered Lists
    </title>
  </head>
  <body>
    <h3 align=”center”>To buy</h3>
    <ul>
     <li> Milk </li>
     <li> Bread </li>
     <li> Butter </li>
     <li> Vegetables </li>
    </ul> 
  </body>
</html>

 

The output of the above program would be:

To buy

  • Milk
  • Bread
  • Butter
  • Vegetables

 

Using type attribute in unordered list:

<h3> Specializations in Engineering</h3>
  <ul type=”circle”>
    <li> CSE </li>
  </ul>
  <ul type=”disc”>
    <li> ECE </li>
  </ul>
  <ul type=”square”>
    <li> EEE </li>
  </ul>

The output of the above code would be,

Specializations in Engineering

  • CSE
  • ECE
  • EEE

Ordered List

An ordered list is created using ol element. The ending tag </ol> is required. We use these types of lists when we want to order the content. The content of the list is created using <li> tag (ending tag is optional, but use it).

By default, the items of the list are numbered. We can also specify other styles using “type” attribute. The possible values for type attribute are

· lower case letters (a to z),

· upper case letters (A to Z),

· lower case roman numerals (i, ii, etc) and

· upper case roman numerals (I, II... etc)

A program for Ordered lists:

<html>
  <head>
    <title>
       Ordered Lists
    </title>
  </head>
  </body>
    <h3 align=”center”>Table of Contents</h3>
    <ol>
     <li> Introduction </li>
     <li> Purpose </li>
     <li> Scope </li>
     <li> Existing System </li>
   </ol> 
  </body>
<html>

The output of the above program would be,

Table of Contents

1. Introduction

2. Purpose

3. Scope

4. Existing System

Using type attribute in unordered list:

This line of code gives the following output when specified in the above program

<ol type=”a”> <ol type=”A”> <ol type=”i”> <ol type=”I”>

a. Introduction A. Introduction i. Introduction I. Introduction

b. Purpose B. Purpose ii. Purpose II. Purpose

c. Scope C. Scope iii. Scope III. Scope

d. Existing System D. Existing System iv. Existing System IV. Existing System

We can further customize the look of ordered list using start attribute. With this attribute we can specify the beginning of any index.

For example:

<ol start=”3”>
  <li> Introduction </li>
  <li> Purpose </li>
  <li> Scope </li>
  <li> Existing System </li>
</ol> 

The output would be,

  1. Introduction
  2. Purpose
  3. Scope
  4. Existing System

Definition Lists

These are entirely different from the above two types of lists. We use this type of list when we want to specify list items and their definitions.

They are created using dl element. The ending tag </dl> is required. Each list item has two parts, a data term and its definition/description.

The data term is enclosed within <dt> and </dt>

Its definition in <dd> and </dd>

The <dt> and <dd> pairs are enclosed within <dl> and </dl>.

These are used to present glossaries, name/value pairs, dictionary entries etc.

The following terms mean,

<dl> - Definition List

<dt> - Data term

<dd> - Data Definition

Example Program for Definition Lists:

<html>
  <head>
   <title>
     Definition Lists
   </title>
  </head>
  <body>
    <h3 align=”center”>Definition List</h3>
    <dl>
      <dt> <b>MEME</b></dt>
      <dd> An idea or pattern of thought that "replicates" like a virus by being passed along from one thinker to another.</dd>
      <dt> <b>MOIRA</b> </dt>
      <dd>Fate or the three fates in Greek mythology </dd>
   </dl>
  </body>
</html>

The output of the above program would be,

Definition List

MEME

An idea or pattern of thought that "replicates" like a virus by being passed along from one thinker to another.
MOIRA
Fate or the three fates in Greek mythology

Important Points:

· Lists are supported in all major browsers

· Lists support all the global attributes.

· We can also create list of lists, that is lists can be nested

· Do not use list elements to indent your content.

· Use start and type attributes to customize lists.

Like us on Facebook