LIST IN HTML


                                                      LISTS IN HTML

 

People are usually in a hurry when using the Web. This behavior may be a carry over from when folks used to pay for the actual time spent on the Internet. Back in the olden days, say four years ago, users did not have the luxury of unlimited time on the Web. So they would quickly go online, get the information they needed and sign off. In this way, the user just paid for the little time used.

For Example when we go to a restaurant , the items displayed in the form of a list on the menu card, which is easily readable and understandable, exaclty during working on web lists plays an important roll

Things are different today. Mostly everyone has unlimited time access to the Web, but the behavior hasn’t changed much. People are still in a hurry, and they don’t like to read a lot of text. So putting your information in the form of a list seems to help.

Lists come in a variety of forms with most either numbered or bulleted. The numbered lists are called ordered lists and the bulleted lists are unordered lists and lists with some definitions called definition lists.

 

  • Unordered List : Used to group a set of related items, in no practical order.
  • Ordered List : Used to group a set of related items, in aspecific order.
  • Definition List : Used to display name/value pairs such as terms and their definitions, or times and events.

 

UNORDERED  LISTS

An unordered list typically is a bulleted list of items. HTML 3.0 gives you the ability to customise the bullets, to do without bullets and to wrap list items horizontally or vertically for multicolumn lists. The opening list tag must be <UL>. It is followed by an optional list header (<LH>caption</LH>) and then by the first list item (<LI>).

There is one attribute thata can be used with <ul> tag. This attribute can have three different types of values as given below:

Attribute value Descripition
 

Type

 

Disc defAUlt
Circle Bullets in form of circle
square Bullets in form of square

 

 

Syntax for SQUARE bullets:

<ul type=”square”>

<li> item1</li>

<li>item2</li>

</ul>

For example:

<UL type=”square”>

<LH>Table Fruit</LH>

<LI>apples

<LI>oranges

<LI>bananas

</UL>

IN BROWSER:

Table Fruit

  • apples
  • oranges
  • bananas

 

 

 

Syntax for DISC bullets:

<ul type=”disc”>

<li> item1</li>

<li>item2</li>

</ul>

For example:

<UL type=”disc”>

<LH>Table Fruit</LH>

<LI>apples

<LI>oranges

<LI>bananas

</UL>

IN BROWSER:

Table Fruit

  • apples
  • oranges
  • bananas

 

 

Syntax for CIRCLE bullets:

<ul type=”circle”>

<li> item1</li>

<li>item2</li>

</ul>

For example:

<UL type=”circle”>

<LH>Table Fruit</LH>

<LI>apples

<LI>oranges

<LI>bananas

</UL>

 

IN BROWSER:

 

Table Fruit

  • apples
  • oranges
  • bananas

 

 

 

NESTED UNORDERED LIST

There may be times when you want to open a side navigation list out, to show subsections within a section. The most semantically correct way to achieve this is by using nested lists.

For example:

<ul type=”square”>

<li>Main Unordered Bulleted List item 1</li>

<li>Below is an example of HTML nested unordered list with bullets

<ul type=”disc”>

<li>nested list item 1</li>

<li>nested list item 2</li>

<li>Sub nested unordered list

<ul type=”circle”>

<li>sub nested list item 1</li>

<li>sub nested list item 2</li>

</ul>

</li>

</ul>

</li>

</ul>

IN BROWSER:

 

 

  • Main Unordered Bulleted List item 1
  • Below is an example of HTML nested unordered list with bullets
    • nested list item 1
    • nested list item 2
    • Sub nested unordered list
      • sub nested list item 1
      • sub nested list item 2

ORDERED  LIST

 

These aresometimes called numbered lists, and list items that have a specific numerical order or ranking.Use the <ol> tag (the ending </ol> tag is required), to create a numbered list with numbers starting at 1. The elements are created with the <li> tag.

      ATTRIBUTE        VALUE           DESCRIPTION
 

Type

        1(Arabic) List in numerical form
        A List in Alphabetical form(uppercase)
        a List in alphabetical form(lowercase)
         I List in roman letters(lowercase)
         I List in roman letters(uppercase)

 

 

Syntax:

<ol>

<li> item1 </li>

<li> item2 </li>

</ol>

 

For example:

<ol>
<li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ol>

IN BROWSER

 

  1. My first item on the list.
  2. My second item on the list.
  3. My third item on the list.
  4. My fourth item on the list.

 

In ordered list we can also set the start position according to our need also, consider the given example:

<html>

<body>

<ol type=”a” start=”3″>

<li>My first item on the list.</li>

<li>My second item on the list.</li>

<li>My third item on the list.</li>

<li>My fourth item on the list.</li>

</ol>

</body>

</html>

IN BROWSER

 

  1. My first item on the list.
  2. My second item on the list.
  3. My third item on the list.
  4. My fourth item on the list.

 

 

NESTED ORDERED LIST

Nesting of an ordered list also possible. The method of nesting an ordered list is as follows:

For example:

<ol>

<li>first</li>

<li>second

<ol>

<li>second nested first element</li>

<li>second nested secondelement</li>

<li>second nested thirdelement</li>

</ol>

</li>

<li>third</li>

<li>fourth</li>

</ol>

IN BROWSER:

 

  1. first
  2. second
    1. second nested first element
    2. second nested secondelement
    3. second nested thirdelement
  3. third
  4. fourth

 

 

 

DEFINITION  LIST

 

Definition lists create a list with two parts to each entry: the name or term to be defined and the definition. This creates lists similar to a dictionary or glossary. There are three tags associated with the definition list:

  • <dl> to define the list
  • <dt> to define the definition term
  • <dd> to define the definition of the term

HTML does not require the closing tag for the <dt> or the <dd>, but it’s a good idea to use them so other parts of your design aren’t confused.

 

 

For example:

<dl>
<dt>This is a definition term</dt>
<dd>And this is the definition</dd>
<dt>term 2</dt>
<dd>definition 2</dd>
<dt>term 3</dt>
<dd>definition 3</dd>
< /dl>

IN BROWSER:

 

This is a definition term

And this is the definition

term 2

definition 2

term 3

definition 3

 

Use definition lists anywhere you have a list that has two parts to each item. The most common use is with a glossary of terms, but you can also use it for an address book (name is the term and the address is the definition), or an HTML form (field name is the term, input box is the definition), or for any list of name/value pairs.